How to add Image link Overlay on Popular Post widget?

How to add Image link Overlay on Popular Post widget easily


The concept of image overlay is known to all. When you mouse over on an blogger image then another small arrow or search or some symbolic icon will display on image. This is pretty cool option and make your blog little attractive. Many Blogger template designer use this feature to bring some variation in their blogger Popular post images. I will add Image opacity feature on popular post's image to make the link overly more visible.

So before proceed first of all we have to add a Popular post widget. You can easily add popular post widget by following below steps-

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "Popular Posts" Widget.

popular post

Step 4 Change title if you wish and select image thumbnail and snippet. After that you can choose how 

many post you would like to display on your popular post from drop down option. Select 5,7 or 10 

whatever you would like. Now Save the  "Popular Posts" Gadget.

widget configure

Step 5 Go to ->Template ->Edit HTML and Find ]]></b:skin> by pressing Ctrl+F 

Step 6
 Now Paste the below code  Before/above ]]></b:skin> 

.PopularPosts img:hover,.PopularPosts .item-thumbnail img:hover{-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4}
.PopularPosts .item-thumbnail a{background-image:url(;background-repeat:no-repeat;background-position:50% 50%;display:block}

Step 7 Finally hit the Save template button and see the effect on your blog.

image Overlay

if you have properly followed the tutorial then Image link overlay will work perfectly. This feature only work when you mouse over on images. Remember that if you manually increase the popular post's image resolution then this trick may not work. So use this trick on actual Popular post's image resolution. If you like my tutorial then kindly join us on our official Facebook Fan page. Thank you. 

Post a Comment

Hello I want the same, but this add images post

Yes this will add overlay image on Popular post. For adding overly effect on Blog post image you can modify the script. Because different template has different types of code. So it is complicated to define same code for all template. :(

Thank you, but how can you help me

I use the Blogger Default Template

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *