Related Posts Widget with Thumbnails for Blogger

To increase the look of the page / user can use a link related posts with thumbnail and linking with other similar posts. Users will be tempted to go for the related posts when they are presented attractively with thumbnails. This one also uses the media thumbnails generated by blogger for each post. For displaying the thumbnails,this widget will use the images uploaded for the post using the blogger image uploader (from the post editor) and supports external images also.

Here are the detailed steps to install the related posts widget for blogger with thumbnail.

1. First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" check box.
2. Look for
</head> and paste the copied following Code just above the line

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!--remove--><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: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy_tHFhQRl_mHel1qvgyTiE20QpFi0hqB5uWJsWAT01tQ-sqhDtOkUFne_65h-SIvI0-M_KF4YNLV30DBquOWxd3oW_F9nb9Ds7_B88RiYAfG-UWG7IXj80nOwdiF-9CHxMO7bfddMQ1M/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3. You can adjust the maximum number of related posts being displayed by editing line 33 in the code.
var maxresults=5
4. To edit the title of the widget you can change line 35 of code
var relatedpoststitle="Related Posts";
5. To change the default thumbnail, you can edit line 32 of code>/li>
   
   

   
   var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy_tHFhQRl_mHel1qvgyTiE20QpFi0hqB5uWJsWAT01tQ-sqhDtOkUFne_65h-SIvI0-M_KF4YNLV30DBquOWxd3oW_F9nb9Ds7_B88RiYAfG-UWG7IXj80nOwdiF-9CHxMO7bfddMQ1M/s400/noimage.png";
   

   
   
6. To Change the Colour of the Splitter Line , edit line 34 of code

var splittercolor="#d4eaf2";
To change the other colours and all you will have to modify the CSS


7. Now Find

<div class='post-footer-line post-footer-line-1'>
If you cant find it then try finding this one
<p class='post-footer-line post-footer-line-1>
Now immediately after any of these lines(whichever you could find) place this code snippet.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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=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'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

To display the related posts on every page and not only on the post pages

Just remove the two lines starting with <!-- remove --> from both step 2 and step 7. That is lines <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> and <!-- remove --></b:if> Done !! [Update : Increase traffic to your best posts by adding related links with Outbrain's Thumbnail Widget. The widget is free, simple to install and will automatically inherit the look and feel of your site. Set your preferences and in less than 60 seconds, your readers will begin seeing thumbnail images linking to great content.]

Share this article: