Well you might have seen this above effect in some creative blogs from Wordpress or maybe in blogger, so I was the one looking for this awesome effect from many months and I was not able to figure out how to get it on my blogger blog, but today while searching on Google I came across a website catswhocode that provided me a perfect tutorial on how you can add this same effect on any website, and guess what after tweaking some code I made this working for blogger blogs too, well obviously I have not much hard work but still its up.
So now the above image might not be clear as you see but the real effect can be seen on my website if you are not late and I have not removed it out.
So if you say something about glitches in this effect well I have not figured out an gliches and this effect is working really superb.
So now if you are indeed seeking a nice tutorial on how to add this effect to your personal or public blogger blog than you can check below easy tutorial.
- Visit Blogger > Template > Edit HTML.
- Now press
Ctrl +F and search forbody{this is the starting for body styling, now replace the background with the below code.background:#c1deee url(http://i.imgur.com/JD8mWs7.png) repeat-x scroll top left;
- Now your background is set we just need to give it some nice animated motion. Mae sure to upload image to your own server for future safety. Copy the below code and paste it above the
</head>tag.<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/><script charset='utf-8' type='text/javascript'>var scrollSpeed=70;var step=1;var current=0;var imageWidth=2247;var headerWidth=800;var restartPosition=-(imageWidth - headerWidth);function scrollBg(){current -=step;if (current==restartPosition){current=0;}$('body').css("background-position",current+"px 0");}var init=setInterval("scrollBg()", scrollSpeed)</script>
- Now if you already have that blue jQuery line installed you can remove that line and keep rest of it. You can even change the scroll speed by changing those red numbers.
- Well now the stuff is done and your background is animated, just refresh your blog and see if effect is working.
So what do you say about it, do you like this effect, well I like it a lot and I hope you even liked it too, just leave a comment if you face any problem using it, and once again thanks to the developer of this code :)
(COMMENTS WILL LOAD AUTOMATICALLY)