Translate

Monday, March 10, 2014

cara membuat background blog bergerak

Unnamed | Monday, March 10, 2014Monday, March 10, 2014 |


  • Login » blogger.
  • Rancangan » Edit HTML.
  • Apabila anda belum menggunakan kode JQuery silakan anda pasang kode JQuery dibawah ini tepat di atas Kode </Head>.
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>
  •  Copy-Paste kode di bawah ini tepat di atas Kode </Head>.
 <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();
});


  • Copy-Paste Kode CSS di bawah ini tepat di atas Kode </Head> untuk memasang gambar background. Anda dapat mengganti gambar background sesuai dengan yang anda inginkan dengan merubah alamat hosting gambar pada Kode CSS di bawah dengan alamat hosting gambar yang anda pilih.
 <style>
body {
background: black url(http://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.gif)repeat center; background-attachment: fixed;
}
</style> 


Tags:
Terimakasih atas kunjungannya :-D :-)

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

Related posts

0 comments:

Followers

SEO Reports for 8-espensabu.blogspot.com

Blog Archive

Copyright © 2014 tips and trick Blog. Bloggerized byOzynetwork converted by BloggerTheme9
Blogger template. Proudly Powered by Blogger.
back to top