Blogger Stylish Hover Effect Thumbnails Only Related Posts


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 == &quot;item&quot;'>
<h3>Related Posts</h3>
<script type='text/javascript'>
var defaultnoimage=&quot;;;
var maxresults=6;
<script src='' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' 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.

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.


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

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

  3. @ 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..

  4. 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?

  5. @ 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.

  6. Paul thank you now works perfectly

  7. This comment has been removed by the author.

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

  9. 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

  10. @ 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.

  11. 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

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

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

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

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

  16. @ 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 -

  17. 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..

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

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

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

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

    With this -

    Can you update with the latest one link?


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us