Wednesday 17 July 2013

How To Add Image Rotation Or Spinning Effect To Blogger

Posted by Unknown  |  at  02:02 1 comment

This is my first post about image rotation do you know CSS code yes it is very help full or compatible  with all browser .Transformation is powerful feature of css its depend on Scaling, Translation, and Rotation.It is a pure code which is i explained today with you.I know you are thinking about demo of this code.
click below for see demo
1. Login to blogger.com.
2. Select your blog if you have many.
3. Then go to Template>>>Click on edit HTML.
4. Then search for ]]></b:skin>
5. Then copy the below code and paste it just above it and save your template.
6. Then click on save.


Remember you should always have a back up to your template.
.rotate img{
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.rotate img:hover{
-moz-transform: rotate(350deg);
-webkit-transform: rotate(350deg);
-o-transform: rotate(350deg);
-ms-transform: rotate(350deg);
transform: rotate(350deg);
}

How it will be effect in blogger post see now. You need to some changes in your post HTML.
Go to your post HTML find below code.


<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZHZiSsR8cc7TK0IVn3A4cjbJ1nOBrtpaCs40j1TFLH4TDvTYwfY7GEPQeBAsY1iIwyWBfwGux_J0uTBeKmuzK4gMNZlg3_eGNV3Y0MMXY1y77WeAlUhidwdViR5MwfgrmiITm6-FdpE/s1600/demo1.jpg" /></a></div>

Add some code before this URL with End Tags.


<div class="rotate"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZHZiSsR8cc7TK0IVn3A4cjbJ1nOBrtpaCs40j1TFLH4TDvTYwfY7GEPQeBAsY1iIwyWBfwGux_J0uTBeKmuzK4gMNZlg3_eGNV3Y0MMXY1y77WeAlUhidwdViR5MwfgrmiITm6-FdpE/s1600/demo1.jpg" /></div></a></div>


NOTE :
In the above CSS code 350 deg specifies the degree of rotation you can change this value according to your own choice.

Almost done and look you site post drag mouse over in your images and play and must share this post .

Tags:
Rashid Minhaj

Rashid Minhaj is a (B.Tech Holder in Electronics), who is working online for last 7 years, He mostly creates blogs, He is managing several blogs like BLOGGER TRICKS from home.You can add him on Facebook and also on Google+......




Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

Related posts

1 comment:

About the Author



Rashid Minhaj is a B.Tech Holder in Electronics, He loves to making Blogging and Seo who is working online for last 7 years,he mostly creates blogs, he is managing several blogs.

Protected by Copyscape DMCA Copyright Search

Comments

Blog Archive

© 2013 BLOGGER TRICKS All rights reserved
back to top