How To Add Circle Hover Effect To Posts In Blogger

By
Advertisement


This Tutorial will monetize your post images with circle hover effect . There are many circle effect in blogger but this effect bring neat and elegant look and also doesn't effect your page loading time . If you move your mouse on image it will give circle hover effect . This effect will work on post images as well as in homepage also . It doesn't effect any images in blogger unless homepage and post images .

After Applying Code In your Template : 



Steps To Add Circle Hover Effect In Blogger : 

#1. Go to Blogger Dashboard .
#2. Now click on Template and Click on Edit HTML .
#3. Now Find This Code  ]]></b:skin> by using CTRL+F .


Java Script : 

/*customized by www.bloggerslab.in */
.post img:hover{background:#FEFEFE;border:1px solid #FEFEFE;border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;-moz-transition:all 1.2s ease-in-out;transition:all 1.2s ease-in-out;-webkit-transition:all 1.2s ease-in-out;}

#4. Now paste the above code Before or above of ]]></b:skin> 

 Now click on Save Template .


Don't Forgot to share our article - " Sharing Is Caring "

If you have any suggestions or querie related please feel free to contact us or comment in below section .

0 comments:

Post a Comment