Add Moving Clouds In Your Blogger Background Powered By JQuery
> Login to your blogger account.
> Now, go to Template > Edit HTML.
> Now, search for the body{ OR body { in your template code. It may looke something like:
body { background: #ddd; color: #333; font: 12px/20px Arial, Helvetica, Sans-serif; }
> Now, replace the background with the following code:
background:#c1deee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9S27zfsi_qdR3h7B-mc3pqgLZw7pOKQmoJAr7GyuzfpkbYeRZ1DIixuXpN6BN8wpmWMRHD_PhgZhuj0JmzK4j0VvvChyvmj0gl59tSKBnmXljF5va3vEA43A2zd-htpzRrt1zhU0GGBE/s1600/JD8mWs7.png) repeat-x scroll top left;
> Now, you are done with applying the background image in your blog. Let's add the motion effect in it using the JQuery code. Search for the </head> tag in your blog and then add the following code just 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 you are done with the coding. Just SAVE THE TEMPLATE and then open your blog to see the effect. To change the motion speed, you can change the red numbers of the code.
CLICK HERE TO SEE DEMO Keep visiting for more tips and tricks. Subscribe to my posts using the subscription form below.
0 comments:
Post a Comment