Cara Membuat Slideshow Jquery

Mungkin untuk blogger awam masih bingung apa itu slideshow. Namun pada gambar di samping kita pasti sudah tahu apa itu slideshow. Yaps, slideshow adalah gambar yang berjalan. Anda dapat melihat contoh dari slideshow pada atas widget blog ini.

Kali ini kita akan mempelajari membuat slideshow tsb dalam versi ringan, jadi kita bisa mempercantik tampilan blog kita, tanpa banyak menambah berat loading page.

Slideshow yang akan kita buat kali ini,ditambahkan efek yang tidak kalah sama Slideshow lainnya di luar sana. Namun, bedanya adalah pengunaan kode yang lebih di fokuskan ke teknik pewarnaan dan efek mengunakan CSS3. Oleh karena itu, Slideshow ini mampu 50% lebih cepat dari Slideshow lain yang se-tipe.

Klik pada gambar di bawah ini untuk melihat preview tampilan Slideshownya.

 

Udah liat..? Kalo pengen buat slideshow seperti itu juga di template sobat, ikutin aja tutorialnya berikut ini.. Cekidot..!

* Seperti biasa, masuk dulu ke account blogger sobat. Kemudian pilih Design/Rancangan terus masuk ke TAB Edit HTML.

* Cari kode ]]></b:skin> , kemudian ganti kode tersebut dengan kode di bawah ini.

/* Slider content------- */ 
#slider{width:500px;height:280px;background:-moz-linear-gradient(top, #000, #999, #000);position:relative;overflow:hidden;}
#slider #sizzles{float:left;width: 500px;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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5xO-kS2D_da4V74iQgBtcODX_seu3y-82J2Q1iy1-HRzs7Aiu4TXUi3vx3PnTpJodzuZY_1rnU0f4eNqmRs5j2f79gHxJ5RTDTQdG4QZZKviTT7bE93MMrK58TVrp5nsYO0MQCMTAbfc/') 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);}

]]></b:skin>

* Save template.

* Sekarang masuklah ke TAB Page Elements. Klik Add a Gadgets lalu pilihlah HTML/Javascript.

* Masukkan kode di bawah ini.

<script type="text/javascript" src="http://h1.ripway.com/keichiro/JavaScript/jquery.js"></script>
<script type="text/javascript" src="http://h1.ripway.com/keichiro/JavaScript/slideshowleo.js"></script>

<div id="slider">
<div id="sizzles">

<a href="URL Tujuan Gambar0"><img id="sizzleImg0" src="Lokasi URL Gambar0" style="display: none;"/></a>
<div id="sizzle_title0" class="sizzle_title">
<a href="URL Tujuan Gambar0">Judul Gambar0</a>
</div>

<a href="URL Tujuan Gambar1"><img id="sizzleImg1" src="Lokasi URL Gambar1" style="display: none;"/></a>
<div id="sizzle_title1" class="sizzle_title">
<a href="URL Tujuan Gambar1">Judul Gambar1</a>
</div>

<a href="URL Tujuan Gambar2"><img id="sizzleImg2" src="Lokasi URL Gambar2" style="display: none;"/></a>
<div id="sizzle_title2" class="sizzle_title">
<a href="URL Tujuan Gambar2">Judul Gambar2</a>
</div>

<a href="URL Tujuan Gambar3"><img id="sizzleImg3" src="Lokasi URL Gambar3" style="display: none;"/></a>
<div id="sizzle_title3" class="sizzle_title">
<a href="URL Tujuan Gambar3">Judul Gambar3</a>
</div>

<a href="URL Tujuan Gambar4"><img id="sizzleImg4" src="Lokasi URL Gambar4" style="display: none;"/></a>
<div id="sizzle_title4" class="sizzle_title">
<a href="URL Tujuan Gambar4">Judul 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>

* Ganti kode berwarna merah dengan URL tujuan gambar, alias Link yang terbuka saat gambar/judul di klik.
* Ganti kode berwarna biru dengan URL Gambar, alias Alamat URL tempat gambar sobat di simpan.
* Ganti kode berwarna hijau dengan Judul Gambar, alias judul dari link gambar yang tampil.

* Jika sudah selesai, tinggal di save aja deh.

* Liat hasilnya.

( Note: Lebar dan tinggi Gambar pada Slideshow di atas defaultnya berukuran 500x250. Sobat bisa mengubahnya sesuai dengan kriteria template sobat masing-masing. )

Referensi: thanks to Leo