Tips Membuat Rotasi Background Image : Jika menginginkan, dengan beberapa image yang kita miliki, kita dapat membuat background image yang berubah-ubah (berotasi) secara bergantian ketika pengunjung berusaha me-refresh (me-load) beberapa kali blog kita. Dengan tampilan background yang berubah-ubah tersebut mungkin dapat membuat pengunjung lebih betah berlama-lama pada blog kita karena mendapatkan sajian background yang tidak monoton dan itu-itu saja. Jika tertarik silakan ikuti tipsnya bersama Tips dan Trik Blog berikut ini.


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

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(“”);
document.write(“body {“);
document.write(‘ background:url(“‘ + banner[random] + ‘”) repeat center center;’);
document.write(” }”);
document.write(“”);

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 menghendaki 5 image maka hapuslah banner[4] hingga banner[9]. Namun sebaliknya jika dirasa masih kurang, kita dapat menambahkannya mulai banner[10] hingga seterusnya.
  • Kemudian gantilah angka 10 sesuai dengan jumlah image yang ingin kita gunakan, misalkan image-nya hanya 5 buah maka gantilah menjadi angka 5 begitu juga jika kita menginginkan 20 buah image maka gantilah menjadi 20.

Contoh aplikasinya, seperti di bawah ini.

var banner= new Array()
banner[0]=”http://www.geocities.com/yono_pati/intan.gif
banner[1]=”http://www.geocities.com/yono_pati/bunga.gif
banner[2]=”http://www.geocities.com/yono_pati/bisnis.gif
var random=Math.floor(3*Math.random());
document.write(“”);
document.write(“body {“);
document.write(‘ background:url(“‘ + banner[random] + ‘”) repeat center center;’);
document.write(” }”);
document.write(“”);

Keempat, simpan perubahan

Kelima, selesai

Sekarang, cobalah refresh blog beberapa kali dan pastikan background imagenya berubah-ubah.

(sumber : tips for new bloggers)