Cara Membuat Rotating Banner

Jika sobat memiliki beberapa banner dan bermasalah dengan ruang blog yang sempit maka ada cara yang mudah untuk menampilkan semua banner dengan menggunakan trik rotating banner. Rotating banner akan membuat banner pada header blog anda untuk berotasi setiap kali halaman tersebut di reload. Rotating banner ini akan berhasil diterapkan pada image banner bukan teks banner. Mau tau caranya, ikuti aja trik berikut ini:

1. Login ke blogger.
2. Pilih Rancangan dan Klik Edit HTML
3. Letakkan script dibawah ini setelah kode ]]></b:skin>

<script type="text/javascript">
var banner= new Array()

banner[0]="http://static.flickr.com/84/269053449_acad87a793_o.jpg"
banner[1]="http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg"
banner[2]="http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg"
banner[3]="http://static.flickr.com/108/269053262_608edbdda4_o.jpg"

var random=Math.round(4*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>

Keterangan:
- Sobat tinggal ganti url banner/gambar yang ingin ditampilkan (kode berwarna biru)
- Jika sobat ingin menambah banner tinggal tambahkan script dibawah ini:
banner[4]="http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg"
banner[5]="http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg"
Kemudian ganti kode berwarna hijau diatas dengan jumlah banner yang ditampilkan, misalnya 5 banner, maka hasilnya seperti ini:
Math.round(5*Math.random());

4. Simpan template anda dan lihat hasilnya
Selamat mencoba!!!!

Posted in: Gambar