Friday, August 19, 2011

Tips Membuat Image Rotator Show-Hide Dengan JQuery

Image rotator show-hide adalah sebuah widget yang berfungsi untuk menampilkan satu per satu image dan image lainnya akan di tampilkan secara bergantian. Apabila sobat suka memasang banyak banner atau gambar di blog, widget ini mungkin pantas untuk di pertimbangkan. Sobat juga bisa memasukkan link atau url dalam gambar tersebut.

Untuk lebih jelasnya silahkan lihat preview demonya disini


Apabila anda tertarik berikut langkah-langkahnya :
1. Login ke akun blogger anda
2. Klik Rancangan > Elemen Laman > Edit Html
3. Kemudian cari kode </head> dan copy-paste kode berikut sebelum kode </head>

<script type="text/javascript" src="https://sites.google.com/site/mariozoner/gb-mario/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/mariozoner/gb-mario/jquery.innerfade.pack.js"></script>
   
<script type="text/javascript">
       $(document).ready(
                function(){
                    $('ul#banneriklan').innerfade({
                        speed: 1000,
                        timeout: 5000,
                        type: 'sequence',
                        containerheight: '180px'
                    });
            });
      </script>

Perhatikan kode yang saya beri warna hijau
  • speed: 1000 : adalah kecepatan pergantian image/banner
  • containerheight: '180px' : adalah tinggi kontainer
Silahkan anda setting sesuai keinginan anda

4. Lanjut ke langkah berikutnya, cari kode ]]></b:skin> dan copy-paste kode CSS berikut di atas kode ]]></b:skin>

#bannerrot {margin: 0; padding:0;}
#bannerrot ul, #bannerrotate ol{list-style:none; margin:0; padding:0;}
ul#banneriklan li img{border: 1px solid #ccc;padding: 4px; margin: 0; list-style-type:none}
ul#banneriklan li a{text-decoration: none;}

5. Klik Simpan Template.
6. Kemudian masuk ke menu Rancangan > Elemen Laman > Tambah Gatget > HTML/JavaScript
7. Copy-paste kode HTML dibawah ini

<div id="bannerrotate">
<ul id="banneriklan">                   
<li><a href="link tujuan" target="_blank" title="tittle banner/image"><img src="alamat url image anda" /></a></li>               
<li><a href="link tujuan" target="_blank" title="tittle banner/image"><img src="alamat url image anda" /></a></li>                   
<li><a href="link tujuan" target="_blank" title="tittle banner/image"><img src="alamat url image anda" /></a></li>
</ul>           
</div>

8. Jangan lupa klik Simpan dan lihat hasilnya.

Jangan lupa tinggalkan komentarnya. Semoga bermanfaat.


Related Post

6 comments:

  1. Seeepp...!!!
    gak sia-sia gan ane follow and kasih saran..
    ilmu ane makin nambah....
    Thanks gan...
    keep posting..
    klo boleh request ane minta bikinin posting cara bikin slider keren dibawah header...
    soalnya ane mau pasang di blog ane yang satunya..
    ne linknya..
    http://infogame-online.blogspot.com/

    ReplyDelete
  2. @Ngalor Ngidul:thanks gan atas pujiannya...

    requestnya segera dilaksanakan n ane buat yang pake jquery yach gan biar tambah keren n loadingnya cepet. :)

    thanks udah berkunjung

    ReplyDelete
  3. @emporium : sama2 sob salam kenal kembali :D

    ReplyDelete

Mohon tinggalkan jejak/komentar sobat disini. Dilarang SPAM. Okey...