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 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.
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.
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>
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/AVvXsEjQGpi8aiOpGuz7HvNKY_JcU6nJtfaYe_50FIJtKnV8S9Xv3Hb6Fy136ByjeUwfsMD9320aLDvb08884PY-pC2PiwOjVWFM4T3xskAZ6PvHx9SLL4Lum40xbnKXsJMyxkhXkhKVz27TjTR0/s1600/BloggerSpice+link-overlay.png);background-repeat:no-repeat;background-position:50% 50%;display:block}
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.
No comments:
Post a Comment