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://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.gif) repeat center; background-attachment: fixed;
}
</style>
Keterangan :
- repeat // Pengulangan gambar arah x dan y.
- repeat-x // Pengulangan gambar hanya arah horizontal.
- 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.
- Left // Lokasi gambar berada di kiri gambar.
- Right // Lokasi gambar berada di kanan gambar.

Pilihan Gambar Background

http://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/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

.:Selamat Mencoba:.

Akhirnya... setelah 4 bulan penantian PageRank saya meningkat juga

alhamdullilah... Sebagai rasa terima kasih saya terhadap sobat blogger MonozCore dan juga sobat blogger yang sedang blog addicted ataupun newbie yang pengen blog-nya tampil unik... Silakan disimak info unik blog yang satu ini...dijamin ok punya...so stay tuned at M-o-n-o-z-C-o-r-e.

Oke...postingan artikel kali ini cara pasang background The Matrix yang unik dan atraktif. Background The Matrix ini tersedia dalam berbagai image yang sudah saya persiapkan. Sobat blogger tinggal pilih imagenya kemudian tinggal pasang kode CSS-nya di blog sobat. Caranya gampang ga perlu ribet n pusing...

Sebelum sobat blogger mencoba trik kali ini ada baiknya membuat backup template blog sobat terlebih dahulu untuk menghindari hal-hal yang tidak diinginkan.

Cara Pemasangan

Login ke blog sobat.
Klik "Design" kemudian klik "Edit HTML".
Cari kode </Head> kemudian copy-paste kode CSS di bawah ini diatas </Head>.

<style type="text/css">
body{
background:url(https://lh5.googleusercontent.com/-F5UfAsRs24I/Ts0uwOoH7QI/AAAAAAAAAf4/UQXNleByOcE/s800/monozcore_blogspot_com_redmatrix.gif) repeat center center fixed black;
}
</style>
Ganti kode yang berwarna merah pada baris kode atas dengan URL gambar animasi matrix yang sobat inginkan.
Klik "Save" dan lihat hasilnya...

Animasi Gambar Matrix

0-1-1 Matrix

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP1DWvla-tMgNAfp4f9RR24Vyy-RQTVNz8xuaM4Ue9UYx9PU8UECtxuCm774-yOoVzOi9U4OaSD0GKoDqKhk8pPbrYaZ0upU8Aylwmop8fT7255T4un_uSdhtusjOQbNLHwfbGdz57p7w/s1600/0_1_1.gif
Black Red Matrix

https://lh6.googleusercontent.com/-oIKDL5K_Jus/Ts32BmE64MI/AAAAAAAAAgI/QncRScTidN8/s800/black_red_matrix.gif
Blue Matrix 1

https://lh3.googleusercontent.com/-bf_x-yTTHjQ/Ts32HIlpUJI/AAAAAAAAAgQ/WctrlVSdVXI/s800/bluematrix.gif
Blue Matrix 2

https://lh6.googleusercontent.com/-wnxb6Bv75j8/Ts32HR4rlOI/AAAAAAAAAgU/ubCAT0zE3hA/s800/bluematrix2.gif
Green Matrix

https://lh4.googleusercontent.com/-yEVdif3Bi_U/Ts32PtuIGBI/AAAAAAAAAgo/Ce1ujGXZ6RE/s800/matrix.gif
Port Listener

https://lh3.googleusercontent.com/-CYobas4WGXo/Ts32QusPKsI/AAAAAAAAAgw/xQQMNbgAa0M/s800/port_listener.gif
Red Matrix

https://lh5.googleusercontent.com/-F5UfAsRs24I/Ts0uwOoH7QI/AAAAAAAAAf4/UQXNleByOcE/s800/monozcore_blogspot_com_redmatrix.gif
Blue Matrix

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmY_sjXl4llHigmKonRkQQRzGkcBep_2xiEY0w8Pqdd4b34oEbXoRpTuxA-D8x63_I_SDvH69MUERD2XdHcojZyXsENk8GkO8wRLu5pX7VtqpusPsMbpMi2xNmX8YAjt9UDDzFsYt921k/s800/matrix.gif