WELCOME TO BHATI TRICKS WRITE FOR US ADVERTISE YOUR BLOG/SITE HERE POST YOUR ARTICLE/TRICK HERE



Thursday 25 July 2013

ADD JQUERY SCROLL BACKGROUND TO BLOGGER


add-jquery-scroll-background-to-blogger
ADD JQUERY SCROLL BACKGROUND TO BLOGGER
IN THIS TUTORIAL I WILL TELL YOU THAT HOW CAN YOU INSERT A SCROLL BACKGROUND TO BLOGGER. TO INSERT JQUERY SCROLL BACKGROUND , FOLLOW THE STEPS:-
1.Login to your blogger dashboard--> layout- -> 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 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>
4.Now scroll down to where you see like this code:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Note:above code can be different in your template.But important part is body { .

5.Replace above code with below code:
body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOfccoC5Nj-AcekfSkpL1_b6e-e9MgNwGJTS0IS0V1TiE-c4WNrSkNnD5pfYvmzNSK-08V9jAb1wyTuyZsS_VwZhLmOAZyVLxja6hbjYFWa9yfgmfXel0-cCDWkeY5PvhbfnDpWxjY7P41/);
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Note: You can use any suitable image instead of above image.

6.Click on save template and you are done.


Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter

0 comments:

Post a Comment

 

ABOUT THE AUTHOR

Founder & Author:I ABHISHEK BHATI student of COMPUTER SCIENCE by education a Blogger by profession. Exploring Technology is my passion.BHATI TRICKS is place for Tech Lovers. ABHISHEK BHATI launched his frist Marketing Site in 2013.
...Read More

GET FREE EMAIL UPDATES

Join us for free and get valuable content delivered right in your inbox.



recent comments

BHATI TRICKS Widget

| BHATI TRICKS © BHATI TRICKS. All Rights Reserved | | Back To Top |