Random Header Image

Header adalah bagian penting dari sebuah blog. Bagaimana tidak, kesan pertama para pengunjung blog banyak dipengaruhi oleh header blog sodara.

Judul blog, deskripsi blog, semua tertampung pada header blog. Untuk mendapat kesan pertama yang baik dan memperindah tampilan blog, header bisa jadi 'wajib' tampil maksimal. Salah satunya adalah dengan memberi background gambar yang cantik, atau paling tidak nyambung dengan isi blog kita.

Nah, berhubungan dengan header, trik kali ini adalah bagaimana membuat gambar header kita bisa secara otomatis berganti-ganti atau sering kenal dengan random header image. Jadi, tiap kita membuka halaman baru atau me refresh blog kita, gambar pada header akan berganti-ganti atau dengan kata lain, banner pada header akan berganti-ganti.

Sebagai contoh, langsung aja menuju sini. Coba sodara berpindah halaman atau sekedar refresh pada blog itu. Perhatikan, gambar pada header akan berganti2 secara otomatis.

Pengen yang seperti itu? mau coba? Ayo kita pelajari bareng.. Jangan lupa download dulu template sodara y..


Pertama-tama, copy kode dibawah ini :

<script type='text/javascript'>
var gbr= new Array()
gbr[0]="http://gbr1.png"
gbr[1]="http://gbr2.png"
gbr[2]="http://gbr3.png"
gbr[3]="http://gbr4.png"
gbr[4]="http://gbr5.png"
var random=Math.floor(5*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + gbr[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

Paste kode tersebut DIBAWA kode ]]></b:skin>

Tulisan berwarna merah adalah url masing-masing gambar.
Angka berwarna kuning adalah jumlah keseluruhan gambar.

Klo dah? Tinggal simpen aja, trus coba preview. Coba refresh beberapa kali atau berpindah halaman. Ganti-ganti kan tu gambar di header?

Mudah kan trik nya? GAMPANG KOK!!!