Jquery Slide Show

Langkah Pertama :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Copy kode dibawah ini kemudian paste tepat diatas ]]></b:skin>

#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('https://lh4.googleusercontent.com/_1j80TgNqd_8/TZrSlSr0ZiI/AAAAAAAACSg/e2qwCQ5iGlA/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('https://lh4.googleusercontent.com/_1j80TgNqd_8/TZrSlQpwAFI/AAAAAAAACSk/ElAPHzwEvIQ/bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}

7. Selanjutnya copy kode dibawah ini kemudian paste tepat diatas kode </head>

<script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/jquery-ui.min.js" ></script>
<script>$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});</script>

NB :
►Kedua file js (warna kuning) yang digunakan diatas adalah file js simpanan EPG Studio. Dapat anda ganti dengan file js simpanan anda sendiri.
►Angka 5000 merupakan pengaturan kecepatan pergantian gambar slide show, semakin kecil angkanya semakin cepat pertukaran gambarnya. Silakan anda ganti dengan kecepatan yang anda inginkan.

8. Save

Langkah Kedua

1. Pilih Rancangan, Add Gadget kemudian klik HTML/Java Script.
2. Copy Paste script di bawah ini ke dalam gadget HTML/Java Script anda.

<div id="featured" > <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="alamat gambar 1" width="50px" height="50px" /><span>Keterangan gambar anda tulis disini, hanya ringkasannya saja</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="alamat gambar 2" width="50px" height="50px"/><span>Keterangan gambar anda tulis disini, hanya ringkasannya saja</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="alamat gambar 3" width="50px" height="50px" /><span>Keterangan gambar anda tulis disini, hanya ringkasannya saja</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="alamat gambar 4" width="50px" height="50px" /><span>Keterangan gambar anda tulis disini, hanya ringkasannya saja</span></a></li> </ul>  <div id="fragment-1" class="ui-tabs-panel" style=""> <img src="alamat gambar 1" /> <div class="info" > <h2><a href="#" >Judul postingan 1</a></h2> <p>Ringkasan uraian postingan dari judul postingan 1.......<a href="#" >Selengkapnya</a></p> </div> </div>  <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="alamat gambar 2" /> <div class="info" > <h2><a href="#" >Judul postingan 2</a></h2> <p>Ringkasan uraian postingan dari judul postingan 2.......<a href="#" >Selengkapnya</a></p> </div> </div>  <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="alamat gambar 3" /> <div class="info" > <h2><a href="#" >Judul postingan 3</a></h2> <p>Ringkasan uraian postingan dari judul postingan 3.......<a href="#" >Selengkapnya</a></p> </div> </div>  <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="alamat gambar 4" /> <div class="info" > <h2><a href="#" >Judul postingan 4</a></h2> <p>Ringkasan uraian postingan dari judul postingan 4.......<a href="#" >Selengkapnya</a></p> </div> </div> </div>

NB:

pengeditan pertama anda lakukan pada bagian atas yaitu untuk tampilan slide show bagian kanan:# kode tersebut anda ganti dengan alamat /url yang ingin anda tuju jika pengunjung mengklik gambar tersebut.
Kedua yaitu mengganti alamat gambar 1, 2, 3 dan 4 dengan alamat gambar yang ditampilkan. Gambar ini tampilannya telah disetting dengan ukuran lebar 50px dan tinggi 50px.
Ketiga (terakhir) ganti kalimat Keterangan gambar anda tulis disini, hanya ringkasannya saja, dengan uraian singkat dari gambar yang ditampilkan.
Berikutnya pengeditan kode bagian bawah (terdapat 4 pengeditan.
Pertama, ganti kalimat url/alamat gambar 1, 2, 3 dan 4 dengan alamat gambar yang sama ketika anda mengedit alamat gambar di bagian atas.
Kedua, mengganti # dengan alamat link yang apabila judul diklik oleh pengunjung akan dibawa ke halaman yang dituju oleh link tersebut.
Ketiga, mengganti kalimat Judul postingan 1, 2, 3 dan 4 dengan judul yang ngin anda tampilkan.
Keempat (terakhir), ganti kalimat Ringkasan uraian postingan dari judul postingan ....... 1, 2, 3 dan 4 dengan uraian singkat tentang gambar dan judul yang ditampilkan.
Ganti kata Selengkapnya dengan kata yang anda sukali, misalnya read more.
Sekali lagi, dalam bagian ini anda melakukan pengeditan dengan teliti jika hasil yang diinginkan tercapai dengan baik.
Setelah selesai pengeditan, klik tombol Simpan
Lihat Slide Show pada blog anda

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's