By : 
By adding these effects can impress more readers that can results in more web traffic to your blog. If you like to attract more visitors to your blog then you should add this image effect on your blog. You might be wondering how to add this rotating effects on your blog? But add this effect on your blog is so simple. Once you add some required scripts to your blog template then all the images will be enabled with this cool rotating effect. Even you can add this effect for selected images too. Let’s check it how to add Mouse Hover Rotating Effect To Images In Blogger…
Add Spinning Effect To Blogger Images
Step 1: Go to Blogger >> Template >> Edit HTML.
Step 2: Then find ]]></b:skin> tag in blog template and paste the following script just above/before it,
.rotate img { -moz-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .rotate img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
Step 3: Now Save your template and go to Post Editor for adding Image class. It can be navigated as Blogger Post Editor >> HTML section. Then just add the below code there,
<div class=”rotate”> <img src=”image-url”/> </div>
Step 4: Now replace the “image-url” with your image URL which you like to rotate. Note that for rotating all your blog images then you need to add image class for all those images. Then publish your post you can see the effect only in your blog, but not inside the Post editor. So to see the Rotating effect inside the Post Editor just add this below code in HTML section of Post Editor,
<style> .rotate img { -moz-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .rotate img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);} </style> <a class=”rotate” href=”image-url”><img src=”image-url”/></a>
Step 5: Now replace the “image-url” with your own Image link. That’s it!
Hope you guys enjoyed this section! Do you like this trick which you added to your blog images? Then do likes and share this article with your friends via social networking sites and make us grow! If you’re facing any problems then drop them in comments below. Happy Blogging;)
