Home
Blogger

How to add Image link Overlay on Popular Post widget?

How to add Image link Overlay on Popular Post widget easily
Tricks

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-KASaXdTQhNh7czX19FVC17UfIqO2lFnzoz_4IXwKE3R6_rzqCNcY-rQBJ5wei2p_Cc8d1htjfazTVj-5tefErn3jlDgiAHfLcB5-t346X1omrwn26oXMKNEQjxzbHps6Ie2mlFEATJHm/s1600/BloggerSpice+link-overlay.png);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. 

4 comments

  1. 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. :(
  2. Thank you, but how can you help me
  3. I use the Blogger Default Template
Go Up