How to Add Related Post widget with Thumbnails

How to Add Related Post widget with Thumbnails

Related post widget with thumbnails is a really good widget because it helped to increase page view of your blog. It’s also helped your blog to reduce bounce rate of your blog. That’s why you need to use this widget on your blog.


Step 1
First Log In to your Blogger Dashboard.

Step 2
Click Theme Option and Click Edit HTML Option

Step 3
After That Press Ctrl+F and Find </head> tag in your template.

Step 4
Copy the Below Code and Past it before the Closing tag.

<!--Related Posts with thumbnails Scripts www.zealmat.com-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {

#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{
#related-posts a:hover{
#related-posts  a:hover {
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_jM8-wHc3NKY/TPyEXEv34II/AAAAAAAAADE/pgs7crFJ_D4/s1600/no+Image+1.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";

<script src='http://olusegun-fapohunda-calculator.googlecode.com/svn/wiki/related-post-with-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts www.zealmat.com-->

Step 5
Now find any of below code in your template

<p class='post-footer-line post-footer-line-1'>

<div class='post-footer-line post-footer-line-1'>
<div class='footer'>

Step 6
Now immediately after found any of these lines (whichever you could find) place the code snippet below.

<!– Related Posts with Thumbnails Code Start www.zealmat.com–><!– 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=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’/><!– remove –></b:if><b:if cond=’data:blog.url == data:blog.homepageUrl’><b:if cond=’data:post.isFirstPost’><a href=’https://www.zealmat.com’ rel=’dofollow’>Related Post Widget</a></b:if></b:if>

Step 7
Now Save your template.

Step 8
You have Successfully Add Related Post Widget with Thumbnails to your blog.

PROCESS 1. If you want to change total no of posts displayed in your blog posts, Edit the following line of code.
var maxresults=5;

PROCESS 2. To Change the title of your related post widget, change the following line of code.
var relatedpoststitle=’Related Posts’;

[quads id=3]

I hope this tutorial of How to Add Related Post Widget with Thumbnails is useful to all of you, If you like this post please share it with your friends and if you have any question regarding this post then you can ask with me in below comment box.