Background Scrolling Effect with jQuery

Salah satu sobat Beben si bloglang ganteng kalem tea ada yang menanyakan "bagaimana cara membuat background awan yg ada dipost (yg jalan² itu mungkin ya)" Sebenarnya itu trik dari jQuery plug-in saja kok :D Sobat dapat melakukan beragam macam kreasi jika memang bisa bahasa script dari jQuery :) Jadi tinggal pintar² kita apa yg dibutuhkan. Karena dengan metode plugin ini sedikit memberikan warna bagi yg memang suka bergaya-gaya dengan blognya (kayak aku) :)) b-) Sedikit penjelasan mengenai jQuery plug-in sobat dapat membacanya jQuery Tutorial by w3school :-bd

Mari kita masuk ke inti dari pertanyaan sobat kita itu yah ;)) Untuk menggunakan trik ini sobat harus sudah memiliki script jQuery<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>Tanpa itu kita tidak akan bisa membuat trik ini sob ;;) Karena sedikit pengertian dari plugin ini yaitu memanggil efek dari script inti dengan script yg kita buat (semoga paham, kalau gak paham, telan saja paham) =)) Apa saja ramuannya dalam membuat "Create Background Scrolling Effect with jQuery" ini

Download dulu bahan-bahan berikut Igredient. Setelah itu ekstrak dan buka ramuannya yah! Untuk membaca keterangan lebih lanjut dari trik ini sobat bisa mengunjungi Queness. Setelah dibuka nanti ada jquery-1.3.1.min.js jika sudah punya versi lebih tinggi, tidak usah dipakai lagi (aturan plug-in nih) Sekarang bagaimana cara memasukannya ke blog kita ya sob :) Letakan script dan CSS berikut setelah kode ]]></b:skin>

<script type='text/javascript'>
$(document).ready(function () {
// speed in milliseconds
var scrollSpeed = 70;

// set the direction
var direction = 'h';

// set the default position
var current = 0;

function bgscroll(){

// 1 pixel row at a time
current -= 1;

// move the background with backgrond-position css properties
$('div.clouds').css("backgroundPosition", (direction == 'h') ? current+"px 0" : "0 " + current+"px");
}

//Calls the scrolling function repeatedly
var init = setInterval("bgscroll()", scrollSpeed);
});
</script>

<style type='text/css'>
.clouds {background:#DEBE94 url(http://bg_clouds.png) repeat 0 bottom;
width:auto;
height:100%;
}
</style>

Ganti link image dengan image awan! Save deh. Centang Expand Widget Templates pada edit template, lalu temukan ID bagian postingan sobat (berbeda setiap template)...biasanya dekat kode<div class='post-body entry-content'><data:post.body/> pokoknya bagian post. Tag dengan<div class="clouds"> lalu tutup dengan tag penutup</div>Good luck :D