Cara Membuat Background Bergerak di Blog

Info unik kali ini mengenai salah satu trik membuat gambar background blog menjadi dinamis.

Trik ini menggunakan JQuery sederhana yang dikhususkan untuk membuat gambar background

menjadi bergerak (Scrolling Background). Script ini membuat gambar background blog bergerak

secara vertikal dari arah bawah ke arah atas. Buat sobat blogger yang ingin mencobanya silakan

disimak trik membuat scrolling background berikut ini.

>> Preview Cara Membuat Background Bergerak di Blog <<

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(http://lh6.googleusercontent.com/-5pLorlV3H-

I/T4a0Sdg2iQI/AAAAAAAABi4/2EKSDnkxz9s/s800/bg.gif) repeat center;

background-attachment: fixed;

}

</style>

Keterangan :

- repeat // Pengulangan gambar arah x dan y.

o repeat-x // Pengulangan gambar hanya arah horizontal.

o repeat-y // Pengulangan gambar hanya arah vertikal.

- http://3.bp.blogspot.com/-

tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.gif // URL Link

gambar.

- center // Lokasi gambar berada di tengah layar.

o Left // Lokasi gambar berada di kiri gambar.

o Right // Lokasi gambar berada di kanan gambar.

Pilihan Gambar Background

http://lh6.googleusercontent.com/-5pLorlV3H-

I/T4a0Sdg2iQI/AAAAAAAABi4/2EKSDnkxz9s/s800/bg.gif

https://lh3.googleusercontent.com/-uJ-

Th52g6r0/TtjTcIlyYZI/AAAAAAAAAkM/4dNde9sGNKw/s800/bg_star.png

https://lh4.googleusercontent.com/-dQkfB1XjogQ/TtjaZFg_FNI/AAAAAAAAAkY/27E-

kzfkkvc/s800/bg-clouds.jpg

http://lh5.googleusercontent.com/-nx3gBAi7vr0/Tzy-csmqhCI/AAAAAAAAA-

A/TuekaM10Vjs/s800/skull-fire-monozcore.png

http://lh6.googleusercontent.com/-u6hhkovKiAg/T0fZ-

dZBX0I/AAAAAAAABLM/MomlYPHQwrQ/s800/dance_flow.png

https://lh3.googleusercontent.com/-eGOdPe7gV-g/T0fZ-hR1H-

I/AAAAAAAABLQ/LWN2smtA6cc/s800/ThighHeels.png

http://lh4.googleusercontent.com/-brpkMDLI-

Jo/T0hBjzFgHbI/AAAAAAAABLs/lmWb_OeOuwE/s800/animated%2520stars.gif

http://lh4.googleusercontent.com/-dsFg9OnYo5Q/T0hK7b0-

xoI/AAAAAAAABL4/9_CPzXBCMfw/s800/animated%2520blue%2520stars.gif

http://lh4.googleusercontent.com/-Kow92KwCv4w/T1x-

QG4nWGI/AAAAAAAABWk/wLOYXtytoV4/s800/devil_angel_lolita_bg.png