How to Add Related Posts Plugin with Thumbnails on Blogger?

Hi bloggy readers,
Adding a group of links on the bottom of article that have relevancy with the article you are currently reading or so called Related Posts Plugin, can have such a huge impact especially on the number of pageviews you will get for your blog. That's why many bloggers feel about how important it is to add this related posts plugin in order to keep visitors from leaving their blogs. So, if you haven't embed this related posts plugin in your blog, i insist you to start installing this widget in your blog.

Anyway, besides that related posts plugin, there is one other cool widget that has the same function like that widget, with the addition of thumbnails on each related link.

  Related Posts Plugin with Thumbnails

 By installing this related posts plugin with thumbnails in your blog, you can display not only the group of links that relates with the article you are currently reading, but also, with the thumbnails or images of each related link. Interested to install this related posts plugin in your blog? Read on to find out more. Anyway, thanks to BloggerPlugins.Org for showing me this cool widget.

1. Sign in to Blogger Account
Firstly, now head on to Blogger.com and sign in to your account.

2. Go to Edit HTML
In the Dashboard, now pick one of your blogs that you want to add with this widget, and then, press Layout/Design > Edit HTML.

3. Make a Back up Template
Anyway, to prevent of doing any kind of mistake in your blog tempate, i strongly suggest you to save the current template of your blog to download a back up template. Now click at the link Download Full Template.

 4. Expand Widget Templates
As you can see on the top position of the HTML box of blog template, there is a small box called "Expand Widget Templates". Now press or give a check mark to that small box.

5. Find the code
Now by pressing Ctrl + F at the same time, find the code below:

</head>

6. Add a new CSS styling and script code
Okay, after locating the code section on number 5 above, now copy the CSS styling and javascript code below, and then, paste it above the code </head>.
 

<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/AVvXsEhIQtDqStDVA57n2G6-23d3tHtXrh-d2zxpyHU0tlHqNyuhDX7Eq_E-Uu6e38b7xLMkDQjuz3kjgAs9bhJcr8R3g9fRBI6qLvIlvG2CJF00NzXEuAILvB_F3G0ImFpY7I_8ypTT8fvs4ec/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'/>
</b:if>

 7. Find the code
Now find the code below (Ctrl + F):

<p><data:post.body/></p>

or you can also track this code below if you cannot locate the code section above in your template:

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

8. Paste the Code
Right after the code section you've just found on number 7 above, now copy the code below with your mouse cursor and after that, paste it below the code section <p><data:post.body/></p> or after the code <div class='post-footer-line post-footer-line-1'>.

<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'>
</b:if></b:if>

9. Save the Template
Now save the template by pressing the Save template button.

How to customize the related posts plugin with thumbnail?

Okay, if you are having difficulty in customizing the configuration of this related posts plugin, i am gonna show you how exactly to modify every part of this related posts plugin to get the best look to your preferences. Firstly, to customize how many topic that you want to display on this widget, you can simply edit the value inside the code below:

var maxresults=5;

And then, to customize the Title "Related Post" with another title that suits you well, you can edit the code below:

var relatedpoststitle="Related Posts";

Okay, that's it for now. See you at my next articles.