Membuat Rotasi Banner (Banner Rotator)

Labels: •
Sebelumnya Blogger Tune-Up pernah membahas cara membuat Randoms Ads Banner (menampilkan Banner bergantian secara acak), banner tersebut akan muncul setiap pengunjung berganti halaman. Tapi salah seorang pembaca menginginkan Banner yang bergantian/berotasi tanpa harus berganti halaman. Sekarang Blogger Tune-Up akan memaparkan bagaimana membuat Banner yang muncul secara berotasi (bergantian tanpa bergantian halaman) atau sering di sebut Banner Rotator. Coba lihat contoh Banner Rotator yang telah terpasang dihalaman utama Design Graphics.

Membuat Rotasi Banner - Banner Rotator

Langkah 1
Login ke Blogger
Langkah 2
Pilih "Tata Letak - Edit HTML" dan check "Expand Template Widget"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
.m_banner_hide{
 display:none;
}
.m_banner_show{
 display:block;
}
Langkah 5
Cari kode dibawah ini :
</head>
Langkah 6
Masukan kode dibawah ini tepat diatas kode pada Langkah 5:
<script type="text/javascript" src="http://hens.googlecode.com/files/mBanner.js"/>
Langkah 7
Kembali ke "Tata Letak - Elemen Halaman"
Langkah 8
Tambahkan Gadget dengan tipe "HTML/JavaScript", atau baca disini
Langkah 9
Masukan kode dibawah ini :
<script language="javascript">
banner1 = new Banner('banner1');
banner1.add("IMAGE", "banners/01.jpg", 3, 60, 480,"http://dedehendriono.blogspot.com");
banner1.add("IMAGE", "banners/01.jpg", 3, 60, 480,"http://tutsadobe.blogspot.com");
banner1.add("IMAGE", "banners/01.jpg", 3, 60, 480,"http://programgratisan.blogspot.com");
banner1.add("FLASH", "banners/04.swf", 3, 60, 480,"http://bonprog.blogspot.com");
banner1.add("FLASH", "banners/05.swf", 3, 60, 480,"http://el-pro.blogspot.com");
banner1.add("FLASH", "banners/06.swf", 3, 60, 480,"http://modification-blog.blogspot.com");
document.write(banner1);
banner1.start();
</script>
Langkah 10
Simpan Gadget Tersebut dan preview blog

Keterangan :
  • Jika ingin menambahkan lokasi banner baru silahkan tambahkan sendiri dengan mengubah nama banner; misal contoh diatas banner1 maka ubahlah semua menjadi banner2 dan seterusnya
  • Secara berurutan perhatikan kode dalam tanda kurung setelah kode banner1.add ;
  • Ada 2 pilihan tipe file banner yaitu IMAGE dan FLASH sesuaikan dengan format banner, jika itu berformat JPG, JPEG, GIF, PNG maka gunakan tipe file format IMAGE, jika itu berformat SWF maka gunakan tipe file format FLASH
  • Tentukan link tempat dimana banner tersebut disimpan.
  • Tentukan durasi lamanya waktu banner muncul, dalam contoh di set 3 detik.
  • Tentukan ukuran tinggi banner, dalam contoh memiliki ukuran tinggi 60 pixel. Ini disesuaikan dengan ukuran banner.
  • Tentukan ukuran lebar banner, dalam contoh memiliki ukuran lebar 480 pixel. Ini disesuaikan dengan ukuran banner.
  • Tentukan link yang akan dituju ketika pengunjung meng-klik salah satu banner yang muncul.
Selamat mencoba... Happy blogging :) Jika mengalami kesulitan tinggalkan pesan dikomentar...