Membuat Gambar Banner Berganti Secara Otomatis

Oleh Unknown

Saturday, October 17, 2015

Membuat gambar banner berganti secara otomatis - Banner adalah salah satu media promosi dengan gambar yang cukup menarik. Dalam dunia nyata kita kenal ada spanduk, baliho, dan semacamnya yang banyak bertebaran menghiasi jalanan. Gambar Banner yang kita bicarakan ini pun juga sama fungsinya, hanya ranahnya berbeda, di alam virtual. Banner yang dipasang pada sebuah blog bisa berupa iklan promosi, logo, dan sebagainya. Tergantung kepentingan sang pemilik blog.

Sebagai sebuah media promosi, banner mempunyai daya tarik tersendiri dibanding dengan iklan dalam bentuk teks. Karena melalui banner kita bisa menghasilkan iklan dalam bentuk grafis yang secara visual lebih mencuri perhatian sang mata. Apalagi kalau desain gambar banner menarik dan kreatif. Pasti produk yang kita promosikan melalui banner akan laku abis.

Nah, karena banner ini sifatnya iklan gambar maka membutuhkan space yang lebih besar dibandingkan iklan teks. Sehingga perlu pengaturan yang pas agar adanya gambar banner ini tidak mengganggu penampilan blog.

Agar banner yang kita pasang pada blog tidak menghabiskan banyak space, sementara kita ingin mengiklankan banyak banner, salah satu caranya yaitu dengan menjadikan semua gambar banner menjadi satu pada satu space. Sehingga lebih menghemat space dan tampilan blog tidak terkesan semrawut dengan banyaknya banner bertebaran di sana-sini. Banner yang sudah disatukan nantinya akan muncul bergantian secara otomatis seperti slide.

Cara Membuat Banner Muncul Bergantian Secara Otomatis

Oke, langsung saja untuk caranya sangat mudah. Cukup menambahkan sedikit script di bawah ini pada area di mana banner ingin ditampilkan.


<script type="text/javascript">
var imgs1 = new Array("URL Banner-A","URL Banner-B","URL Banner-C","URL Banner-D");
var lnks1 = new Array("URL Tujuan-A","URL Tujuan-B","URL Tujuan-C","URL Tujuan-D");
var alt1 = new Array("Teks Iklan-A","Teks Iklan-B","Teks Iklan-C","Teks Iklan-D");
var currentAd1 = 0;
var imgCt1 = 4;
function cycle1() {
if (currentAd1 == imgCt1) {
currentAd1 = 0;
}
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById('adLink1').href=lnks1[currentAd1]
currentAd1++;
}
window.setInterval("cycle1()",5000);
</script>
<a href=""link iklan-1"" id="adLink1" target="_blank">
<img src="link gambar iklan-1" id="adBanner1" border="0" width="350" height="250" /></a>

Keterangan :

URL Banner (warna Merah) adalah alamat atau link gambar yang akan dijadikan banner.
URL Tujuan (warna Biru) adalah URL tujuan, saat gambar banner diklik maka akan menuju link yang menjadi tujuan.
Teks Iklan (warna Hijau) adalah teks deskripsi singkat tentang gambar banner.
Angka 5000 adalah kecepatan gerakan banner yang bergantian, semakin rendah nilainya maka akan semakin cepat pergerakannya, begitu juga sebaliknya.
Width 350 dan Height 250 adalah lebar dan tinggi banner. Silahkan ganti sesuai dengan space yang pas pada template blog konco sinahu.

Contoh Membuat Banner Berganti Secara Otomatis

Dari struktur coding di atas, nantinya akan menghasilkan gambar banner yang muncul bergantian secara otomatis. Sebagai contoh hasilnya nanti seperti ini :