Selasa, 13 Juli 2010

Cara Membuat Gambar yang Berubah-ubah di Setiap Halaman Blog

Chemicals | 22.08 | |
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://starchem05.blogspot.com/';
links[1]='http://starchem05.blogspot.com/';
links[2]='http://starchem05.blogspot.com/';
links[3]='http://starchem05.blogspot.com/';
links[4]='http://starchem05.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:
*Pada teks yang berwarna 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 Gadget/ Tambah gadget
4. Masukkan Script di atas
5. Klik Save jika sudah selesai
6. Lihat hasilnya!

5 komentar:

  1. Makasih atas infonya, saya akan coba kalau saya online di komputer

    BalasHapus
  2. Pada texts yang berwarna ungu di apain gan?

    BalasHapus
  3. yang berwarna ungu ngak usah di apa-apain. itu cuma petunjuk aja. dihilangkan bisa, ngak juga bisa.

    BalasHapus
  4. thanks for info nya gan
    kunjungan nya gan + follow blog ane yh gan

    BalasHapus
  5. Makasih gan infonya, udah berhasil terpasang di blog saya :)

    BalasHapus

Copyright ©2010-2013 Starchem05 Designed By: Software Reviews and Downloads Powered by Blogger