Setelah kita belajar tentang bagaimana membuat pesan teks berubah-ubah pada setiap halaman, bagaimana kalau saya beri tahu bagaimana caranya Membuat Gambar Berubah di Setiap Halaman Blog. Tips ini bisa Anda terapkan bagi Anda yang gemar memajang koleksi foto atau gambar guna menambah semaraknya tampilan blog. Mau lihat contohnya, yuk perhatikan contoh foto atau gambar dibawah ini :
Foto atau gambar diatas akan berubah setiap kali Anda me-reload halaman ini. Berikut kode script yang digunakan, harap perhatikan dengan seksama kode dibawah ini :
<script language="JavaScript">
var img_width = "250";//lebar gambar
var img_height = "150";//tinggi gambar
var img_title = "klik donk";//teks yg muncul ketika mouse diarahkan pada gambar
var ad=new Array()
//masukan url foto atau gambar Anda disini
ad[0]='http://angelinasondakh.blogs.com/angelina_sondakhs_diary/images/puteri_indonesia_2001_3_5.jpg';
ad[1]='http://www.indonesiaindonesia.com/imagehosting/images/2821/1_Agni_Pratistha_puteri_indonesia.jpg';
ad[2]='http://www.batamevent.com/gbr%20artikel/putri%20indonesia.jpg';
ad[3]='http://www.suaramerdeka.com/harian/0608/26/sm1hl26path.jpg';
ad[4]='http://www.undiknas.ac.id/wp-content/uploads/2007/08/puteri-indonesia-2007.jpg';
var links=new Array()
//masukan link tujuan / kosongkan juga boleh
links[0]='#';
links[1]='#';
links[2]='#';
links[3]='#';
links[4]='#';
/*
edit by http://www.masbugie.com
*/
var xy=Math.floor(Math.random()*ad.length);
document.write('<a href="'+links[xy]+'" target="_blank"><img src="'+ad[xy]+'" width="'+img_width+'" height="'+img_height+'" alt="'+img_title+'"></a>');
</script>
var img_width = "250";//lebar gambar
var img_height = "150";//tinggi gambar
var img_title = "klik donk";//teks yg muncul ketika mouse diarahkan pada gambar
var ad=new Array()
//masukan url foto atau gambar Anda disini
ad[0]='http://angelinasondakh.blogs.com/angelina_sondakhs_diary/images/puteri_indonesia_2001_3_5.jpg';
ad[1]='http://www.indonesiaindonesia.com/imagehosting/images/2821/1_Agni_Pratistha_puteri_indonesia.jpg';
ad[2]='http://www.batamevent.com/gbr%20artikel/putri%20indonesia.jpg';
ad[3]='http://www.suaramerdeka.com/harian/0608/26/sm1hl26path.jpg';
ad[4]='http://www.undiknas.ac.id/wp-content/uploads/2007/08/puteri-indonesia-2007.jpg';
var links=new Array()
//masukan link tujuan / kosongkan juga boleh
links[0]='#';
links[1]='#';
links[2]='#';
links[3]='#';
links[4]='#';
/*
edit by http://www.masbugie.com
*/
var xy=Math.floor(Math.random()*ad.length);
document.write('<a href="'+links[xy]+'" target="_blank"><img src="'+ad[xy]+'" width="'+img_width+'" height="'+img_height+'" alt="'+img_title+'"></a>');
</script>
Note :
-Pada teks yang berwarna merah silahkan Anda sesuaikan dengan keinginan Anda.
-Link tujuan adalah alamat link yang akan muncul ketika pengunjung meng-klik gambar tersebut atau bisa juga Anda samakan dengan url gambar tersebut.
Caranya pasangnya :
1. Login ke blogger -> Rancangan -> Tambah Gadget->Javascript/Html
2. Silahkan Copy kode diatas dan Paste didalamnya . Selesai
Mudah-mudahan tips ini bisa berguna bagi kita semua, amien...jangan lupa koment yo. salam
Apakah artikel ini bermanfaat bagi Anda? Beri penilaian yach, klik disini








3 komentar:
menunggu orderan yang kupesan dulu...blum ik...heuheueheuheu..sukses lah mas bugie...
[Reply]WAH!! Keren!!
[Reply]Kalo di buat Background Bisa Gag???
wah artikel bagus.. izin baca gan. makasih buat infonye...
[Reply]Poskan Komentar