$0 (Free)


1. Sidebar; 3 footer rows, second row contains 3 columns;
2. Responsive
3. SEO Optimized
4. Easy to configured
5. Totally free, no encrypted codes.
6. Inspired by Google's search engine latest design.

How To Install?
First, download the template in this link.

1. After template downloaded, extract zipped template. Now you can see template as .xml file.
2. Go to Template section on your selected blog. Click Backup/Restore button and upload the extracted xml template file.

3. Now, navigate to realtime HTML template editing mode. Still in Template section, select Edit Template. Edit all empty meta tags, indicated by trailing x chars.

4. Then, find Javascript codes prefixes by //Configs start comment. This is configurations that will be used for this template. You can edit these variables freely or leave these with default value.

pageCount : Number of page navigation button in pagenav section
displayPageNum : Number of post each page
upPageWord : Link label used for navigate to previous page
downPageWord : Link label used for navigate to next page
currentposturl : Leave it as is.

maxresults : Number of related post shown in the post
relatedpoststitle : Message that lies in top of related post
summaryLength : Number of character used in post summarizing.

5. Register an account from AddThis, then replace script under <!-- AddThis script -->

NOTE: From version 2.1, this step is not needed.

6. Save changes. And now, begin to design your prefered blog layout in the Blogger Layout section.

TIPS: Change header logo using image to make it look nice. Try this link to instantly design your own text logo, based on Google design. It's free, no registration required.

Adding latest post (by category) slider widget
First, you need to add HTML widget, then paste these lines.

/* wrapper */
/* list */
#sideticker li { clear: both; overflow:hidden; margin:0; padding:0; border:none; display:table; } /* image */ #sideticker img { display:table-cell; margin-right: 4px; } /* title text */ #sideticker h4 { display:table-cell; font-size: 16px; font-weight:normal; vertical-align: middle; } </style> <div id='sideticker'> <ul></ul> </div> <script> function side_ticker(json){ document.querySelector('#sideticker ul').style.display = 'block'; var s_ticker = document.querySelector('#sideticker ul'); s_ticker.innerHTML = ''; json.feed.entry.forEach(function(e){ s_ticker.innerHTML = s_ticker.innerHTML + "<li><img src='"+$thumbnail['url'] +"'></img><h4><a href='" +$t + "'>" + e.title.$t + "</a></h4></li>"; }); $(function(){ $('#sideticker').easyTicker({ direction: 'down', visible: 3, interval: 2500 }); }); document.querySelector('#sideticker').style.display = 'block'; } </script> <script src='/feeds/posts/summary/-/LABEL NAME/?alt=json-in-script&amp;callback=side_ticker&amp;max-results=10' type='text/javascript'/></script>

Modify codes that marked down by red color with your own configurations. visible field is number of post that will be shown in this widget; interval is speed of animation, measured in miliseconds. And te last, LABEL NAME is appropriate post label/category to be shown up. Optionally, you can also modify CSS styles directly from this code.

I got no numbered page navigation
Sometimes it get happens while your site accessed by HTTPS. To fix it, try reupload blogger-numbered-pagination.js to other site, other than, then change current link source to new uploaded link.

No share buttons
Make sure you have paste correct script from AddThis to the template.

More problems?
To see details that make this error happened, try open inspect element or developer tools from your browser. You must be able to see explicit errors there.

Need Helps?
Drop me mail at irvan.herz at gmail dot com

Helps us
Today, I found many people use this template. I am very glad of this. I hope this template can pump up your blog's SEO quality soon.

I don't need your money. But, there's nothing totally free, actually. So, I just want you to keep the credits. Regarding to this, I hope you can notice this rules:
- Don't remove footer credits links that refer to our sites. If you don't like this, just add style='display:hidden'.
- If you still want to do so, place a backlink to us in your site, anywhere I don't care.

Load disqus comments