Cara Membuat Background Blog Bisa Bergerak

Pernah melihat blog yang backgroundnya bisa bergerak ? pasti keren kan dilihat,Nah kalian sebenarnya juga bisa membuat yang seperti itu juga,karena cara membuatnya nggak susah kok,cuma menggunakan J-Query untuk membuat background blognya bisa bergerak.Arah gerakannya bisa berupa gerakan vertikal ataupun horizontal.Tertarik mencoba ? Ini dia caranya,lets cekidot :

Cara Pemasangan 


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();

});

//]]>

</script>

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(https://lh4.googleusercontent.com/-dQkfB1XjogQ/TtjaZFg_FNI/AAAAAAAAAkY/27E-kzfkkvc/s800/bg-clouds.jpg) repeat center; background-attachment: fixed;

}

</style>

Nb : Ganti Url berwarna merah sesuai keinginan,sesuaikan dengan ukuran gambar