ADD HOVERING STYLE RELATED POST OPTION ON BLOGGER

You will be amazed after seeing this post, as our team had introduced hovering effect related post thumbnail gadget. This gadget display's the selective number of post's below all your post's, the post are displayed with the help of thumbnail and display's the title below when hovered over. It can help your visitor's to access the post easily. Isn't that cool, This post is counted in one of the best post on PC TECH.

ADD HOVERING EFFECT RELATED POST GADGET

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Check 'Expand Widget Templates' option.

4). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

]]></b:skin>

NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE

5). Copy and Paste the following code just above the code you have searched.

<!--start related posts css Info : http://www.pcleaks.blogspot.com-->

ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}<!--end related posts css.Info : http://www.pcleaks.blogspot.com-->

6). Find the following piece of code in your blog HTML code. 

<div class='post-footer'>

7). Copy and Paste the following code directly below the code <div class='post-footer'>

<!--start related posts code Info : http://www.pcleaks.blogspot.com-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<h3>Related Posts</h3>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqleItLc0GJKthGhCrD3q0H7Npf0kVdDx85WCXRT1Xk89famxMYxSNorAy_ZvPUnscjL56eRAxsZkEk_bNBgyVlalAPk3usv2JrfBxUf9tKZe1cFUn9GHjBeSjAANVujIY6gz1th5wVn8/s1600/no-image.gif&quot;;
var maxresults=6;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<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>

</b:if>

<div style='clear:both'/>
<br/><br/>
<!--end related posts code Info : http://www.pcleaks.blogspot.com-->

NOTE :- If you want related post option also displayed on your home page, remove the highloghted code at the top and bottom.

NOTE :- If you want to change the number of posts displayed from 6, just change the code highlighted in color.

8). The last and the most important step, Save you template.

If you got a good experience than leave comments and Email Me for any assistance.