How To Add Cool jQuery Scroll Background to Blogger


How To Add Cool jQuery Scroll Background to Blogger
DEMO
1.Login to your blogger dashboard--> Desing- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> 
tag .


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[$(function(){
// ***// Scrolling background// ***
// height of background image in pixelsvar backgroundheight = 4000;
// get the current minute/hour of the dayvar now = new Date();var hour = now.getHours();var minute = now.getMinutes();
// work out how far through the day we are as a percentage - e.g. 6pm = 75%var hourpercent = hour / 24 * 100;var minutepercent = minute / 30 / 24 * 100;var percentofday = Math.round(hourpercent + minutepercent);
// calculate which pixel row to start graphic from based on how far through the day we arevar offset = backgroundheight / 100 * percentofday;
// graphic starts at approx 6am, so adjust offset by 1/4var offset = offset - (backgroundheight / 1);
function scrollbackground() {// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;// apply the background position$('body').css("background-position", "50% " + offset + "px");// call self to continue animationsetTimeout(function() {scrollbackground();}, 70);}
// Start the animationscrollbackground();});//]]></script>

4.Now scroll down to where you see this code:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

5.Replace above code with below code:

body {
background:url(https://lh5.googleusercontent.com/_u4rBCfM4eII/TZq0p6PzJkI/AAAAAAAABh0/B6fKvAeegno/s512/bgscroll.png);
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

 6.Now Click on save template you are done.

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | coupon codes