Wednesday, 22 August 2012

Now Add Cool jQuery Scroll Background in your blogspot blog.

Now add cool jQuery scroll background effect in your blogspot blog with simple and easy step.

Follow simple step to adding this effect in your blogger now--------->>>>>>

* First go to your blogger Dashboard.


* Now click in design tab and edit HTML.


* Click in small box to expand your blogger template easily.


* Find this code
</head> with CTRL+F key easily.

* Copy below code and paste before
</head>
<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 pixels
var backgroundheight = 4000;

// get the current minute/hour of the day
var 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 are
var offset = backgroundheight / 100 * percentofday;

// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset - (backgroundheight / 1);

function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// apply the background position
$('body').css("background-position", "50% " + offset + "px");
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 70
);
}

// Start the animation
scrollbackground();
});
//]]>
</script>

* Now scroll down to where you see this code:below code>>>>
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

* Replace above code with below code>>>>
body {
background:url(http://santabanta.mywapblog.com/files/blogger9scroll.png);
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


* Now save your blogger template and enjoy with blogging.

1 comment:

cgi backgrounds said...

oh great I was looking for this only.This would now solve my prob and help my website look more attractive.