Senin, 06 April 2015

Auto Random Image

Posted by rio setiawan on Senin, 06 April 2015


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


Previous
« Prev Post

Tidak ada komentar:

Posting Komentar