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:
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>
<!-- 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";
}
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..!
ConversionConversion EmoticonEmoticon