How to Add Related Post widget with Thumbnails

Get Free SEO Tips

related-post-with-thumbnails
Follow me

Mathias Amodu

Founder at Zealmat Limited
Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large
Follow me
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.

Image

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 {
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=”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>
<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′>
or
<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.

WIDGET ARRANGEMENTS
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.

About Mathias Amodu 912 Articles
Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large

Be the first to comment

Leave a Reply

Your email address will not be published.


*


[mc4wp_form id="3153"]