Jquery Slide Show Versi 2

Slide show dengan file jquery js ini mempunyai kelebihan tersendiri alasannya dalam tampilannya mempunyai 2 link sasaran yakni lin sasaran untuk gambar dan link sasaran untuk judul atau uraian singkat dari gambar.
Kegunaan slide show intinya sama, dapat dijadikam media promosi suatu produk atau untuk menampilkan bab blog yang penting untuk diketahui oleh pengunjung.

Demo : Perhatikan gambar diwawah ini :

CARA MEMBUAT

LANGKAH PERTAMA

1. Masuk ke Blogger
2. Pilih Rancangan bab Edit HTML.
3. Copy isyarat dbawah ini lalu paste sempurna diatas isyarat ]]></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);}

   
4. Yang berwarna kuning merupakan lebar dan tinggi dari tampilan slide show. Dapat anda ganti sesuai dengan keinginan.
5. Klik tombol Simpan Template.
   

LANGKAH KEDUA

1. Masuk ke Rancangan bab Elemen Halaman.
2. Klik Tambah Gadget.
3. Pilih HTML/Javascrript.
4. Copy isyarat dibawah ini lalu paste pada kolom yang tersedia.
   
   <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 sasaran 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 sasaran 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"&gt;Judul/keterangan Gambar1</a>
</div>
<a href="Url/link sasaran 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 sasaran 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 sasaran 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>

Keterangan :

1. Tulisan Url/link sasaran dari gambar (warna kuning) merupakan link sasaran untuk gambar yang tampil
2. Tulisan UrlAlamat gambar yang ditampilkan (warna hijau) merupakan alamat gambar yag ditampilkan
3. Tulisan URL /link targetdari judul (warna merah) merupakan link sasaran dari uraian / keterangan dari gambar
   
4. Tulisan Judul/keterangan Gambar (warna merah tua) merupakan uraian / keterangan dari gambar (bisa hanya berupa judul)
5. Jika ingin menambahkan tampilan slide show dengan beberapa gambar lain. pelajari dulu kode-kode diatas. Setelah memahami, silakan anda tambahkan seberapa anda suka.
6. Setelah final mengedit kode-kode diatas, jangan lupa klik tombol Simpan.
7. Lihat blog anda sekarang.
   

Selamat mencoba, semoa bermanfaat...!!!
Sumber http://epg-studio.blogspot.com/

Bagikan Artikel ini