Cari Artikel Blog Ini

Total Tayangan Halaman

JQUERY SLIDE SHOW VERSI 2

Slide show dengan file jquery js ini memiliki kelebihan tersendiri karena dalam tampilannya memiliki 2 link target yaitu lin target untuk gambar dan link target untuk judul atau uraian singkat dari gambar.
Kegunaan slide show pada dasarnya sama, bisa dijadikam media promosi suatu produk atau untuk menampilkan bagian blog yang penting untuk diketahui oleh pengunjung.

Demo : Perhatikan gambar diwawah ini :



CARA MEMBUAT

LANGKAH PERTAMA
  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. 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 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"&gt;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>
  5. Keterangan :
    1. Tulisan Url/link target dari gambar (warna kuning) merupakan link target 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 target dari uraian / keterangan dari gambar
    4. Tulisan Judul/keterangan Gambar (warna merah tua) merupakan uraian / keterangan dari gambar (bisa hanya berupa judul)
  6. Jika ingin menambahkan tampilan slide show dengan beberapa gambar lain. pelajari dulu kode-kode diatas. Setelah memahami, silakan anda tambahkan seberapa anda suka.
  7. Setelah selesai mengedit kode-kode diatas, jangan lupa klik tombol Simpan.
  8. Lihat blog anda sekarang.


Selamat mencoba, semoa bermanfaat...!!!

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
4 Comments

4 komentar :

A. Jauhari mengatakan...

dah di coba cuma sayang versi 2. cuma tex pesan kenapa g bisa ketengah. sayang sang guru nya jarang online nih...? Kalo memang Bpk. sedang Kurang Enak Badan Mudah2an cepet fit kembali... Biar saya bisa tanya langsung

sarastiono mengatakan...

Wah terimakasih sekali....coba saya pakai nih. salam kenal.

firmanu swantara mengatakan...

sipp gan

IRAWAN mengatakan...

sama bung saya juga gitu masalahnya, suaya pict dan teksnya ketengah seperti slide 1 bagaimana solusinya bung ?

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!