Membuat JQuery Slide Show Versi 2 Pada Tutorial Jquery Slide Show kali ini akan membahas tentang JQuery Slide Show Versi 2 dan cara membuatnya.
Untuk contohnya bisa di lihat gambar di bawah ini:
LANGKAH 1
1. Masuk ke Blogger
2. Pilih Rancangan bagian Edit HTML.
3. 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);}
4. Lebar dan tinggi dari tampilan slide show. Dapat anda ganti sesuai dengan keinginan.
5. Klik tombol Simpan Template.
LANGKAH 2
1. Masuk ke Rancangan bagian Elemen Halaman.
2. Klik Tambah Gadget.
3. Pilih HTML/Javascrript.
4. Copy kode dibawah ini kemudian 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 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">">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>
Keterangan :
1. Tulisan Url/link target dari gambar merupakan link target untuk gambar yang tampil
2. Tulisan UrlAlamat gambar yang ditampilkan merupakan alamat gambar yag ditampilkan
3. Tulisan URL /link targetdari judul merupakan link target dari uraian / keterangan dari gambar
4. Tulisan Judul/keterangan Gambar 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 selesai mengedit kode-kode diatas, jangan lupa klik tombol Simpan.
7. Lihat blog anda sekarang.
Selamat Mencoba semoga berhasil...
Read more: http://epg-studio.blogspot.co/
0 komentar
Posting Komentar
Maaf' Komentar Link Akan Di Hapus..@@!!