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


8 comments:

  1. Hello I Am Not Getting The Read More Button How Do I Add It To My Blog With This Template

    ReplyDelete
    Replies
    1. Edit the post in HTML Mode and type <-- more --> inside the post where you would like to add the read more button. This is default feature of blogger.

      Delete
    2. http://i50.tinypic.com/wa5855.jpg
      this is how you are suppose to define read more in HTML format

      Delete
    3. Thanks My Problem Solved Do You Live In Vellore Whos.amung.us Stats Says That

      Delete
  2. How To Create A Full Width Blogger Page In This Template . I Want To Remove Sidebar And Embed Google Groups In It

    ReplyDelete