Show Related posts with Thumbnails below every posts in blogger [with Hover effect]

You can increase your pageviews by 20-50% by placing a stylish Related posts widget below every posts in blogger. It will also decrease the Bounce rate (low bounce rate means good Blog). Even though there are ready made widgets like Linkwithin for this porpose, adding your own is better and is recommended by everyone. Also this widget is already published by many sites. So, to be unique and best, I haven't added any backlinks or any credits informations. Also tweaked the Style a litle and added some customizations. I hope this will help you a lot.
How to add Widget to Blogger
1. Go to Blogger Dashboard

2. Go to Design > Edit HTML

3. Click on Expand Widget Templates

4. Now search for </head> in your template

5. Add the below Code just above </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
 <!-- remove -->
 <b:if cond='data:blog.pageType == "item"'>
 <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: #6E6E6E;
 color: #ffffff;
 <script type='text/javascript'> var defaultnoimage=&quot;;; var maxresults=5; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;&quot;; </script>
 <script type='text/javascript'>
//Script by Jayadeep KM
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;

catch (error){

{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="";}


if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 60)+"...";
for (var k = 0; k <; k++) {
if ([k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] =[k].href;

function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
relatedTitles = tmp2;
relatedUrls = tmp;


function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;

function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#d4eaf2";
for(var i = 0; i < relatedUrls.length; i++)

var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;

if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:102px;height:102px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:102px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');


if (r < relatedTitles.length - 1) {
} else {
r = 0;



 <!-- remove -->
 <!--Related Posts with thumbnails Scripts and Styles End-->
6.  Now search for below code in your template

<div class='post-footer-line post-footer-line-1'/>
7.  Now place below code snippet just before of above line.
<!-- Related Posts with Thumbnails Code Start-->
 <!-- remove -->
 <b:if cond='data:blog.pageType == "item"'>
 <div id='related-posts'><h4><font-color=red>Related Posts</font></h4><br/>
 <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; + + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script>
 <div style='clear:both'/>
 <!-- remove -->
 <!-- Related Posts with Thumbnails Code End-->
 8. Now save the changes and see the Blog.

  • Change Related Posts to anything which you want to display as title of the widget. if you don't want, just delete it.
  • Change var maxresults=5 to change the number of Related posts that to be displayed.
  • Change to change the default No Image image. The default one is like shown below.

Leave comments if you have to customize more or if you have any doubts.

Jayadeep K M

Hi. I'm a hacker, web developer and programmer, Inspired to find loopholes, fix broken things and make things work better.

  • Image
  • Image
  • Image
  • Image
  • Image