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:
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;
Selamat Mencoba, Happy Blogging :)
ADA YANG MAU PASANG IKLAN DI BLOG INI ?? bisa hubungi saya via email: oom [at] o-om [dot] com
Dengan memasukan alamat email dibawah ini berarti anda akan mendapat kiriman artikel terbaru dari o-om.com di inbox anda:
Beri vote untuk nilai artikel ini:


21 Komentar:
premium ...eh salah pertamax
ikutan promosi ah, ayo siapa yang pasang iklan di blogku :D
makasih ya oom, udah berhasil dan sukses besar. padahal kode ini yg aku tunggu-tunggu dari dulu. sekarang udah terpasang nih di blog ku.
dateng ya oom, lihat-lihat gambar naruto nya udah bisa ganti-ganti. yhanks ya
Boleh juga nich o-om, kayaknya bisa untuk aplikasi lain nich, pasang gambar kali ya... sip dah
iya kode diatas sebenarnya om desain buat iklan...tapi kalo mau di modifikasi, misalkan buat poto atau apa saja tergantung mau di pake buat apa :)
Begitu yach......
om izin pake scripnya nih, saya lihat di Firefox juga bekerja dengan baik
>> kang rohman : silahkan kang...halah kang rohman kaya dengan siapa aja hehehehe
mas, saya sudah coba dengan 3 banner ukuran 468x60
tapi kok saat tampil, banner mengalami stretching alias melebar atas bawah ya?
trims atas jawabannya....
Baru nyoba pasang script di atas. Berhasil dengan mudah. Muantabs...
Tq om.. bravo..banner nya jalan.
Ada cara lain supaya banner berganti tanpa harus reload om...
@anangyb : dicoba lagi aja ya mungkin ada kode yang gak ke copy-paste
@opiniherry : sip dah kalo berhasil
@george : kalo gak salah ada tapi coba dicari di blog om :)
wetz , om emang paling jago dah masalah ginian !
smoga ntar gw gede'y bisa jago codingan sama kaya om deh .
[anak IT binus nih]
hahahahaha .. xp
thanks yah om . :)
btw , boleh tukeran link ga ? ^^
@**Promotion Team** : thanks juga ya..semoga cepat gede (gede apa nih?) :)
smoga cepet gede itu'y aja deh .
[itu'y apa lagi nih ?]
hahahaha .. xp
Om kalo random banner-nya tepat ada dibawah posting diatas komment.... Kita nyimpen kode html itu dimana....??? Dan nantinya otomatis ada diposisi itu disemua posting......
Cepetan dijawab yah.. Saya tunggu!!!
@pascal : coba kodenya pasang di bawah kode ini..buka dulu edit html..trus beri tanda centang.
<div class='post-body entry-content'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<div style='float:left; margin-left:0px;'>
............
Seminggu kemaren saya coba pasang random banner ini om, tapi akhir2 ne ko bannernya ga keluar sama sekali. padahal dah ikutin caranya. Kenapa ya om?
oom,,klo iklannya d pasang kyk punya oom d atas ntu gmn caranya..yg deket gmbr oom itu loh..
bang ak coba kok g bisa..:(( klo itu d kasih contoh kongkretnya gimana tu,,,:D
malam OM,
yang ini diganti ya om ...
var waktu_sekarang = new Date()
var detik = waktu_sekarang.getSeconds()
Sudah bergabung dengan program penghasil Dollar($)?
Posting sebuah Komentar
Untuk memasang emoticon diatas, cukup dengan menulis kodenya. Silahkan berkomentar, jangan nyepam ya :)