Metro Blogger Template 2013 - Free Windows 8 Inspired Blogger Template : techirsh

Metro Blogger Template 2013 is a free Blogger template with the look of Windows 8 UI Style. This template is fully customizable and you can easily customize it using the Blogger's Customize option itself.
The Template supports various Icons and Colorful Buttons to add inside your post or widget using simple class names.
The default widget Search This Blog is customized to show the search result below the search box itself, without disturbing the other layouts.
Different color styles are added to About Me, Search This Blog, Labels, Pages Navigation & Popular Posts widget.

Screen Shots:

Setup:

Adding Image Slider:

view plain copy to clipboard print ?

<div class="carousel" style="width:600px;height:350px;" data-role="carousel" data-param-effect="fade" data-param-direction="left" data-param-period="3000" data-param-markers="off" >
<div class="slides">
<div class="slide image"><a href="http://www.techirsh.com"><img src="http://goo.gl/DBTx2"/></a><div class="description">1 Some Description.</div></div>
<div class="slide image"><a href="http://www.techirsh.com"><img src="http://goo.gl/H9C5J"/></a><div class="description">2 Some Description.</div></div>
<div class="slide image"><a href="http://www.techirsh.com"><img src="http://goo.gl/dJ5Sj"/></a><div class="description">3 Some Description.</div></div>
</div><span class="control left">‹</span><span class="control right">›</span></div>

<div class="carousel" style="width:600px;height:350px;" data-role="carousel" data-param-effect="fade" data-param-direction="left" data-param-period="3000" data-param-markers="off" >
<div class="slides">

<div class="slide image"><a href="http://www.techirsh.com"><img src="http://goo.gl/DBTx2"/></a><div class="description">1 Some Description.</div></div>

<div class="slide image"><a href="http://www.techirsh.com"><img src="http://goo.gl/H9C5J"/></a><div class="description">2 Some Description.</div></div>
 
<div class="slide image"><a href="http://www.techirsh.com"><img src="http://goo.gl/dJ5Sj"/></a><div class="description">3 Some Description.</div></div>

</div><span class="control left">&#8249;</span><span class="control right">&#8250;</span></div>

Adding Load More Post Link:

view plain copy to clipboard print ?

<script type='text/javascript'>
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");
window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();0>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=
a('<a href="javascript:;" style="text-decoration:none;color:#FFFFFF;">Load more posts</a>');c.click(h);var e=a('<img src="http://goo.gl/Dx0Li" style="display: none;">');f.scroll(k);b=a('<div style="text-align: center; font-size: 150%; background:#444444;padding:10px;"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>

<script type='text/javascript'>
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");
window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();0>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=
a('<a href="javascript:;" style="text-decoration:none;color:#FFFFFF;">Load more posts</a>');c.click(h);var e=a('<img src="http://goo.gl/Dx0Li" style="display: none;">');f.scroll(k);b=a('<div style="text-align: center; font-size: 150%; background:#444444;padding:10px;"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>

Adding Social Site Profile Links:

view plain copy to clipboard print ?

<div id="sl">
<a href="http://twitter.com/tweetirsh"><img src="http://goo.gl/Fc2GY"/></a>
<a href="http://fb.com/justchilll"><img src="http://goo.gl/ZKK5u"/></a>
<a href="http://gplus.to/irsh"><img src="http://goo.gl/kmh3u"/></a>
<a href="http://pinterest.com/irsh"><img src="http://goo.gl/ovrmx"/></a>
<a href="http://pc-dreams.blogspot.com/feeds/posts/default?alt=rss"><img src="http://goo.gl/7euAP"/></a>
</div>

<div  id="sl">
<a href="http://twitter.com/tweetirsh"><img src="http://goo.gl/Fc2GY"/></a>

<a href="http://fb.com/justchilll"><img src="http://goo.gl/ZKK5u"/></a>

<a href="http://gplus.to/irsh"><img src="http://goo.gl/kmh3u"/></a>

<a href="http://pinterest.com/irsh"><img src="http://goo.gl/ovrmx"/></a>

<a href="http://pc-dreams.blogspot.com/feeds/posts/default?alt=rss"><img src="http://goo.gl/7euAP"/></a>

</div>

Adding these widgets are damn simple. All you have to do is.
Goto Blogger Dashboard - Select your Blog - Click Layout - Add a Gadget (anywhere in layout where you wish to add the widget) - HTML/JavaScript