0 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 tampilan slideshow nya, klik disini

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;}

lay:none;}

ul#bannerimg li a{text-decoration: none !important;}
#banner_2, #banner_3, #banner_4 {dis

p

• 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' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

<script type='text/javascript' src='http://medienfreunde.com/lab/innerfade/js/jquery.innerfade.js'/>

<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" (Baca keterangan)

Keterangan:

• Jika template blogger anda sudah ada framework jQuery maka link pada langkah 6 baris 1 tidak perlu ditambahkan (dibuang).

• Efek yang digunakan secara default menggunakan jenis fade, jika ingin menggunakan jenis efek slide maka tambahkan code "animationtype: 'slide'," (tanpa tanda kutip) diata kode "speed: 1000," (Langkah 6 baris 7).

• Secara default lebar wadah/container sudah diset otomatis, kita hanya perlu mengeset tinggi wadah/container (Lihat langkah 6 baris 10) pada kode "containerheight: '220px'" (tanpa tanda kutip). Ubah nilai 220px sesuai dengan ukuran tinggi gambar yang akan kita gunakan.

• Jumlah slide/banner yang akan kita gunakan sebenarnya tidak terbatas, tapi disini hanya menggunakan 4. Jika anda ingin menambahkan jumlah slide/banner silahkan tambahkan kode dibawah ini sejumlah yang kita perlukan (Lihat langkah 10):

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

• Ubah URL sesuai dengan link yang akan kita arahkan pada saat pengunjung mengklik gambar.

• Ubah URL Gambar sesuai dengan tempat (file hosting) dimana kita menyimpan gambar tersebut.

• Ubah Keterangan Gambar sesuai dengan judul atau maksud gambar tersebut.

Selamat mencoba dan semoga berhasil... Happy Blogging :)

sumber