Rabu, 21 Desember 2011

Cara Membuat Gambar yang Berubah-ubah di Setiap Halaman Blog


Bila kita menampilkan gambar pada suatu halaman blog, blog tersebut akan terlihat lebih menarik. Akan lebih menarik lagi bila gambar tersebut berubah-ubah tiap kali kita melakukan reload/ membuka halaman baru. Bagaimana caranya membuat gambar yang dapat berubah-ubah di setiap halaman blog? Salah satu caranya adalah dengan membuat javascript seperti di bawah:

<script language="JavaScript">
var img_width = "200";//lebar gambar
var img_height = "200";//tinggi gambar
var img_title = "gambar blog";//teks yang muncul ketika mouse diarahkan ke gambar
var ad=new Array()

//masukan url gambar Anda disini
ad[0]='http://4.bp.blogspot.com/_3T6iBQSYu6E/TDXH0ynfYYI/AAAAAAAAAL0/Z4socm_EWZ8/s400/maxthon.png';
ad[1]='http://3.bp.blogspot.com/_3T6iBQSYu6E/TDl3-bw54nI/AAAAAAAAAMc/fpDGUUjbfYU/s320/hosting%20gratis%20indonesia.png';
ad[2]='http://1.bp.blogspot.com/_3T6iBQSYu6E/TDWzoEwnI0I/AAAAAAAAALk/TAqr1CZKKnA/cooltext-starchem05.png';
ad[3]='http://1.bp.blogspot.com/_3T6iBQSYu6E/TDVevL2_5kI/AAAAAAAAALU/SkYZAV3lerA/s400/asteroid%20dan%20comet.jpg';
ad[4]='http://3.bp.blogspot.com/_3T6iBQSYu6E/TDUyO6YQFSI/AAAAAAAAALE/qLCGFycIiUo/windows%20sp3.jpg';

var links=new Array()
//masukan url tujuan/ kosongkan
links[0]='http://banyobiroe.blogspot.com/';
links[1]='http://banyobiroe.blogspot.com/';
links[2]='http://banyobiroe.blogspot.com/';
links[3]='http://banyobiroe.blogspot.com/';
links[4]='http://banyobiroe.blogspot.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>

Catatan:
*teks script tebal warna merah* silahkan ganti dengan keinginan Anda.

Cara membuatnya:
1. Masuk ke akun blogger Anda.
2. Pilih Design/Rancangan dan pilih Page Element
3. Pilih Add a GadgetTambah gadget
4. Masukkan Script di atas
5. Klik Save jika sudah selesai

0 komentar