Membuat Random Rotating Banner Pada Blogger

Bagi kalian yang ingin menampilakan banner yang berbeda dalam setiap halamannya, maka kalian perlu coba cara yang satu ini. Dengan memasukkan kode di bawah ini, maka background image pada elemen "header" kalian akan ditampilkan secara acak dengan background image yang berbeda pada setiap kali browser pada halaman blog yang kalian miliki.

Random banner pertama kali diperkenalkan oleh Gabriel Lau. Dengan menggunakan script dari Ramani (Hackosphere) beliau berhasil meng-hack script tersebut untuk membuat random rotating banner pada blogger beta. Dengan tidak merubah bentuk dasarnya, di bawah ini adalah bentuk dari scriptnya.

Script Random Rotating Banner

<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"
banner[4]="http://static.flickr.com/98/269053232_6f7c6f994a_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>

Sebelum kalian masukkan script di atas pada blog yang kalian miliki, maka kalian perlu memperhatikan terlebih dahulu kode yang sudah saya beri warna. berikut penjelasannya:

tulisan yang berwarna biru, silahkan kalian ganti dengan alamat (URL) tempat dimana kalian menyimpan gambar (image) pada webhosting image kalian.

Kalian dapat menambah atau mengurangi jumlah banner yang ingin kalian tampilkan dan sesuaikan dengan tulisan yang berwarna merah dari script di atas . misalnya:

Jika Mengurangi banner
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"
var random=Math.round(2*Math.random());

Jika Menambah banner
......
banner[5]="http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg"
banner[6]="http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg"
var random=Math.round(6*Math.random());

Setelah kalian sesuaikan scriptnya dengan mengikuti penjelasan di atas maka langkah berikutnya letakkan Script Random Rotating Banner yang sudah kalian sesuaikan tadi tepat di bawah kode ]]></b:skin> pada template blog kalian kemudian simpan template dan lihat hasilnya.

Agar bentuk tampilan banner kalian sempurna, sesuaikan ukuran banner dengan ukuran elemen header pada blog yang kalian miliki. Baiklah teman, sampai di sini saja penjelasan saya mengenai random rotating banner. Bagi kalian yang masih bingung di mana letak kode ]]></b:skin> berada, maka silahkan kalian membaca postingan-postingan saya sebelumnya.