Membuat Rotasi Image Header

Langkah-langkahnya adalah sebagai berikut.

Pertama, upload image-image yang akan kita jadikan sebagai background ke image hosting terlebih dahulu.

Kedua, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Tambah Gadget >> Tambahkan HTML/Javascript

Ketiga, copy kode berikut ini

<script type="text/javascript">
var banner= new Array()
banner[0]="URL_Image01"
banner[1]="URL_Image02"
banner[2]="URL_Image03"
banner[3]="URL_Image04"
banner[4]="URL_Image05"
banner[5]="URL_Image06"
banner[6]="URL_Image07"
banner[7]="URL_Image08"
banner[8]="URL_Image09"
banner[9]="URL_Image10"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

Keterangan

• Ganti URL_Image01 hingga URL_Image10 dengan URL_image kita.
• Jika menghendaki jumlah image yang berbeda, kita tinggal menambahkan atau menguranginya sendiri. Misalkan kita hanya mempunyai 5 image maka hapuslah banner[4] hingga banner[9]. Namun sebaliknya jika dirasa masih kurang, kita dapat menambahkannya mulai banner[10] hingga seterusnya.
• Ganti angka 10 sesuai dengan jumlah image yang ingin kita gunakan, misalkan image-nya hanya 4 maka ganti menjadi angka 4 begitu seterusnya jika kita memasang image 20 buah maka gantilah menjadi 20.
• Jika image kita berukuran kecil maka kita dapat mengganti atribut “no-repeat top left” menjadi “repeat center center”.

Contoh aplikasinya seperti di bawah ini.

<script type="text/javascript">
var banner= new Array()
banner[0]="http://www.geocities.com/yono_pati/intan.gif"
banner[1]="http://www.geocities.com/yono_pati/baby1.gif"
banner[2]="http://www.geocities.com/yono_pati/bisnis.gif"
banner[3]="http://www.geocities.com/yono_pati/bunga.gif"
var random=Math.floor(4*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

Keempat, simpan perubahan

Kelima, selesai.

Sekarang, cobalah refresh blog beberapa kali dan pastikan image headernya telah berubah-ubah sesuai dengan image yang kita atur sebelumnya.

Selamat Mencoba!!