How to Add Related Posts Widget with Thumbnails in Blogspot

In this article we will see how we can add a customized Related post Widget with Thumbnails in our blogger blogs. Related post Widget is very important for any website and if widget is beautifully animated then it always gives a very good impression to the visitors. Animated widget is hard to implement via html but we have a new and very fresh widget with animation.

Step 1:

•  Sign In to Blogger Dashboard
• Go to Template> Edit HTML
• Search </head> by pressing Ctrl+F
• Copy the below code and paste above </head>

 <!--Related Posts with thumbnails Scripts Start--> 
 <b:if cond='data:blog.pageType == &quot;item&quot;'>  
 <style type='text/css'> 
 #related-posts { 
 float:center; 
 text-transform:none; 
 height:100%; 
 min-height:100%; 
 padding-top:5px; 
 padding-left:5px; 
 } 
 #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; 
 } 
 #related-posts a{ 
 border-right: 1px dotted #DDDDDD; 
 color:#5D5D5D; 
 } 
 #related-posts a:hover{ 
 color:black; 
 background-color:#EDEDEF; 
 } 
 </style> 
 <script type='text/javascript'> 
 var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4LZPxwQiCzeoKMHP1oMSi_EuYXKGNkLXzWV8CmnQGiUDUTzK-X9Ug_eZfZLkrbKJSXewH_JnW_ArQ3DHqTjkcPTlGWMGvweXjsgzBrmHMcsAb5ZO4q_cIiZEVnl7fhr0vBmK_NPf6d1w/s400/noimage.png"; 
 var maxresults=5; 
 var splittercolor="#DDDDDD"; 
 var relatedpoststitle="Related Posts"; 
 </script><a href="http://hownow.me" style="font-size:0pt">Blogger Widgets</a> 
 <script src='https://googledrive.com/host/0BwALzyMd6jXXQlVtUjNEX3pnVDg' type='text/javascript'/> 
 </b:if> 
 <!--Related Posts with thumbnails Script End--> 

• Remove Orange marked to add related posts to homepage too
• Change Blue marked to change the number of posts should be displayed

Step 2:

• Find <div class='post-footer'> and paste the below code above it

 <b:if cond='data:blog.pageType == &quot;item&quot;'> 
 <div id='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=5&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> 
 <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> 
 <a href='http://hownow.me'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirdu6ODDbk7unAANGpGXsqk9A_1JBS-ticO55EnGY1y4krunyUJtmvCKbNjKu_utoahXxkcylMpmJSp5WjnX74rZ3jo6ptyPn27srKL9RDVcPOOaJD_mMG6UZRAX7L-ewcgLTB-61SZhk/s1600/1x1juice.png'/></a> 
 </b:if></b:if> 

• Remove Orange marked to add related posts to homepage too
• Change Blue marked to change the number of posts should be displayed