Jika melihat rotating image pada header Tpada sebuah blog dan tertarik untuk membuatnya maka tulisan ini mungkin membantu. Kelebihan membuat rotating image pada header ini adalah ia tidak menggunakan plugin, dan dinamis, artinya berputar otomatis, tidak direfresh browsernya.
Kelemahannya, tidak ada transisi gambar yang hebat, seperti plugin rotating image yang pernah saya pakai sebelumnya. Saya sempat mencari cukup lama plugin yang pernah saya pakai itu, namun tak saya temukan, dan sayangnya belum pernah pula saya tulis di blog ini.
Tak mengapalah, karena dalam pencarian itu saya temukan tutorial untuk membuat rotating image pada header yang ditulis dengan JavaScript ini. Buat saya cara ini sangat mudah. Tinggal copy paste script-nya, mengganti informasi di dalamnya sesuai kebutuhan, dan lalu memasangnya pada header. Namun tidak demikian dengan pembuatnya yang mungkin berhari-hari melakukan eksperimen sampai ditemukannya script yang bekerja dengan baik ini. Kredit buatnya.
Satu hal yang patut Anda pertimbangkan adalah dimensi image yang digunakan. Semakin besar dimensi image, semakin besar ukuran file-nya, dan tentu akan semakin lama loading halaman. Pengunjung Anda tak akan suka itu. Yang kedua adalah optimasi image. Saya sarankan agar image dioptimasi antara 40-60%. Di bawah 40% image akan tampak tak elok, di atas 60% akan memperlama loading time.
Faktor lainnya adalah penempatan rotating image di halaman Anda. Kalau yang ini soal selera, dan Anda bisa berkesperimen sampai merasa puas.
Berikut adalah langkah-langkah yang dilakukan untuk membuat rotating image pada header:
Selesai. Sekarang anda bisa lihat bagaimana image rotator-nya beraksi di situs Anda. Jika ada masalah, jangan cepat menyerah. Teliti lagi satu persatu script yang Anda buat, karena mungkin ada yang tidak lengkap. Periksa juga tautan file image-nya apakah sudah benar. Alasan kenapa saya gagal pada percobaan pertama adalah karena saya salah dalam menuliskan alamat image-nya.
Kelemahannya, tidak ada transisi gambar yang hebat, seperti plugin rotating image yang pernah saya pakai sebelumnya. Saya sempat mencari cukup lama plugin yang pernah saya pakai itu, namun tak saya temukan, dan sayangnya belum pernah pula saya tulis di blog ini.
Tak mengapalah, karena dalam pencarian itu saya temukan tutorial untuk membuat rotating image pada header yang ditulis dengan JavaScript ini. Buat saya cara ini sangat mudah. Tinggal copy paste script-nya, mengganti informasi di dalamnya sesuai kebutuhan, dan lalu memasangnya pada header. Namun tidak demikian dengan pembuatnya yang mungkin berhari-hari melakukan eksperimen sampai ditemukannya script yang bekerja dengan baik ini. Kredit buatnya.
Satu hal yang patut Anda pertimbangkan adalah dimensi image yang digunakan. Semakin besar dimensi image, semakin besar ukuran file-nya, dan tentu akan semakin lama loading halaman. Pengunjung Anda tak akan suka itu. Yang kedua adalah optimasi image. Saya sarankan agar image dioptimasi antara 40-60%. Di bawah 40% image akan tampak tak elok, di atas 60% akan memperlama loading time.
Faktor lainnya adalah penempatan rotating image di halaman Anda. Kalau yang ini soal selera, dan Anda bisa berkesperimen sampai merasa puas.
Berikut adalah langkah-langkah yang dilakukan untuk membuat rotating image pada header:
- Unggah image Anda ke server. Saran saya 4-6 image dengan dimensi yang sama. Anda bisa memberi nama header_1.jpg, header_2.jpg, dst.
- Copy script berikut ini dan paste ke header.
<script language="JavaScript1.2">
var howOften = 5; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6
var items = new Array();
items[0]="<a href='https://tautan1/' ><img alt='' src='/headers/header_1.jpg' height='90' width='858' border='0' /></a>";
items[1]="<a href='https://tautan2/' ><img alt='' src='/headers/header_2.jpg' height='90' width='858' border='0' /></a>";
items[2]="<a href='https://tautan3/' ><img alt='' src='/headers/header_3.jpg' height='90' width='858' border='0' /></a>";
items[3]="<a href='https://tautan4/' ><img alt='' src='/headers/header_4.jpg' height='90' width='858' border='0' /></a>";
function rotater() {document.getElementById("placeholder").innerHTML = items[current];current = (current==items.length-1) ? 0 : current + 1;setTimeout("rotater()",howOften*1000);}
function rotater() {if(document.layers) {document.placeholderlayer.document.write(items[current]); document.placeholderlayer.document.close();}
if(ns6)document.getElementById("placeholderdiv").innerHTML = items[current]
if(document.all)
placeholderdiv.innerHTML=items[current];
current = (current==items.length-1) ? 0 : current + 1;
setTimeout("rotater()",howOften*1000);}
window.onload=rotater;
//--></script> - Ganti tautan1 sesuai alamat tulisan, isi keterangan image pada alt, ganti alamat image pada src, dan ganti dimensi image. Anda bisa tambahkan atau kurangi items[3]="< dst sesuai dengan jumlah image yang Anda punyai.
- Copy script berikut ini, dan paste di tempat dimana Anda ingin image-nya muncul.
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
Selesai. Sekarang anda bisa lihat bagaimana image rotator-nya beraksi di situs Anda. Jika ada masalah, jangan cepat menyerah. Teliti lagi satu persatu script yang Anda buat, karena mungkin ada yang tidak lengkap. Periksa juga tautan file image-nya apakah sudah benar. Alasan kenapa saya gagal pada percobaan pertama adalah karena saya salah dalam menuliskan alamat image-nya.
Sponsored Link
Sponsored Link
Sponsored Link
Bagikan ke:
Facebook, Twitter, WhatsApp, Telegram, Email. Print!.