Auto Random Image [ javascript ]
Pernah kita jumpai image pada sebuah situs/blog berubah-ubah setiap
kali di refresh ?. Mungkin diantara teman-teman ada yang bertanya-tanya "kok bisa ya ?", sama saya dulu malah lebih parah pas ngeliat pertama
kali. Saya berkomentar "wah hebat sekali bisa gonta-ganti !".Pertanyaan berikutnya mungkin kita sama "caranya gimana ya ?".
Apa yang dilihat itu, ternyata namanya "auto random image". Apa sih
keunggulannya ? mm, kalo ngomongin keunggulan sih gak banyak Cuma asyiknya setiap kita load [ buka kembali ] halaman yang sama dia bakal
munculin gambar yang berbeda. [ mudah-mudahan bisa ngerti dengan
penjelasan gw yang bahasanya amburadul hihihi ]. so keliatannya itu
page gak monoton make gambar itu aja.
Gimana cara bikinnya ? hm yang jelas bukan dibikin, tapi lagi-lagi di copy paste [maklum bekas tukang foto kopian dulunya ] source/script
yang tersedia. Ok, kita langsung aja jangan diperpanjang lagi mukodimahnya yah !
1. Menyediakan tempat narok gambar yang akan di random, karena itu
kamu butuh hosting atau gallery image. Ops, jangan panik dulu kalo
berurusan sama hosting. Tenang, sekarang ada photo album yang nyediakan tempat narok-narok foto gratis di photobucket.com disana kamu bisa upload foto sepuasnya sampe 3 MB ntar ada tag url alamatnya yang bisa kamu copy atau kamu tarok di web kamu.
2. Copy dan Paste script dibawah ini di bagian <head>...</head> pada template blog/website kamu tercinta.
<!-- Awal Script untuk Random Image Header -->
< script language = "JavaScript" >
<!--
var theImages = new Array()
theImages[0] = 'http://alamathostingkamu.com/gambar1.jpg'
theImages[1] = 'http://alamathostingkamu.com/gambar2.jpg'
theImages[2] = 'http://alamathostingkamu.com/gambar3.jpg'
theImages[3] = 'http://alamathostingkamu.com/gambar4.jpg'
theImages[4] = 'http://alamathostingkamu.com/gambar5.jpg'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){ document.write('<img src="'+theImages[whichImage]+'">');
}
//-->
</ script >
3. Menampilkan image di bagian <body> ... </body> di tempat yang kamu suka terserah dimana aja asal masih dalam tag body.
copy dan paste script dibawah ini :
<!-- Awal tampilan script random image -->
< script language = "JavaScript" >
<!-- showImage(); //-->
</ script >
<!-- akhir tampilan script random image -->
Sekarang tinggal kamu save template dan publish lagi blog kamu,
atau kalo gak mau ngambil resiko coba di review template kamu, kalo udah ok n sip baru di save n publish.
Terimakasih sudah mampir diblog sederhana ini, jangan lupa like & share nya yah
Tidak ada komentar:
Posting Komentar