Add Related Posts Widget With Thumbnail in Blogger

	Share
Tweet

Before this, HOW-TO HOUSE give you tutorial about Related Posts Widget, and this entry is about Related widget but with thumbnail. With this widget, your related posts will appear with it's thumbnail.

It look something like LinkWithin widget, see screenshot below :

Steps :

1. Go to your Dashboard > Design > Edit HTML > Check Expand Widget Templates. 

2. Find this code </head> 

3. Paste this code below, above </head> 

<b:if align='right' 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:#dddddd;
}
</style>
<script src='http://howtohouse.googlecode.com/files/relatedpostthumbs.js' type='text/javascript'/>
</b:if>

4. Then, find this code :

<data:post.body/>

or,
<div class='post-footer-line post-footer-line-1'>  
or this,  
<p class='post-footer-line post-footer-line-1'> 

5. After you found, one of the code. Paste the code below, after it :

<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=12&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=12;
var relatedpoststitle=&quot;Related Articles:&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

6. Save your template. DONE!

Customization : 

1. Adjust the maximum number of related posts being displayed. Edit the value on the code below. Change '12' to any value you desired.

var maxresults=12;

2. Edit the title of the widget by change this line of code :

var relatedpoststitle="Related Posts"

ENJOY!