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

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.
Open Comment Box

Contact Form

Name

Email *

Message *