Blogger Stylish Hover Effect Thumbnails Only Related Posts

Posted : Wednesday, March 02, 2011 | Post Author : Paul Crowe | 26 comments

Blogger Related Posts GadgetBack in December i published a post showing you a great Related Posts with thumbnails gadget.That gadget displayed a selected number of related posts generated using labels, the posts are displayed using a thumbnail with the title of the post below.That post has been one of the most popular on Spice Up Your Blog over the last few months and today i have another Related Posts With Thumbnails Gadget but with a very cool feature.

I found this gadget in a template i published on my Templates Blog BestBloggerTemplates.Net and knew it would be popular.This Related Posts gadget does not display the title of the post below the Thumbnail but rather has a Hover Effect to display the post title.So below your posts will be just the thumbnails but when you hover your cursor over them the thumbnail is replaced by the title.

Hmmm not easy to explain in text so take a look at the screenshots and live demo below.

Screenshot – Normal :

Screenshot Hover – You can see the title displayed when the cursor is hovered :

Live Demo – I’m using this gadget on my Social Icon Site (Scroll To End Of Any Post)

Add Related Posts Gadget To Your Blog

Step 1. In your Blogger dashboard click Design > Edit Html > Tick the Expand Widget templates box.

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – More Info)


Step 3. Copy and paste the following code Directly Above / Before ]]></b:skin>

<!–start related posts css Info :–>

font-family:”Droid Sans”,Helvetica,Arial,sans-serif;
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;
*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;
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 :–>

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – More Info)

<div class=’post-footer’>

Step 5. Copy and paste the following code Directly Below / Under <div class=’post-footer’>

<!–start related posts code Info :–>

<b:if cond=’data:blog.pageType == “item”‘>

<h3>Related Posts</h3>
<script type=’text/javascript’>
var defaultnoimage=””;
var maxresults=6;
<script src=’’ type=’text/javascript’/>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast != “true”‘>
<script expr:src='”/feeds/posts/default/-/” + + “?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6″‘ type=’text/javascript’/>

<script type=’text/javascript’>


<div style=’clear:both’/>
<a href=’’><img alt=’Best Blogger Tips’ src=’’/></a>
<!–end related posts code Info :–>

Optional Changes

-You can change the title above the gadget from Related Posts (In Blue Above).

-You can change the number of posts displayed from 6 (In Red Above)

-The Gadget is set to only display on the post pages, if you want it displayd on the home page also remove the code highlighted in Green above.

Step 6. Save your template.

Check out more of our Blog Gadgets and Featured Posts.

That’s your Hover Effect Related Posts With Thumbnails, i would like to give credit to BloggerPlugins for the original script and BloggerzBible created the template in which i found the gadget along with making some changes to the original.

Drop Your Comments, Views And Questions Below.


  1. Nice Thanks For Sharing


  2. Hello,
    Plz give us some more information, but yes your blog is very informative.


  3. its not working giving errors ihave tried it 4 time exactly what u have described but still errors are there…!!!check it plzzz


  4. @ hippa – I added the code 2 days ago to our templates site Best Blogger Templates and it worked perfect.You must be going wrong somewhere I’m when adding the code afraid..


  5. LovefortechnologyMay 6, 2011 at 8:21 PM

    I did exactly what you say but when I go to save gives MESSAGE Could not parse your template because they are not properly formatted. Make sure all XML elements are closed properly.
    error message XML: The string “-” is not permitted within comments.
    any idea?


  6. @ Loverforte.. – I took a look at the code and there may have been something that affected some templates.Try it again and let me know.


  7. LovefortechnologyMay 6, 2011 at 11:29 PM

    Paul thank you now works perfectly


  8. This comment has been removed by the author.


  9. chatpat indian recipesJune 18, 2011 at 2:15 PM

    This is cool .. works for me … can you please tell me how to add borders as it is in the demo you provided ?


  10. Original HD WallpapersJune 18, 2011 at 2:53 PM

    Can this gadget affect my image index in google ? becouse i have it on my blog and no image is indexed by google ! can you please look over my site ?

    Site :
    Thanx a lot


  11. @ Original HD – I cant see why this would effect the image in a post being indexed, i know as a wallpaper site this in important.So if you have any doubts maybe this is not the gadget for you.


  12. hello.I have done exactly you told and the heading of related posts is coming on my every post but below there are no posts shown.Why is it so? What to do so that my posts will show? plz advice. my site


  13. i want to be able to extend the number to 10 , is it possible ?


  14. @ Spurs – In the code for step 5 you can change the max-results to 10.


  15. Ty Paul , your widgets are great , i use some of them on my projects , keep up the excelent job !


  16. What happens? The script is unreachable, could you please allow me to download the script?


  17. @ All – I’m having some trouble with scripts hosted on Google code.You will need to replace this URL in step 5 –’ type=’text/javascript

    With this –


  18. Hi thanks for the hack
    i have a question, my posts have more then a pic but this hack is showing the second one or the smallest one
    How can i make it show the first one (the principal one) see an example

    Answer me plz..


  19. It didnt work for my blog, and I followed all directions exactly. Would appreciate assistance. Pretty bummed its not working for me 🙁


  20. How can I remove it?


  21. Hi.
    How do i change the thumbnail size?


  22. Dear Paul
    how many posts we can display maximum ?


  23. Thank you very much!


  24. Very cool. Can’t wait to try it.


  25. Below mentioned both codes are not working ( 403 )’ type=’text/javascript

    With this –

    Can you update with the latest one link?