How To Add Related Post Widget with Thumbnail in Blogger


Adding Related Post Widget with Thumbnail in your Blogger Blog is one most important thing you should do. This widget makes your blog interesting thus readers (visitors) can stay longer your blog and this would increase your blog's page views.

This widget displays related post in the footer of each blog post related either in the same category, label or tag. By default, Blogger does not have this feature except you are using a professional third-party template. If you are using a default blogger template and you are looking for a way to include this cool feature to your blog, On this post, I will show you on how to add this widget.


The Pros and Cons of Adding Related Post Widget with Thumbnail in Blogger

Pros:
[*] Related Post Widget with Thumbnail helps increase the internal links in your blog thus making visitors spend more time on your blog.
[*] This widget also helps to increase your blog's page views.
[*]  Related Post is one of the internal linking SEO strategies just like the breadcrumbs, categories, related post, tags, latest post, archives etc.

Cons:
[*] Readers could get distracted thus moving from one post to another. But I don't see this as a con though.

Steps on How To Add Related Post Widget with Thumbnail in Blogger

Step 1: Go to Blogger Dashboard >> "Theme" >> click on the "Edit HTML" button.


Step 2: Click anywhere inside the HTML code area and press the CTRL + F keys to open the Blogger search box.


... type or paste the following tag into the search box and hit Enter to find it:
</head>

Step 3: Copy the below code and paste it just above the </head> tag

Code:

<!--Related Posts with thumbnails Scripts by RomShillzz Blog Start-->
<!-- remove --><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: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Ubuntu;padding:3px;color:#999999; text-transform:capitalize;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;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;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Ubuntu; line-height:16px;text-shadow:0 2px 2px #fff;height:100%;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts by RomShillzz Blod End-->


Configuration:

[*] To change the colour of the Related Post heading title, you can edit the yellow coloured value in above code #999999.
[*] To change height or width of the widget you can edit the red coloured value in above code 100px.
[*] To change colour and size of related posts titles, you can edit the Blue coloured value.
[*] Remove Green coloured lines, if you want related posts to be displayed on the homepage as well.

Step 4: Search for the following in your blog's HTML, press the CTRL + F keys to open the Blogger search box type or paste the following tag inside the search box and hit Enter to find it:
<div class='post-footer'>

Step 5: Now above it copy and paste the below code.

Code:

<!-- Related Posts with Thumbnails Code by RomShillzz Blog 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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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:if></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();
<span style="color: white;">|</span>
<hr style="margin-centre: auto; margin-right: auto;" />
<a href="https://goo.gl/cjifRq" target="_blank">Get This Widget</a>
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerwidgetgenerators.com'><img alt='Blogger Widgets' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code by RomShillzz Blog End-->


Configuration:

[*] Edit the value 5 in maxresults=5 with the number of posts you want to be displayed.
[*] Remove the green coloured lines if you want the related post to display on your homepage.
[*] Edit the text "Related Posts" in blue colour to any text you would like to display as the Related Post Title heading e.g "You Might Also Like:"

Step 6: Click on the Save Theme button


N.B: This is not a third party plugin so it works on every Blogger Theme (Template). There are other third party related posts widget like the LinkWithin so if you have used the LinkWithin Related Post Widget and it stopped working then I will recommend you to use the Related Post Widget with Thumbnail in your Blogger Blog Cheers!