Cara Membuat Banner Bergerak Bolak Balik

Banner berupakan gambar yang ditampilkan pada halaman blog yang bertujuan memperkenalkan / mempublikasikan sesuatu. Banner biasanya digunakan sebagai alat untuk mengiklankan sesuatu, Banner juga kadang digunakan sebagai link bergambar yang mengarah pada sebuah alamt URL baik itu postingan artikel dan lain-lain.

Jika banner pada sebuah blog semakin banyak tentu ini akan menjadi sesuatu yang rancu, perlu dilakukan manage banner. Cara yang satu ini dapat digunakan untuk memanage banner karna dapat menampilkan banyak banner dalam satu deretan atau sekedar membuat banner Anda menjadi terlihat mencolok karna trik ini akan membuat banner bergerak secara bolak balik dan hanya akan berhenti jika disorot oleh kursor mouse.

Contoh Banner bergerak :




Sudah anda bayangkan jadinya kalau dipasang pada blog Anda.
Langkah pembuatan :
  1. Masuk pada akun Blogger Anda
  2. Pilih Rancangan >>  Elemen Laman >> Tambah Gadget pada tempat yang diinginkan
  3. Pilih HTML / JavaScirpt
  4. Pastekan kode berikut :

    <marquee align="center" behavior="alternate" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="340 px">
    <a href="URL Tujuan Gambar 1" target="_blank"><img border="0" height="80" src="URL Gambar Banner 1" width="130" /></a>
    <a href="URL Tujuan Gambar 2" target="_blank"><img border="0" height="80" src="URL Gambar Banner 2" width="130" /></a>
    <a href="URL Tujuan Gambar 3" target="_blank"><img border="0" height="80" src="URL Gambar Banner 3" width="130" /></a>
    <a href="URL Tujuan Gambar 4" target="_blank"><img border="0" height="80" src="URL Gambar Banner 4" width="130" /></a>
    <a href="URL Tujuan Gambar 5" target="_blank"><img border="0" height="80" src="URL Gambar Banner 5" width="130" /></a>
    </marquee><div style="font-size: 8px; text-align: right;">Widget by<a href="http://fauzischolovers.blogspot.com/2013/05/banner-berupakan-gambar-yang.html" target="_blank"> SCHOLOVERS blogger</a></div>

  5. Ganti :
    • width="340 px" ganti 340 menjadi total lebar banner Anda
    • height="80" ganti 80 menjadi tinggi banner Anda
    • width="130" ganti 130 menjadi lebar persatu banner Anda
    • URL Tujuan Gambar ganti menjadi alamat URL yang dituju oleh gambar
    • URL Gambar Banner ganti menjadi alamat URL gamabr banner yang akan tampil
  6. Setelah semuanya selesai Simpan tanpa memberikan judul widget dan lihat hasilnya
Selamat Mencoba & Happy Blogging

Comments