Related Posts Widget with thumbnails for Blogger

Related Posts Widget with thumbnails for Blogger is a great hack that can increase your blogger's page per views. It is an attractive and a must have widget for blogger if you have lot of content. This widget helps your readers to go through similar posts they were reading. It also keeps you visitor's on blog for an extra amount of time

To Add Related Posts Widget with thumbnails to Blogger follow steps below:

1. Log on to blogger.com

2. Go to Design >> Edit HTML

3. Check the "Expand Widgets Templates" box.

4. Look for

</head>

5. Replace it with


<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, “Times New Roman”, 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/AVvXsEj78EJkziBe1bWl63V4ObyPfdiaZ9wi11pXBZZyhwRbdic7kPiKuw9S4dp4bml74z6JH1jX6A-uDJuoVeOnBV60iymuKys9PLtcTsD4n-B1fMdt6w-uCFRTYYhIYXJt0nbKyx8CqlW7i6s/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>

</head>

6. Next, Find any one of the following codes:

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

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

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

7. Add the code below after any one of the lines above:


<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>


8. Save your Template.

Customization

» Change the number of related post you want to appear
Find this Code and Replace the number:
var maxresults=5;

» Change Title of related posts section
Find this Code and Replace it with the title you want:
var relatedpoststitle="Related Posts";

» Default image if it post can't create thumbnail
Find this Code and Replace it with your default image:
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78EJkziBe1bWl63V4ObyPfdiaZ9wi11pXBZZyhwRbdic7kPiKuw9S4dp4bml74z6JH1jX6A-uDJuoVeOnBV60iymuKys9PLtcTsD4n-B1fMdt6w-uCFRTYYhIYXJt0nbKyx8CqlW7i6s/s400/noimage.png";

That's it for Customization:.
Leave your Comments.

credits