How To Add Colored shadow On Blog Post’s Image With Rotator Effect

How To Add Colored shadow On Blog Post’s Image With Rotator Effect

Comments: 0
data:blog.title
best blogger tricks

Rotator effects on blog posts image will add some extra spice and make your blog more attractive. You will see visitors like little animation instead of static things. Because if you found all websites are same with content then it won’t be attract all the site by visitors. Visitor always wants to find something different from others blog. But sometime due to sophisticated design a blogger become successful. So for spicing up blog I always work for it and gather knowledge and share with my visitors. Finally I got a trick that how to add a rotator effect on your blog images. This code not only give you a rotator effect but also you can give different color shadow on images. When you just mouse over on images then it will rotate 350 degree with colored shadow on images.  And I believe this trick would love your visitors. So let’s proceed to the tutorial-


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

Step 2 Click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin&gt; by pressing Ctrl+F (Windows) or CMD+F (Mac) 


Step 4 Copy the code from below and Paste it  Before/above ]]></b:skin>

.post img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px #009999;
-moz-box-shadow: 0 0 20px #009999;
box-shadow: 0 0 20px #009999;
}

Step 5 Now hit on save button.

Customization

  • Change #009999 color code with your choice. You can use Color Picker from Here.

Speak Your Mind

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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

Name

Email *

Message *