Membuat J-query banner dengan tampilan slide-show

Pada postingan kali ini kita akan membahas tentang tampilan banner dengan menggunakan slide-show.  Mungkin kita semua sudah tahu apa itu slide-show.
Slide show adalah tampilan gambar yang berganti secara otomatis, jadi bila kita memasang banner dengan menggunakan slideshow, maka gambar pada banner kita berganti secara otomatis. kalau kawan sekalian ingin melihat contoh tampilang slideshow nya, klik saja gambar yang disamping...
okeh langsung saja kita ke langkah-langkah cara pembuatannya..!!!




Dibawah ini langkah-langkah menggunakan slideshow pada banner :

Langkah 1
Login ke Blogger

Langkah 2
Masuk ke "Rancangan - Edit HTML"

Langkah 3
Cari kode dibawah ini:
]]></b:skin>
 
Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

#bannerrot {margin: 0; padding:0;}

#bannerrot ul, #bannerrot ol{list-style:none !important; margin:0 !important; padding:0 !important;}

ul#bannerimg li img{border: 1px solid #ccc;padding: 4px !important;margin: 0 !important;}

ul#bannerimg li a{text-decoration: none !important;}

#banner_2, #banner_3, #banner_4 {display:none;}
 
 
Langkah 5
Cari kode dibawah ini:
</head>
 
Langkah 6
Masukan (copy paste) kode jQuery dibawah ini diatas kode pada langkah 5:

<script type='text/javascript'>
$(document).ready(
  function(){
   $('ul#bannerimg').hide();
   $('ul#bannerimg:first').show();
   $('ul#bannerimg').innerfade({
    speed: 1000,
    timeout: 5000,
    type: 'sequence',
    containerheight: '220px'
   });
  }
 );
</script>





Langkah 7
Simpan template (Baca keterangan)

Langkah 8
Masuk ke "Rancangan - Elemen Laman"

Langkah 9
Tambahkan sebuah gadget dengan type "HTML/JavaScript"

Langkah 10
Masukan kode HTML dibawah ini didalam "konten":

<div id="bannerrot">
<ul id="bannerimg">
    
<li id="banner_1"><a href="URL" target="_blank"><img src="URL Gambar" alt="Keterangan Gambar" /></a></li>

<li id="banner_2"><a href="URL" target="_blank"><img src="URL Gambar" alt="Keterangan Gambar" /></a></li> 
   
<li id="banner_3"><a href="URL" target="_blank"><img src="URL Gambar" alt="Keterangan Gambar" /></a></li> 
   
<li id="banner_4"><a href="URL" target="_blank"><img src="URL Gambar" alt="Keterangan Gambar" /></a></li>

</ul>  
</div>






Langkah 11
Klik tombol "Simpan"

Semoga berhasil ya kawan, jangan lupa tuliskan komentar atau saran dari kawan sekalian


Share it to your friends..!

Share to Facebook Share this post on twitter Bookmark Delicious Digg This Stumbleupon Reddit Yahoo Bookmark Furl-Diigo Google Bookmark Technorati Newsvine Tips Triks Blogger, Tutorial SEO, Info

3 komentar:

  1. wah mantab brow, boleh di coba

  1. shah said...:

    Thank's banget bro BERHASIL!!!
    businessarrow.blogspot.com

  1. download film said...:

    artikel yg cukup bagus dan juga ulasannya cukup bagus dan detail bro karena itu aku suka sekali loe, dan salam kenal dari mico mas, dan juga sekalian bagi teman2 yg suka dengan film terbaru box office,horor,romantis,action,dan anime silakan kunjungi situs nya loe, karena itu gue dapat dari google dan menariknya di update tiap hari filmnya. dan makasi juga untuk admin disini bro sudah berkenan memberikan saya berkomentar loe, keep blogging bro, dan juga makasi ya,thanks gbu

Post a Comment

 
Ridho Technology © 2012 | Template by Ridho Technology