Cara Membuat Banner Rotator

Cara Membuat Banner Rotator

Unlimited SSD Web Hosting
Pada kesempatan kali ini kita akan membahas bagaimana caranya membuat banner yang bisa berubah sendiri jika halaman direfresh atau yang sering dikenal dengan sebutan Banner Rotator.

Dimana tujuan dari pembuatan Banner Rotator ini yaitu untuk menghemat space sebuah blog, sobat cukup menampilkan satu banner yang akan berubah saat halaman direfresh atau dikunjungi ulang.

Banner Rotator ini sering kita jumpai di web PTC yang digunakan untuk memunculkan iklan banner penyewa.

Langsung saja kita lihat scriptnya dibawah ini :

Menggunakan PHP
<?php
$banner = array();
$banner[] = "<a href='Link Tujuan' rel='nofollow' target='_blank'><img src='Link Gambar' alt='' /></a>";
$banner[] = "<a href='Link Tujuan' rel='nofollow' target='_blank'><img src='Link Gambar' alt='' /></a>";
$banner[] = "<a href='Link Tujuan' rel='nofollow' target='_blank'><img src='Link Gambar' alt='' /></a>";
shuffle($banner);
echo $banner[0];
?>

Menggunakan JavaScript
<script language="JavaScript">
Banner = new Array(3);
Banner[0] = "<a href='Link Tujuan' rel='nofollow' target='_blank'><img src='Link Gambar' alt='' /></a>";
Banner[1] = "<a href='Link Tujuan' rel='nofollow' target='_blank'><img src='Link Gambar' alt='' /></a>";
Banner[2] = "<a href='Link Tujuan' rel='nofollow' target='_blank'><img src='Link Gambar' alt='' /></a>";
index = Math.floor(Math.random() * Banner.length);
document.write(Banner[index]);
</script>

Keterangan Script:

  • Link Tujuan (Warna Merah) Diganti dengan link tujuan banner yang ditampilkan.
  • Link Gambar (Warna Biru) Diganti dengan link gambar banner yang akan ditampilkan.
  • Jumlah banner yang muncul dapat diganti pada bagian Array(3), ganti angka 3 dengan jumlah banner yang diinginkan diikuti dengan menambah kode Banner[2] (angka dimulai dari 0 disesuaikan dengan array)

Sebagai contohnya, sobat bisa melihatnya dibawah ini.

*Refresh halaman ini untuk melihat perubahan banner

Untuk pemasangan di blogger klik Tata Letak > add widget > HTML/JavaScript.

Demikianlah Cara Membuat Banner Rotator ini, semoga bermanfaat untuk sobat.

Unlimited SSD Web Hosting

Tentang Gus Tut

Seorang Tenaga Administrasi di Sekolah Dasar Negeri 2 Ringdikit dan juga Teknisi Elektronik di Kevin Elektro yang senang berbagi seputar info tips & trik.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *