Random Iklan Pada Satu Area

Ada sesuatu yang lucu jika ingat minggu lalu ketika sahabat karib (bukan blogger) menanyakan kepada saya bagaimana menampilkan iklan secara acak (Random banner) dalam satu area. Pertama kali ditanyakan hal ini saya juga kebingungan mau jawab apa, wong blog ini gak pernah ada iklan-nya apalagi mengelola pemasang iklan. Setelah lama bercuap-cuap sahabat saya langsung nyeletuk "katanya blogger mania masa buat koding untuk iklan aja gak bisa" Gubraaakkkk, gila.. nantang bener nih orang. saya balas bertanya "kalo om bisa dikasih apa??" teman saya menjawab "saya traktir makan di cak koting (tempat makan terkenal di yogya)" OK, kasih om waktu satu hari, kemudian kami pun bersalaman tanda sepakat. (akhirnya..om ditraktir makan hehehe)

Back ke laptop....sebenarnya membuat Iklan (Banner) satu tampilan dalam satu area tidak terlalu sulit, kita hanya tinggal mengarahkan saja ke lokasi gambar, namun yang jadi masalah bagaimana jika kita mempunyai 10 pemasang iklan yang ingin ditampilkan dalam satu lokasi area, ini yang munkin menjadi kendala utama pengelola iklan. Perlu diketahui bahwa banner yang kita buat nanti hanya pada  Image Banner bukan sebagai Text Banner, iklan ini akan tampil secara acak jika pengunjung melakukan reload atau refresh pada halaman. Lihat Random Banner dengan iklan Dmoz dibawah sebagai contoh:





dmoz.org
Contoh tampilan iklan DMOZ ketiga


Contoh kode Dengan Javascript :

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var jumlah_iklan = 3;
var waktu_sekarang = new Date()
var detik = waktu_sekarang.getSeconds()
var pasang_iklan = detik % jumlah_iklan;
pasang_iklan +=1;
if (pasang_iklan==1) {
txt="
Tulis Title";
url="
Alamat URL";
alt="
Alamat URL";
banner="
Alamat URL Gambar";
width="
468";
height="
60";
}
if (pasang_iklan==2) {
txt="
Tulis Title";
url="
Alamat URL";
alt="
Alamat URL";
banner="
Alamat URL Gambar";
width="
468";
height="
60";
}
if (pasang_iklan==3) {
txt="
Tulis Title";
url="
Alamat URL";
alt="
Alamat URL";
banner="
Alamat URL Gambar";
width="
468";
height="
60";
}
document.write('<center>');
document.write('<a href=\"' + url + '\" target=\"_top\">');
document.write('<img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt=\"' + alt + '\" border=0><br>');
document.write('<small>' + txt + '</small></a>');
document.write('</center>');
// End -->
</SCRIPT>


Penjelasan:

Jika ingin menambah jumlah iklan tinggal menambahkan saja code script-nya, contoh diatas kita mempunyai 3 jumlah iklan yang ditampilkan, jika rencana menambah 1 iklan lagi jangan lupa juga menambahkan nilai baru dengan 4, begitupun seterusnya.  Lihat contoh kode dibawah:

if (pasang_iklan==4) {
txt="
Tulis Title";
url="
Alamat URL";
alt="
Alamat URL";
banner="
Alamat URL Gambar";
width="
468";
height="
60";
}

Ups hampir lupa, jangan lupa menambah total jumlah iklan yang ditampilkan, Contoh: var jumlah_iklan = 4;

Atau bisa juga pakai kode script di bawah ini untuk me-random gambar header template blog sobat :

<script type="text/javascript">
var banner= new Array()
banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"
banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"
banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"
banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"
banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"
banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"
banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"
banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"
banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"
banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

 Ganti yang berwarna merah bila sobat mempunyai url banner sendiri..!
Previous
Next Post »