Ads banner (spanduk Iklan) sering dipasang di bawah atau di atas postingan utama. Tujuannya, tentu saja agar iklan tersebut dapat lebih terlihat oleh pembaca. Biasanya bentuknya persegi panjang, dan cukup memakan tempat apabila dipasang lebih dari satu.
Kalau kamu berminat untuk memasang banyak banner iklan sekaligus, tapi tetap menginginkan tampilan halaman web yang rapi dan lapang, luas, atau tidak sempit, mungkin tutorial berikut dapat berguna untuk web/blog kamu.
Tutorial ini mengenai cara memasang slideshow banner yang akan terus berotasi bergantian dari satu iklan ke iklan lainnya dalam satu frame. Mungkin kalian bisa mengakali banner tersebut dengan script marquee, tapi dengan Javascript yang satu ini, hasil yang akan diperoleh jauh lebih memuaskan pastinya. (Javascript memang OKE..!! ^^ ).
Yang harus dilakukan pertama-tama adalah memasukkan kode CSS & Javascript berikut kedalam kode web/blog (seperti biasa.... Masuk 'Edit HTML' bagi pengguna blogger. ^^).
Berikut kode CSS yang diletakkan di atas kode ]]></b:skin>, cukup kamu copas saja.
#addbox { position: relative; width: 500px; height: 70 px; clip: rect(0px, 500px, 0px, 70px); overflow: hidden; }
#banner1 { position: relative; width: 480px; height: 60px; left: 0; top: 5px; }
#banner2 { position: relative; width: 480px; height: 60px; left: 500px; top: -55px !important; top:-58px; }
Kode berikut berupa javascript, yang dapat kamu Copas (Copy Paste) di bawah ]]></b:skin> atau bisa juga tepat di atas kode </head>.
<script type="text/javascript">
<!--
/* Dibuat oleh: Ben Kanaev :: http://www.webhostreview.biz
Adaptation for Netscape and Firefox by Fang. Dipublikasikan oleh Mizan :: http://em-mizan.blogspot.com */
var displayTime, speed, wait, banner1, banner2, link1, link2, bannerIndex, bannerLocations, bannerURLs;
function initVar() {
displayTime = 10; // durasi waktu banner diam sebelum berotasiberotasi .
speed = 5; // kecepatan animasi rotasi (1 - 10).
wait = true;
banner1 = document.getElementById("banner1");
banner2 = document.getElementById("banner2");
link1 = document.getElementById("link1");
link2 = document.getElementById("link2");
banner1 = document.getElementById("banner1");
banner2 = document.getElementById("banner2");
banner1.style.left = 0;
banner2.style.left = 500;
bannerIndex = 1;
/* Masukkan urutan gambar dan lin-nya berikut secara urut, perhatikan angkanya! Jumlah iklan dan banner dapat ditambahkan. */
// Masukkan lokasi link alamat gambar dari iklan di sini secara urut.
bannerLocations = new Array("http://www.tautan1.com/gambar.gif","http://www.tautan2.com/gambar2.gif");
// Masukkan alamat URL tautan/link yang dituju iklan di sini secara urut.
bannerURLs = new Array("://www.tautan1.com","http://www.tautan2.com");
}
function moveBanner(){
if(!wait){
banner1.style.left = parseInt(banner1.style.left) - (speed * 5);
banner2.style.left = parseInt(banner2.style.left) - (speed * 5);
if(parseInt(banner1.style.left) <= -500){
banner1.style.left = 500;
bannerIndex = (bannerIndex < (bannerLocations.length - 1)) ? ++bannerIndex :0;
banner1.src = bannerLocations[bannerIndex];
link1.href = bannerURLs[bannerIndex];
wait = true;
}
if(parseInt(banner2.style.left) <= -500){
banner2.style.left = 500;
bannerIndex = (bannerIndex < (bannerLocations.length - 1)) ? ++bannerIndex :0;
banner2.src = bannerLocations[bannerIndex];
link2.href = bannerURLs[bannerIndex];
wait = true;
}
setTimeout("moveBanner()",100);
} else {
wait = false;
setTimeout("moveBanner()", displayTime * 1000);
}
}
-->
</script>
Kemudian, ganti kode <body dengan <BODY onLoad="initVar(); moveBanner()">. Setelah disimpan, masuk pada tab elemen halaman. Untuk langkah terakhir, buat widget 'HTML/Javascript Code' dan letakkan di bawah atau atas postingan, dan isi dengan kode berikut:
<center><div name="addbox" id="addbox">
<a name="link1" id="link1" href="www.tautan1.com"><img border="0" name="banner1" id="banner1" src="internet-lg.gif"></a>
<a name="link2" id="link2" href="http://www.jupiterweb.com"><img border="0" name="banner2" id="banner2" src="jupiterweb.gif"></a></center>
setelah itu simpan, dan lihat hasilnya. ^^
KEMBALI KE ATAS
