How To Create/Add Stylish Related Posts Widget with Thumbnails in Blogger Blog Templates

Regularly at SpicyTricks, I have shared the many Free Blogger Templates with premium style and design with many custom blogger widgets. Many users sending mails with the Question of  How To Create custom Blogger Widgets like in your Blogger Templates? To help all those people, Here I am going to share the Guide to create Stylish custom Blogger Widgets in my style.

First I’m going to share how to create Stylish Related Post Widget in blogger blogs.

Why We need Related Post Widgets in Blogger Blogspot?

Displaying related posts under every single post will give you many benefits. First, your blog readers will stay in your blog for a longer time if the related contents are really useful. Second it will give you the SEO benefit. I’m not going to talk much about this now(I will share more details later). Now Letus move on the main topic

How To Create Beautiful Related Posts Widget with Thumb for Blogspot blogs

 Step 1 :  Login to your Blogger dashboard and go to Template section. There first back up your Blogger template.

Step 2 : Next click the Edit HTML button and in the pop up box, click the Expand Widget Template.

Step 3 : Next find the </head> section using ctrl + F and add the following code before that.

<!--Related Posts with thumbnails Scripts and Styles Start-->
 <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style type='text/css'>
 #spicytricks-related-posts {
 float:center;
 text-transform:none;
 height:100%;
 min-height:100%;
 padding-top:5px;
 padding-left:5px;
 }

#spicytricks-related-posts h2{
 font-size: 18px;
 letter-spacing: 2px;
 font-weight: bold;
 text-transform: none;
 color: #5D5D5D;
 font-family: Arial Narrow;
 margin-bottom: 0.75em;
 margin-top: 0em;
 padding-top: 0em;
 }
 #spicytricks-related-posts a{
 border-right: 1px dotted #DDDDDD;
 color:#5D5D5D;
 }
 #spicytricks-related-posts a:hover{
 color:black;
 background-color:#EDEDEF;
 }
 </style>
 <script type='text/javascript'>
 var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
 var maxresults=6;
 var splittercolor=&quot;#DDDDDD&quot;;
 var relatedpoststitle=&quot;Related Posts&quot;;
 </script>
 <script src='http://spicemag.googlecode.com/svn/trunk/spicemag/SpicyTricks-Com-related-posts-big-thumbnails.js' type='text/javascript'/>
 </b:if>

Step 4 :  Next find the <div class=”post-footer”> or something related to this(it varies depending upon the author of the blogger template), add the following code before the post-footer.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='spicytricks-related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script> </div><div style='clear:both'/></b:if>

 Step 5 : Next Save the Template. Now you will have related post with thumbnails in your template.

To change the Number of posts in related post section : find the  max-results =5 and change the number.

Visit our Free Premium Blogger Templates gallery to get premium style templates