Add Related Posts With Thumbnails Widget With Hover Effects To Blogger

This tutorial will show you How To Add Related Posts With Thumbnails Widget With Hover Effects To Blogger. Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

Related Posts With Thumbnails Widget Demo

Live Demo

How To Add Related Posts With Thumbnails Widget To Blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

</head>

• Now replace it with the code shown below

<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 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#related-posts img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYIkepgbaxKD5WQdoDdZi-N1j7hGTOmYIsegZ7J7zL3_CMPK9-x03eKOsCiPOPVjh8GBsuZEbzKVU9naRuf2TxtqUluTnvS3ULzNrkZCsUbowILkXf-kZFqRmtjtN0Io3cHR4cPpO-cCA/s1600/noimage.png";
var maxresults=7;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://latest-hacks.googlecode.com/svn/abcd.js' type='text/javascript'/>
</b:if>
</head>

• Now find the code shown below using Ctrl + F

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

• Now replace it with the code shown below

<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'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://latesthack.com'><img alt='Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GS-w6nGq3L3bRZ3cu4Drw7yo8Eci8jo_6TiAey-LqnPL-6ne-KXJQnAy_tz7ewwlsiFH2Q_aVdFGiFTNdn52CX0L6yyYv9UWy6K5_LazgrJjb-32k65XP8dcJBfoB06S04qGK3s_3pM/s1600/best%252Bblogger%252Btips.png'/></a>
</b:if></b:if>

• Now save your template
• Change maxresults=7 in red above to the number of posts you want displayed

Like it? Share it.