Cara Membuat Scroll Background

Setelah sekian lama absen dari dunia blogging, kali ini saya nongol lagi dengan sesuatu yang baru tapi sebenarnya masih dengan gaya lama. Kemarin sempat terjebak dengan kejenuhan dan banyaknya pekerjaan yang memenjarakan saya di suatu tempat asing. Di sana saya harus berjuang dan mau menerima apa yang saya dapatkan. Lalu mensyukurinya dengan ketulusan, karena saya sadar masih ditunjuki jalan untuk bisa bersyukur atas apa yang didapatkan. Ok langsung aja kita omongin cara membuat scroll background.

Scroll background sebenarnya hanya background bergerak naik, sehingga membuat daya tarik tersendiri bagi tampilan blog anda. Disamping itu blog juga tidak terlihat monoton dengan tampilan statis seperti biasanya. Ok langsung saja kita bahas cara membuat scroll background. Ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Cari kode body { biasanga kodenya seperti berikut

body{
color:#282828;
font-family:"Helvetica Neue",Arial,"Lucida Grande",sans-serif;
font-size:14px;
margin-top:-1px; line-height:20px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8gnxkGD25OK3ZOXbRA2W-emSjchfAaVtR3Y4o0Knibr_13YWr28MmOCZIC0r2COzCALjQCKu2MQjP_DRfCCZZ_SfyzA2YpNFdMHq0KZGie6psKmbKjhLCO3MzFTNa3j6tJ82i-piYSWY/s1600/bck.jpg) repeat scroll 0 0 transparent
}

kalau kode dalam template anda tidak sama, silahkan anda cari kode yang serupa kode di atas. Secara singkat kode itu body { .... kode - dst ..... }. Perhatikan batas kurung buka dan tutup pada kode body template anda. Kalau sudah ketemu, hapus dan ganti dengan kode berikut

body {background:url(http://i1138.photobucket.com/albums/n524/blogonol/flowersbackground.jpg);color:$textcolor;font:x-small Georgia Serif;font-size/* */:/**/small;font-size: /**/small;text-align: center;} /* Bila anda ingin mengganti background dengan gambar lain, silahkan ganti link biru dengan cetak tebal dengan alamat gambar anda */

Selanjutnya masukkan kode berikut 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'/> /* bila kode ini (jquery 1.3.2) sudah ada dalam template anda, maka kode ini tidak usah di pasang lagi, karena bila ada dua kode yang sama script ini bisa tidak jalan. Sedangkan kode di bawah ini harus di pasang ya gan */

<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>

Langkah berikut, klik Simpan Template dan lihat hasilnya.
Di bawah ini ane sediakan beberapa link background untuk anda. Dilihat bro...mumpung gratis heheheee.

Green Leaf Bacground
Earth Background
Active Dot Background
Blue Buble Background
Vertical Strip Background

Demikian tutorial cara membuat scroll background. Selamat mencoba dan sukses selalu

"keep spirits and do the best"