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