Random Ads Banner - Menampilkan Banner Secara Acak

Diantara teman blogger yang kebetulan membaca artikel ini mungkin dan bahkan dipastikan tahu apa itu banner. Banner itu mewakili gambaran umum terhadap sebuah website, banner biasanya dipasang pada blogger yang mengikuti sebuah program dari website lain, misal affiliasi. Bayangkan jika kita mengikuti program affiliasi sebanyak 20 program dan ke 20 website affiliasi tersebut mengharuskan kita memasang banner itu pada blog kita, maka blog kita akan terkesan sebagai blog "tempat sampah" lebih parahnya om Google akan memasukan blog kita dalam kategori spam blog, bisa-bisa blog kita di pecat dari index search engine tersebut.

Random Ads Banner atau Iklan Banner Acak adalah solusinya, pada prinsipnya Random Ads Banner akan menampilkan keseluruhan banner kita secara bergantian sesuai dengan pergantian halaman dan waktu (timer) yang kita set pada script-nya. Walaupun kurang maksimal untuk menampilkan secara keseluruhan banner tapi ini membuat blog kita tampil rapi tanpa harus membuang banner tersebut. Random Ads Banner ini belum menyertakan cokie didalamnya sehingga kemungkinan banner yang ditampilkan akan tetap dalam jangka waktu tertentu. Kedepan saya akan membuat Random Ads Banner yang menggunakan cokie sehingga dapat dipastikan banner akan tampil bergantian seiring pergantian halaman. (Mohon bersabar pada saat menulis artikel ini saya masih melakukan percobaan)

Membuat Random Ads Banner atau Tampilkan Banner secara acak

Langkah 1
Buatlah/copy paste code JavaScript seperti dibawah ini dengan Notepad :

// Source by http://modification-blog.blogspot.com/
// Created by Hendriono
var jumlah_banner = 3;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % jumlah_banner;
ad +=1;
if (ad==1) {
txt="Upload-Share-Earn";
url="http://www.ziddu.com/register.php?referralid=(yI-X~O*)";
alt="ziddu.com";
banner="http://www.ziddu.com/banners/images/1185859864@ban_468x60.gif";
width="468";
height="60";
}
if (ad==2) {
txt="where sharing is rewarded!";
url="http://www.shareapic.net/ref.php?owner=arethoze";
alt="shareapic.net";
banner="http://www.shareapic.net/refads/aff3.gif";
width="468";
height="60";
}
if (ad==3) {
txt="Find it at GoTo.com";
url="http://www.goto.com";
alt="goto.com";
banner="http://imageserv.imgis.com/images/Ad13700St1Sz1Sq1_Ban1.gif";
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>');

simpanlah kode JavaScript tersebut, misal; banner.js. (pastikan ekstensi file .js dan Save As Type : All Files pada Notepad)
Langkah 2
Upload-lah file banner.js tersebut pada web hosting anda (misal;googlepages), maka akan diperoleh alamat url seperti dibawah ini :

http://dedehendriono.googlepages.com/banner.js

Langkah 3
Login ke Blogger
Langkah 4
"Tambah Gadget - HTML/JavaScript" baru melalui tab "Tata Letak-elemen Halaman" atau baca disini
Langkah 5
Masukan kode dibawah ini untuk memanggil kode pada web hosting kita :

<script src="http://hendriono.googlepages.com/banner.js" type="text/javascript"/></script>

Langkah 6
Simpanlah Gadget baru tersebut

Perhatian !

1. Tentukan jumlah banner yang akan ditampilkan melalui tag var jumlah_banner = 3; dengan mengubah nilai 3
2. Tag if (ad==1) adalah urutan banner, ubahlah nilai 1 sesuai dengan urutan banner
3. Tag txt (misal diatas : txt="Upload-Share-Earn";) adalah keterangan teks yang akan muncul dibawah banner, ubahlah kalimat "Upload-Share-Earn" sebagai gambaran website tujuan banner
4. Tag url (misal diatas : url="http://www.ziddu.com/register.php?referralid=(yI-X~O*)";) adalah alamat website yang akan di tuju ketika user meng-klik banner, ubahlah alamat url didalam tanda kutip sesuai url yang kita maksud
5. Tag alt (misal diatas : alt="ziddu.com";) adalah keterangan yang tampil mewakili banner saat banner belum secara keseluruhan di load atau gagal diload oleh browser sekaligus keterangan kecil disaat user menggeser panah mouse pada banner tanpa meng-klik. Ubahlah kalimat didalam tanda kutip sesuai keinginan kita atau nama website yang dituju
6. Tag banner (misal diatas : banner="http://www.ziddu.com/banners/images/1185859864@ban_468x60.gif";) adalah alamat tempat penyimpanan gambar, ubahlah alamat url gambar didalam tanda kutip sesuai dengan alamat web hosting penyimpanan banner kita. Jika banner tersebut berasal dari website lain kita cukup menempatkan alamat url gambar dari website tersebut.
7. Tag width dan height adalah nilai yang menentukan lebar dan panjang banner, ubahlah nilai didalam tanda kutip sesuai ukuran banner.
8. Masukan code dibawah ini secara berurutan jika kita ingin menambahkan banner lagi dikemudian hari :
   if (ad==1) {
   txt="Upload-Share-Earn";
   url="http://www.ziddu.com/register.php?referralid=(yI-X~O*)";
   alt="ziddu.com";
   banner="http://www.ziddu.com/banners/images/1185859864@ban_468x60.gif";
   width="468";
   height="60";
   }
9. Ingat ubah nilai 3 pada kode var jumlah_banner = 3; sesuai jumlah banner yang disiapkan
10. Ingat ubah nilai 1 pada kode if (ad==1) sesuai urutan banner yang baru kita tambahkan
11. Disarankan memasang banner dengan ukuran sama agar tampilan banner rapi
12. Jika ingin lihat hasilnya silahkan klik disini

Selamat mencoba semoga berhasil... Happy blogging :)