Minimalist, Gallery Responsive : Aware Blogger Templates

Minimalist, Gallery Responsive : Aware Blogger Templates

Description Theme: Aware is a free blogger template with 2 columns, responsive design, right sidebar, gallery-styled, minimalist, exclusive design for Blogger, footer columns, slideshow, social bookmarking icons, posts thumbnails, tabs, breadcrumbs, pagination, emoticos, emoticons, well formatted threaded comments and neutral colors.

 

 

   DemoView   

  DownLoad Aware Theme  

Aware Blogger Theme merupakan template yang bisa dikatakan adaptasi dari wordpress. Template ini juga dari desainer ThemeWich. 

Features Aware Blogger Template

Responsive blogger Template.

JSON Search Result dengan jQuery Ajax sehingga loadingnya lebih cepat.

Costum CSS lightbox blogger.

Sidebar dikanan dan 3 kolom untuk footernya (tombol toggle pada untuk menampilkan footer).

Tab Widget pada sidebarnya

Related Post/Artikel terkait dengan Ajax sehingga loadingnya agak cepat(script dari moretechtips saya modifikasi sesuai templatenya).

Emoticon pada bagian komentar.

2 jenis Menu yaitu Normal Menu dan Mobile Menu (pada mobile menu menggunakan SelectNav)

Ajax Recent post / Artikel (dengan Animasi) dan News Ticker di atas Menu

Ajax Recent Comments / Komentar terbaru dengan fitur untuk menghilangkan komentar Admin blog(dengan Animasi)

Auto Slider dalam bentuk carausel “carouFredSel-6.1.0” dengan fitur (bisa random post, recent post, random post bedasarkan tag/label dan recent berdasarkan tag/label)

Optimasi SEO.

Support modern browser IE9, Mozilla, Chrome

Ada 5 Pilihan warna yaitu Biru, Hijau, Merah, Orange, Biru Kehijauan (Turquoise).

Clean dsign Portfolio blogger template

Minimalis and clean dsign blogspot template
Portfolio blogger template

Portfolio blogger template – Show a thumbnail image (small image) for every post using this template and Clean Minimalist design. Want to have a simple but beautiful website? This template has minimal design by giving importance to content.

Portfolio template comes with hierarchical dropdown navigation menu and uses Web fonts like Google Fonts. Improve your website typography by using custom fonts.

http://redaksiexpo2012.blogspot.com/http://redaksiexpo2012.blogspot.com/

Note: Our documentation is for New Blogger dashboard. If you are still using old Blogger dashbord then it’s time to upgrade to new version.

Thumbnail Cropper for Home page:

This template supports Thumbcropper tool (http://technowit.org/crop/thumbcropper.php) for thumbnail generation. Your image may be very big (like 1200×800 etc.,). But, home page only needs 210×160 resolution image. Now, let’s see the steps to generate this small image,
  • Go to http://technowit.org/crop/thumbcropper.php
  • Paste your image url in Specify Image url text box and click that Yellow arrow button.
  • Now, your image will be displayed with a Get the code button. You can crop this image now. Just drag the image and choose the best thumbnail for your home page.
  • Then, copy the <img> code and use this in your Post. Don’t worry, full image will still be displayed in post page. Generated thumbnail will only be used in the home page.

 I don’t want to use Thumbcropper tool 
If you don’t want to use Thumbcropper tool then follow the steps below. Otherwise, only top left corner of your image will be displayed.
Go to Template — Customize. Then, click Advanced and paste the following code in the text box which says (Add custom CSS).

#post-thumbnail {
width: 210px;
}

This will resize all your images to 210×210. If your original image aspect ratio is also 1:1 then your images will look good on home page. Otherwise, it may look little bad.

 Adding the Navigation Menu 

To add the navigation menu,

go to your Blogger account>>Layout>>Click Edit on “Paste the navigation code” Widget.  Paste the following code in the content box.  Be sure to update the links and link text in the following code with your site links

<!– BEGIN #primary-nav –>
<div id=”primary-nav”>
<div class=”menu-main-container”>
<ul id=”menu-main” class=”menu”>
<li><a href=”/”>Home</a></li>
<li><a href=”http://whitemagicdemo.blogspot.com/p/archives.html”>Archives</a></li>
<li><a href=”#”>Dropdown</a>
<ul class=”sub-menu”>
<li><a href=”#”>Topography</a>
</li>
<li><a href=”#”>Tutorials</a></li>
<li><a href=”#”>Techniques</a></li>
<li><a href=”#”>Brushes</a></li>
</ul>
</li>
<li><a href=”/p/about.html”>About</a></li>
<li><a href=”/p/contact.html”>Contact</a></li>
<li><a href=”/p/license.html”>Licensing</a></li>
</ul>
</div><!– END #primary-nav –>
</div>

 Add Flickr Widget  
  • Create a HTML/Javascript widget in the footer and use the following code.
  • To find the FLICKR-ID login to Flickr account and Click YOU option in the navigation. You will be directed to a URL like :-http://www.flickr.com/photos/8710d861@N07/. The code 87108d61@N07 is your UserID

<div class=’flickr_wrap’><script type=”text/javascript” src=”http://www.flickr.com/badge_code_v2.gne?count=18&display=latest&size=s&layout=x&source=user&user=FLICKR-ID”></script></div>

You are free to use, distribute or adapt Portfolio blogger template for your personal or commercial website. But, you must attribute the work to the author. Should not remove credit links.

Slider and Responsive Blogger Template : SIGHT

http://redaksiexpo2012.blogspot.com/2013/08/slider-and-responsive-blogger-template.html
Sight Blogger Template

Template name : Sight
Platform: Blogger/Blogspot
Release date : June 2013
Author :  www.soratemplates.com
Designer: presslayer

License : Creative Commons Attribution 3.0
Basic Instructions : How to install a Blogger Template

 

Template features :

Blogging, Pinterest, Responsive, Clean, Featured Content Slider, Fixed Width, Dropdown Menu, Social Widget.

http://redaksiexpo2012.blogspot.com/http://redaksiexpo2012.blogspot.com/

SIGHT blogger template merupakan salah satu desain terbaik untuk blog Personal, Profil Bisnis, atau Organisasi. Style elegant pada tampilan home page dihiasi dengan Slide Show yang dilengkapi dengan fitur deskripsi, merupakan daya tarik tersendiri pada template ini.

Tidak hanya itu, template yang didapat dari gudang Soratemplates ini juga sudah Responsive. Sehingga mampu mengimbangi perkembangan zaman, dimana saat ini banyak visitor dalam mengakses internet tidak hanya melalui PC atau Notebook, melainkan sudah menggunakan beragam gadget seperti handphone atau lainnya.

Configure Featured Content Slider:

Login to blogger dashboard –> layout –> Edit HTML. Now scroll down to where you see the codes below:

<div class=’fullwidth flexslider’ id=’homeslider’>
<ul class=’slides’>
<li data-height=’500′ style=’position:relative; background: url(../image.jpg) 50% 0′>
<div class=’caption_wrapper’>
<div class=’caption’>
<h3><a href=’#‘>In luctus luctus est vestibulum luctus</a></h3>
Lorem ipsum dolor sit amet… <a href=’#‘>Read more </a>
</div>
</div>
</li>
……….

Replace:

  • #” with your featured post URL.
  • image.jpg with your slider image.

Configure Dropdown Menu Template:

Login to blogger dashboard –> layout –> Edit HTML. Now scroll down to where you see the codes below:

<div class=’menu-navigation-container’ id=’top_menu’>
<ul class=’sf-menu’ id=’mainmenu’>
<li class=’current-menu-item’><a href=’#‘>Homepage</a></li>
<li><a href=’#‘>Single</a>
<ul class=’sub-menu’>
<li><a href=’#‘>Submenu Example</a></li>
<li><a href=’#‘>Submenu Example</a></li>
……….

Replace “#” with your menu item URL.

Configure Social Widget Template:

search for:

<div class=’social_inner’>
<a class=’facebook’ href=’#‘ title=’Facebook’/>
<a class=’twitter’ href=’#‘ title=’Twitter’/>
<a class=’rss’ href=’#‘ title=’RSS Feed’/>
……….

Replace “#” with your Social Account’s URL.

How to change Author Section:

search for:

 <div class=’author_avatar’>
<div class=’small_thumb’>
<img height=’auto’ src=’../Avatar.jpg‘ width=’100’/></div></div>
<div class=’author_wrapper’>
<h4>About author: <a href=’#‘>Admin</a></h4>
<p>Cress arugula peanut tigernut… </p></div>
<div class=’clear’/>
</div>

Jika anda memilih template blogspot dengan content Slider and Responsive,  SIGHT Blogger Template karya Presslayer tersebut mungkin dapat menjadi pilihan yang tepat.

Galauness Blogger Template

Description Template
Galauness is free premium blogger template with Elegant, Clean and Minimalist Design, WordPress Look’ Neat Typography, Fixed Width, jQuery Post Slider, Unlimited Background, Top Navigation Menu, Template Designer Ready, 2 Main columns and 3 columns at Bottom, Custom 404 error page and Custom Lightbox, Beautiful related posts links and Social Links Button and more.

Galauness Blogger template supports Blogger template Customizer. Customize Background color, Text color, Link color, Blog Title color, Post title color, Blog description color, Fonts easily. Go to Template — click Customize and then Advanced for these customization.

Galauness template is optimized for Search engines like Google. This template helps your website to rank higher in search engines. 
Name : Galauness
Author :  Iksandi Lojaya
URL Author http://iksandi.com
Template Tutorials How to use this templates

Alyeska Blogger Template (Awesome slideshow menu)

http://redaksiexpo2012.blogspot.com/
Alyeska Blogger Template

Template name : Alyeska
Platform: Blogger / Blogspot
Release date : May 2013
Author : www.soratemplates.com
Designer : themeblvd
License : Creative Commons Attribution 3.0
Basic Instructions : How to install a Blogger Template 

http://redaksiexpo2012.blogspot.com/http://redaksiexpo2012.blogspot.com/

Template features : 
Portfolio, Fashion, Featured Content Slider, Fixed Width, Dropdown Menu, Social Widget, Blue Background, Page Navigation Widget.

Descriptions : 
Alyeska Blogger Template is a premium blogger template with 2 columns and sidebar on the right side. This template has a lot of great features, like a slideshow menu, dropdown menu, page navigation, social bookmarking icons, 4 columns in the footer and more. Header and background very well with blue and and gray on the main part of this template. This template is very suitable for blog about photography or images gallery. 

Configure Featured Content Slider:
Login to blogger dashboard –> layout –> Edit HTML. Now scroll down to where you see the codes below:

<ul class=’carrousel-slider’>
<li class=’slide’>
<div class=’slide-body’>
<div class=’grid-protection’>
<a class=’image-link enlarge’ href=’#‘><span>Image Link</span></a>
<img src=’../slide.jpg‘/>
</div>
</div>
</li>
……….

Replace:

  • #” with your featured post URL.
  • slide.jpg with your slider image.

Configure Dropdown Menu:
Login to blogger dashboard –> layout –> Edit HTML. Now scroll down to where you see the codes below:

<ul class=’menu’ id=’menu-main-menu’>
<li><a href=’#‘>Home</a></li>
<li><a href=’#‘>Blog</a></li>
<ul class=’sub-menu’>
<li><a href=’#‘>Full Width Page</a></li>
<li><a href=’#‘>Sidebar Right</a></li>
……….

 Replace “#” with your menu item URL.

Configure Page Navigation Widget:

search for:

var posts=8, // Number of posts in each page
       num=2, // Number of buttons will display

 

Tarnished Blogger Template

Tarnished Blogger Template slider, video by sora templates
Tarnished Blogger Template

Template name : Tarnished
Release date : June 2012
Author : www.soratemplates.com
Designer : www.ghostpool.com
Basic Instructions : How to install a Blogger Template

Template features : 
WordPress Look, 2 Columns, 4 Columns Footer, Right Sidebar, Portfolio, Header Banner, Featured Content Slider, Fixed Width, Blue Background, Top Navigation Menu, Page Navigation, Social Bar.

Configure Featured Content Slider:

Login to blogger dashboard –> layout –> Edit HTML. Now scroll down to where you see the codes below:

<div class=’slide’ style=’width: 950px; height: 450px;’>
<div class=’caption-overlay caption-bottomright caption-dark’>
<h2>Nunc arcu ipsum</h2></div>
<img class=’slider-image’ src=’/image.jpg‘ style=’width: 950px; height: 450px;’/>
……….
<span class=’slider-button’>
<img src=’/thumbnail.jpg‘ style=’width: 109px; height: 54px;’/>
</span>
……….

Now replace:

  • image.jpg” with your slider image.
  • thumbnail.jpg” with your thumbnail image.

Configure Dropdown Menu:

Login to blogger dashboard –> layout –> Edit HTML. Now scroll down to where you see the codes below:

<div id=’menu’>
<ul class=’menu’ id=’menu-header’>
<li><a href=’#‘>Home</a></li>
<li><a href=’#‘>Pages</a>
<ul class=’sub-menu’>
<li><a href=’#‘>Page With Left Sidebar</a></li>
……….

Just replace “#” with your menu item URL.

How To Change Header Banner:

find this:

<div id=’header-widget’>
<div class=’textwidget’>
<a href=’#‘><img border=’0′ src=’/banner.jpg‘/></a>
</div>
</div>

Now replace:
#” with your banner URL.
banner.jpg” with your banner image.

Configure Page Navigation Widget:

search for:

var pages=4, // Number of posts in each page
        num=2, // Number of buttons will display