Membuat Rotasi Image Header

Tips Membuat Rotasi Image Header : Jika pada postingan yang lalu, di sini, telah dijelaskan tentang pembuatan rotasi background image, maka pada kesempatan kali ini, dengan tips yang hamper sama, Tips dan Trik Blog akan menjelaskan tentang pembuatan rotasi Image Header. Dengan tips tersebut, ketika pengunjung berusaha me-refresh blog kita maka mereka akan mendapati image header yang berubah-ubah. Dengan demikian diharapkan blog kita menjadi lebih variatif dan menarik. Jika tertarik, silakan ikuti tipsnya 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

<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!!

(sumber : Tips For New Bloggers)

Baca juga yang ini

Membuat Rotasi Background Image
Tips dan Trik Komputer
Tips dan Trik Bisnis di Internet
Description: Membuat Rotasi Image Header Rating: 4.5 Reviewer: Unknown - ItemReviewed: Membuat Rotasi Image Header