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 dbawah ini kemudian paste tepat diatas kode ]]></b:skin>

/* Slider content------- */
#slider{width:660px;height:300px;background:-moz-linear-gradient(top, #000, #999, #000);position:relative;overflow:hidden;}
#slider #sizzles{float:left;width: 660px;position:absolute}
#slider #sizzles img{width:490px;height:250px;position:absolute;margin:5px;}
#slider .sizzle_caption{position:absolute;margin-top:15px;margin-left:5px;font-weight:bold;color:white;font-size:15px;}
#slider .sizzle_title{ background:url('https://lh5.googleusercontent.com/_1j80TgNqd_8/TZhXhr7KQoI/AAAAAAAACRs/VROYvunh7Uc/bgslider.png') repeat transparent;position:absolute;margin:0px;left:5;top:55px;height:100px;font-size:17px;color:white;line-height:12px;padding:0px 10px;}
#slider .sizzle_title a{color:#54a9fe;font:20px calibri;font-weight:bold;text-shadow:0px 1px 0px #00a;}
#slider .sizzle_title a:hover{color:#8ec6fe;}
#slider #sizzle_items{background:-moz-linear-gradient(top, #000, #999, #000);position:absolute;bottom:0;left:0;line-height:10px;width:100%;padding:10px;}
#slider #sizzle_items,#subHeader #sizzle_items a{color:#fff;font-size:14px;font-family:Calibri, Helvetica Neue, Liberation Sans, sans-serif;font-weight:700;cursor:pointer;}
#slider #sizzle_items a:hover{color:#000 !important;}
#slider .title a{font-size: 18px;color:#888;line-height:25px;}
#slider .title h1{font-size:37px;margin:0px;padding:0px;color:#333;}
.pagehal{padding: 2px 8px;margin-right:5px;border:1px solid #444;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;background:-moz-linear-gradient(top, #eee, #666);}
.pageaktif {color:#fff;text-shadow:0 1px 2px #333;padding: 2px 8px;margin-right: 5px;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;border:1px solid #444;background:-moz-linear-gradient(top, #8bc3fb, #0080ff);}

7. Yang berwarna merah merupakan lebar dan tinggi dari tampilan slide show. Dapat anda ganti sesuai dengan keinginan.

8. Klik tombol Simpan Template.

Langkah Kedua

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

<script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/jquery.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/slideshow.js"></script>
<div id="slider">
<div id="sizzles">

<a href="Url/link target dari gambar 0"><img id="sizzleImg0" src="Url/Alamat gambar yang ditampilkan0" style="display: none;"/></a>
<div id="sizzle_title0" class="sizzle_title">
<a href="URL /link targetdari judul0">Judul/keterangan Gambar0</a>
</div>
<a href="Url/link target dari gambar1"><img id="sizzleImg1" src="Url/Alamat gambar yang ditampilkan1" style="display: none;"/></a>
<div id="sizzle_title1" class="sizzle_title">
<a href="URL /link targetdari judul1">Judul/keterangan Gambar1</a>
</div>
<a href="Url/link target dari gambar2"><img id="sizzleImg2" src="UrlAlamat gambar yang ditampilkan2" style="display: none;"/></a>
<div id="sizzle_title2" class="sizzle_title">
<a href="URL /link targetdari judul2"&gt">Judul/keterangan Gambar2</a>
</div>

<a href="Url/link target dari gambar 3"><img id="sizzleImg3" src="Url/Alamat gambar yang ditampilkan3" style="display: none;"/></a>
<div id="sizzle_title3" class="sizzle_title">
<a href="URL /link targetdari judul3">Judul/keterangan Gambar3</a>
</div>
<a href="Url/link target dari gambar 4"><img id="sizzleImg4" src="Url/Alamat gambar yang ditampilkan4" style="display: none;"/></a>
<div id="sizzle_title4" class="sizzle_title">
<a href="URL /link targetdari judul4">Judul/keterangan Gambar4</a>
</div>
<div class="clear"></div>
</div>
<div id="sizzle_items">
<a id="sizzle_item_0" class="pagehal" onclick="slider.home.header.expand(0);">1</a>
<a id="sizzle_item_1" class="pageaktif" onclick="slider.home.header.expand(1);">2</a>
<a id="sizzle_item_2" class="pagehal" onclick="slider.home.header.expand(2);">3</a>
<a id="sizzle_item_3" class="pagehal" onclick="slider.home.header.expand(3);">4</a>
<a id="sizzle_item_4" class="pagehal" onclick="slider.home.header.expand(4);">5</a>
</div>
<script type="text/javascript">
slider.home.header.items[0] = [0];
slider.home.header.items[1] = [1];
slider.home.header.items[2] = [2];
slider.home.header.items[3] = [3];
slider.home.header.items[4] = [4];
slider.home.header.set_timer();
</script>

NB:

Tulisan Url/link target dari gambar (warna kuning) merupakan link target untuk gambar yang tampil
Tulisan UrlAlamat gambar yang ditampilkan (warna hijau) merupakan alamat gambar yag ditampilkan
Tulisan URL /link targetdari judul (warna merah) merupakan link target dari uraian / keterangan dari gambar
Tulisan Judul/keterangan Gambar (warna merah tua) merupakan uraian / keterangan dari gambar (bisa hanya berupa judul)

4. Jika ingin menambahkan tampilan slide show dengan beberapa gambar lain. pelajari dulu kode-kode diatas. Setelah memahami, silakan anda tambahkan seberapa anda suka.

5. Setelah selesai mengedit kode-kode diatas, jangan lupa klik tombol Simpan.

6. Lihat blog anda sekarang.

♂ 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