Search

Metro Blogger Template 2013 - Free Windows 8 Inspired Blogger Template

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:
Adding Slider to Metro Blogger Template 2013
view plaincopy to clipboardprint?
  1. <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" >  
  2. <div class="slides">  
  3.   
  4. <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>  
  5.   
  6. <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>  
  7.    
  8. <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>  
  9.   
  10. </div><span class="control left">&#8249;</span><span class="control right">&#8250;</span></div>  



Adding Load More Post Link:
Adding Load More Post Link to Metro Blogger Template 2013
view plaincopy to clipboardprint?
  1. <script type='text/javascript'>  
  2. (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");  
  3. 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=  
  4. 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);  
  5. </script>  



Adding Social Site Profile Links:
Adding Social Site Profile Links to Metro Blogger Template 2013
view plaincopy to clipboardprint?
  1. <div  id="sl">  
  2. <a href="http://twitter.com/tweetirsh"><img src="http://goo.gl/Fc2GY"/></a>  
  3.   
  4. <a href="http://fb.com/justchilll"><img src="http://goo.gl/ZKK5u"/></a>  
  5.   
  6. <a href="http://gplus.to/irsh"><img src="http://goo.gl/kmh3u"/></a>  
  7.   
  8. <a href="http://pinterest.com/irsh"><img src="http://goo.gl/ovrmx"/></a>  
  9.   
  10. <a href="http://pc-dreams.blogspot.com/feeds/posts/default?alt=rss"><img src="http://goo.gl/7euAP"/></a>  
  11.   
  12. </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