I'm making this post with reference and credit to the Blog DragonMaster.
You can read her post about this here :: http://areyouadragonmaster.blogspot.com/2014/08/tutorial-rotating-images.html
_________________________________________________________________________________
First what your going to do, is get a picture URL. You will want to upload it somewhere on your blog first, and then get the URL from it. After you've gotten the URL address, paste it into a word document or NotePad.
Then, your going to want to open up you blogger, go to template, then click Customize.
After you've clicked Customize, you go to Advanced into the CSS editing.
After you get to your CSS, paste this coding into 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);
}
After you've done that, save it, and go make an HTML Widget.
And once you've made the HTLM widget, insert this code ::
<div class="rotate">
<img src="image_url"/>
</div>
And now, in the HTML Code, where it says <img src="image_url"/> , change the image_url to the picture URL that you pasted into a notepad/word document.
Then, just save it.
Then, go ahead to your blog and test it out! If you wanna see it working, I have a picture of a butterfly on the side of my blog that spins when you put your mouse over it.
Well, that's about it! Hope you enjoyed this post!
WhiteRabbit
0 comments