How To Add Related Posts with Thumbnail to Blogger

Related posts is played a great role for your blog. While your reader scrolling on your current topic, they might want to find another topic that related to what they are reading. Now, here is a wonderful widget to show your related different topic that will longger interest your reader to find useful topic iside your blog.

How to add related posts widget to Blogger/Blogspot

1. Login to Blogger Dashboard>>Template>>Edit Template

-Press "Ctrl + F" to open the search box and find </head> tags.

2. Just above the </head> past the following code:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='https://helpblogger.googlecode.com/svn/trunk/related%20post%20thumbnail.js' />
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

*Note:
- If you want to change size of thumbnail, just edit the value in Red by yourself.
- To change the size of title of related posts, just change value in Green.

3. Now to add the skin, Just above <div class='post-footer'> past the following code:

<!-- Related Posts with Thumbnails Code Start-->
<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'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://cambohelpblogger.blogspot.com/2015/03/add-related-posts-thumbnail-blogger.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

*Note: 
-If you want to show related posts more than 5, change the value 5 to a number you want to.

4. Save the Template

Now your work is done! I hope that this tutorial will help you. If you still have any questions, feel free to descuss with you.

Enjoyed this post?
Be sure to subscribe to get regular updates delivered to your email inbox, for free.