In this post i am gonna explain how to add awesome jquery rotate effect for images. For this post iam using CSS with jquery. You can use this effect on side bar with any image size. its easy to add to blogger. I think i don't need to explain more. just check the demo link below.
How to Add this Widget to Blogger ?
- Now go to Blogger Dashboard > Layout
- Click on Add a Gadget (below header)
- Select HTML/JavaScript
- Copy below code and paste inside it.
<script> $(function() { var tot = $(".img_c").length; var stat = deg = 10; var rotate = ""; var frame, mozframe, webkitframe; $("img").each(function(index) { $(this).css({ "transform": "rotate("+deg+"deg)", "-moz-transform": "rotate("+deg+"deg)", "-webkit-transform": "rotate("+deg+"deg)", "-o-transform": "rotate("+deg+"deg)" });
rotate = "100% {" + "transform: rotate(360deg);" + "-moz-transform: rotate(360deg);" + "-webkit-transform: rotate(360deg);" + "-o-transform: rotate(360deg);" + "} ";
var imgclass = parseInt(index+1); frame = " @keyframe anim" + imgclass + " { " + rotate + "}"; mozframe = " @-moz-keyframes anim" + imgclass + " { " + rotate + "}"; webkitframe = " @-webkit-keyframes anim" + imgclass + " { " + rotate + "}"; $('<style> '+ frame + mozframe + webkitframe + ' .img'+imgclass+' { animation: anim'+imgclass+' 3s ease 0s infinite alternate;' + '-moz-animation: anim'+imgclass+' 3s ease 0s infinite alternate;' + '-webkit-animation: anim'+imgclass+' 3s ease 0s infinite alternate; }' +'</style>').appendTo('head');
deg = deg + stat; }); }); </script> <style> body { background: #fff url('wood_pattern.png') repeat top right; } .content { margin: 0 auto; padding: 100px; } img { margin: 10px; padding: 20px; background: #fff; -moz-box-shadow: 0px 0px 3px #d3d3d3; -webkit-box-shadow: 0px 0px 3px #d3d3d3; box-shadow: 0px 0px 3px #000000; position: absolute; } </style>
<br /><div class="content"><div class="img_c"><img class="img1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhABiBvP1Kz1TbQwY74BAKQYNhFEH9-_pFKqZuKEwhToiJGoxgkv4vU6fWQWh4D-w5YexZuHp9XEEoSoiqJWu1i30GFtZZaOf2KdMCqjDjkgLgKuUbHCQYTJnzt11mPjdlD-PArHrC0NXk/s1600/nature.jpg" /></div><div class="img_c"><img class="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhABiBvP1Kz1TbQwY74BAKQYNhFEH9-_pFKqZuKEwhToiJGoxgkv4vU6fWQWh4D-w5YexZuHp9XEEoSoiqJWu1i30GFtZZaOf2KdMCqjDjkgLgKuUbHCQYTJnzt11mPjdlD-PArHrC0NXk/s1600/nature.jpg" /></div><div class="img_c"><img class="img3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhABiBvP1Kz1TbQwY74BAKQYNhFEH9-_pFKqZuKEwhToiJGoxgkv4vU6fWQWh4D-w5YexZuHp9XEEoSoiqJWu1i30GFtZZaOf2KdMCqjDjkgLgKuUbHCQYTJnzt11mPjdlD-PArHrC0NXk/s1600/nature.jpg" /></div><div class="img_c"><img class="img4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhABiBvP1Kz1TbQwY74BAKQYNhFEH9-_pFKqZuKEwhToiJGoxgkv4vU6fWQWh4D-w5YexZuHp9XEEoSoiqJWu1i30GFtZZaOf2KdMCqjDjkgLgKuUbHCQYTJnzt11mPjdlD-PArHrC0NXk/s1600/nature.jpg" /></div><div class="img_c"><img class="img5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhABiBvP1Kz1TbQwY74BAKQYNhFEH9-_pFKqZuKEwhToiJGoxgkv4vU6fWQWh4D-w5YexZuHp9XEEoSoiqJWu1i30GFtZZaOf2KdMCqjDjkgLgKuUbHCQYTJnzt11mPjdlD-PArHrC0NXk/s1600/nature.jpg" /></div><div class="img_c"><img class="img6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhABiBvP1Kz1TbQwY74BAKQYNhFEH9-_pFKqZuKEwhToiJGoxgkv4vU6fWQWh4D-w5YexZuHp9XEEoSoiqJWu1i30GFtZZaOf2KdMCqjDjkgLgKuUbHCQYTJnzt11mPjdlD-PArHrC0NXk/s1600/nature.jpg" /></div><div class="img_c"><img class="img7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhABiBvP1Kz1TbQwY74BAKQYNhFEH9-_pFKqZuKEwhToiJGoxgkv4vU6fWQWh4D-w5YexZuHp9XEEoSoiqJWu1i30GFtZZaOf2KdMCqjDjkgLgKuUbHCQYTJnzt11mPjdlD-PArHrC0NXk/s1600/nature.jpg" /></div><div class="img_c"><img class="img8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhABiBvP1Kz1TbQwY74BAKQYNhFEH9-_pFKqZuKEwhToiJGoxgkv4vU6fWQWh4D-w5YexZuHp9XEEoSoiqJWu1i30GFtZZaOf2KdMCqjDjkgLgKuUbHCQYTJnzt11mPjdlD-PArHrC0NXk/s1600/nature.jpg" /></div><div class="img_c"><img class="img9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhABiBvP1Kz1TbQwY74BAKQYNhFEH9-_pFKqZuKEwhToiJGoxgkv4vU6fWQWh4D-w5YexZuHp9XEEoSoiqJWu1i30GFtZZaOf2KdMCqjDjkgLgKuUbHCQYTJnzt11mPjdlD-PArHrC0NXk/s1600/nature.jpg" /></div><div class="img_c"><img class="img10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhABiBvP1Kz1TbQwY74BAKQYNhFEH9-_pFKqZuKEwhToiJGoxgkv4vU6fWQWh4D-w5YexZuHp9XEEoSoiqJWu1i30GFtZZaOf2KdMCqjDjkgLgKuUbHCQYTJnzt11mPjdlD-PArHrC0NXk/s1600/nature.jpg" /></div></div>
- Replace red highlighted link with your image URL
And Save it.
I hope you like this beautiful widget for blogger, If you still have any problem please share it by using a comment, Thanks.
0 comments:
Post a Comment