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

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.


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

Post a Comment

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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


Email *

Message *