As you can see in the image above the widget provides a gallery view of posts related through labels. On hovering the mouse on the image the title of that post appears
Installation
1. Go to the template code and check the box “Expand Widget template”. Find (Ctrl+F) code ]]></b:skin>. Now paste this code above it./* Related Posts Widget
----------------------------------------------- */
ul#related-posts{
font-family:Helvetica,Arial,sans-serif !important;
font-size:10px !important;
list-style: none !important;
margin: 20px 0 !important;
padding: 0 !important;
text-transform: none !important;
}
ul#related-posts li{
float: left !important;
height: auto !important;
margin:0 15px !important;
padding: 2px 1px 4px !important;
}
*html ul#related-posts li{
margin:0 13px !important;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
border: 2px solid #FFFFFF !important;
display: block !important;
height: 72px !important;
position: relative !important;
width: 72px !important;
}
ul#related-posts li a {
color: #474C51 !important;
text-decoration: none !important;
text-shadow: 0 1px 0 #FFFFFF !important;
}
ul#related-posts li .overlay {
height: 66px !important;
line-height: 14px !important;
padding:6px 0 0 6px !important;
position: absolute !important;
width: 66px !important;
z-index: 10 !important;
}
ul#related-posts li a:hover .overlay {
background: #fff !important;
display: block !important;
opacity:0.9 !important;
}
ul#related-posts li img {
bottom: 0 !important;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
2. Now find this code
<b:includable id='backlinks' var='post'>
and replace it with
<b:includable id='RelatedPosts' var='post'>
<!--remove--><b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijc3n5uYiwzzBveSVqYuXarfSkKl9ilVL8EbVQhX2TgChcDgs7KvADR-JE6ycU2lR1GXcGvjPFqpOWpYJYE3sybmJb3z1Y_vaRAUM5z9fUT7AA1OHLkH8mfNrqz-ek4Xxjzx2L70R5budX/";
var maxresults=6;
</script>
<script src='http://f.cl.ly/items/0w31321a473E2G0m3S2U/related_post_with_hover.js' type='text/javascript'/>
<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>
</b:if> <!--remove-->
<div style='clear:both'/>
</b:includable>
<b:includable id='backlinks' var='post'>
This widget is customized to show 6 related posts and appears only on the post page.To change these customization see the instructions at the bottom of this post.
3. Now the last step, find any one of these four codes
<div class='post-footer'> ORand place this code just after any one of the above four codes
<div class='post-footer-line post-footer-line-1'>
OR
<div class='post-footer-line post-footer-line-2'>
OR
<div class='post-footer-line post-footer-line-3'>
<b:include data='post' name='RelatedPosts'/>
Customizations
1. How to display the related posts on every page and not only on the post pages ?Just remove the two lines starting with <!-- remove --> from Step 2. These line are
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
and
<!-- remove --></b:if>
2. How to change the number of posts to be displayed in the widget?
You can adjust the maximum number of related posts being displayed by editing this line in the Step 2 code.
var maxresults=5;
3. To change the default thumbnail image, you can edit this line of code in Step 2
defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijc3n5uYiwzzBveSVqYuXarfSkKl9ilVL8EbVQhX2TgChcDgs7KvADR-JE6ycU2lR1GXcGvjPFqpOWpYJYE3sybmJb3z1Y_vaRAUM5z9fUT7AA1OHLkH8mfNrqz-ek4Xxjzx2L70R5budX/";
In blog