We compare everything with its competitors as jQuery is similarly compared with Flash. But Flash's trend is over now, its the turn of jQuery to add the special effects or interactivity to a website or blog. Also jQuery takes a lead when it comes to SEO. In this tutorial I'm going to share how to add awesome jQuery rotate effect for your blogger blog images. I made this beautiful effect with the help of CSS & jQuery. You can use this effect in your blog posts or side bar. It is very easy process. See live demo first below and then follow the given steps.
You May Like To Read:
- How To Add JQuery Tooltip To Blogger Blog
- Add Slide Out Social Bookmarking Gadget With JQuery For Blogger
How To Add Advanced jQuery Rotate Effect To Blogger Blog
- Go To Blogger Dashboard >> Template >> Edit HTML
- Press Ctrl+F and Search <head> Code
- Now Paste Below Script Code After <head> and Save Your Template.
Note: If above script code already added in your blog then no need to add it again. Now follow next steps:<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
- Go To Blogger Dashboard >> Layout >> Add Gadget >> HTML/Javascript
- Paste Below Code In HTML/Javascript
<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/AVvXsEgsahoBYeOFmkKMsH9AqCedCsKx7BCY_HteXpvhSUVlacPFa0yGiMvqqOrAXfOMdVL0Y-GRQH80hl-Hj0Bc6MDwpoGAdV8PYI4j5mQNJf-7zI0PPSMa_yS08uWVyHY0uPP9nv0ztcztXgA9/s1600/Gagan+Masoun+Picture.jpg" /></div><div class="img_c"><img class="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsahoBYeOFmkKMsH9AqCedCsKx7BCY_HteXpvhSUVlacPFa0yGiMvqqOrAXfOMdVL0Y-GRQH80hl-Hj0Bc6MDwpoGAdV8PYI4j5mQNJf-7zI0PPSMa_yS08uWVyHY0uPP9nv0ztcztXgA9/s1600/Gagan+Masoun+Picture.jpg" /></div><div class="img_c"><img class="img3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsahoBYeOFmkKMsH9AqCedCsKx7BCY_HteXpvhSUVlacPFa0yGiMvqqOrAXfOMdVL0Y-GRQH80hl-Hj0Bc6MDwpoGAdV8PYI4j5mQNJf-7zI0PPSMa_yS08uWVyHY0uPP9nv0ztcztXgA9/s1600/Gagan+Masoun+Picture.jpg" /></div><div class="img_c"><img class="img4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsahoBYeOFmkKMsH9AqCedCsKx7BCY_HteXpvhSUVlacPFa0yGiMvqqOrAXfOMdVL0Y-GRQH80hl-Hj0Bc6MDwpoGAdV8PYI4j5mQNJf-7zI0PPSMa_yS08uWVyHY0uPP9nv0ztcztXgA9/s1600/Gagan+Masoun+Picture.jpg" /></div><div class="img_c"><img class="img5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsahoBYeOFmkKMsH9AqCedCsKx7BCY_HteXpvhSUVlacPFa0yGiMvqqOrAXfOMdVL0Y-GRQH80hl-Hj0Bc6MDwpoGAdV8PYI4j5mQNJf-7zI0PPSMa_yS08uWVyHY0uPP9nv0ztcztXgA9/s1600/Gagan+Masoun+Picture.jpg" /></div><div class="img_c"><img class="img6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsahoBYeOFmkKMsH9AqCedCsKx7BCY_HteXpvhSUVlacPFa0yGiMvqqOrAXfOMdVL0Y-GRQH80hl-Hj0Bc6MDwpoGAdV8PYI4j5mQNJf-7zI0PPSMa_yS08uWVyHY0uPP9nv0ztcztXgA9/s1600/Gagan+Masoun+Picture.jpg" /></div><div class="img_c"><img class="img7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsahoBYeOFmkKMsH9AqCedCsKx7BCY_HteXpvhSUVlacPFa0yGiMvqqOrAXfOMdVL0Y-GRQH80hl-Hj0Bc6MDwpoGAdV8PYI4j5mQNJf-7zI0PPSMa_yS08uWVyHY0uPP9nv0ztcztXgA9/s1600/Gagan+Masoun+Picture.jpg" /></div><div class="img_c"><img class="img8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsahoBYeOFmkKMsH9AqCedCsKx7BCY_HteXpvhSUVlacPFa0yGiMvqqOrAXfOMdVL0Y-GRQH80hl-Hj0Bc6MDwpoGAdV8PYI4j5mQNJf-7zI0PPSMa_yS08uWVyHY0uPP9nv0ztcztXgA9/s1600/Gagan+Masoun+Picture.jpg" /></div><div class="img_c"><img class="img9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsahoBYeOFmkKMsH9AqCedCsKx7BCY_HteXpvhSUVlacPFa0yGiMvqqOrAXfOMdVL0Y-GRQH80hl-Hj0Bc6MDwpoGAdV8PYI4j5mQNJf-7zI0PPSMa_yS08uWVyHY0uPP9nv0ztcztXgA9/s1600/Gagan+Masoun+Picture.jpg" /></div><div class="img_c"><img class="img10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsahoBYeOFmkKMsH9AqCedCsKx7BCY_HteXpvhSUVlacPFa0yGiMvqqOrAXfOMdVL0Y-GRQH80hl-Hj0Bc6MDwpoGAdV8PYI4j5mQNJf-7zI0PPSMa_yS08uWVyHY0uPP9nv0ztcztXgA9/s1600/Gagan+Masoun+Picture.jpg" /></div></div>
Remember Notes: Change Yellow Highlighted Image Links With Yours.
- Now Save Your Blog Gadget and Its All Done.
I am sure your blog readers will like this new change in your blog. I will post more fantastic CSS and jQuery tips and tricks soon. So, keep in touch with us. Stay Blessed and Happy Blogging. :)
Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.
hey
ReplyDeleteon your website footer how did you add recently viewd posts? and also is there a html code for popular post because blogger popular post u can only use once how did you put them twice on the footer section
thanks
Hello Kawsar, I'm using 2 widgets: random post widget and popular post widget. I'll share code soon for random posts. Keep in touch :)
Delete