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.

Slideshow Jquery 
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('http://lh4.ggpht.com/_f7ChQS4URE4/TJIhQ5YacCI/AAAAAAAABEA/DVbK4tBj5Uo/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);}
]]></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

Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

Tidak tahu cara berlangganan? Klik disini

Related Post:

Anda sedang membaca artikel tentang Cara Membuat Slideshow Jquery dan anda bisa menemukan artikel Cara Membuat Slideshow Jquery ini dengan url http://daw-xp.blogspot.com/2011/04/cara-membuat-slideshow-jquery.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Slideshow Jquery ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Slideshow Jquery sumbernya.


5 comments

Anonymous August 6, 2011 at 4:01 AM

Numpang nanya Gan..!!
Yang dimaksut dengan:
1. URL tujuan gambar
2. Lokasi URL gambar
3. Judul gambar
itu apa yach..?? klo agan gak keberatan boleh kasih contohnya tulisannya..? Makasih sebelumnya.

Reply delete
Deny Arya Wiranata August 6, 2011 at 10:34 AM

@Anonim : 1. contohnya kek gini : daw-xp.blogspot.com

2. contohnya kek gini : http://lh3.ggpht.com/_f7ChQS4URE4/TJKLrmOmT9I/AAAAAAAABEY/968zPqg8COE/SlideshowV1.jpg

3. contohnya : Gambar Saya

Reply delete
Anonymous August 7, 2011 at 1:53 AM

Permisi mas...
1.Supaya gambar headernya terlihat full size harus pakai ukuran kali berapa pixel..?
2.Sebaiknya pakai format gambar apa..?
3.Ada effect gak kira-kira dengan start loadingnya nanti..? sebab saya lihat di beberapa blog tetangga ada yang macet-macet slide shownya.
4.Kalau mas ada waktu,mampir sebentar yach ke blog saya
Arthumewu.blogspot.com
5.Makasih banyak sebelumnya.....

Reply delete
hezty tatawarna December 25, 2013 at 5:49 PM

slide show itu sama aja kayak slider kan ??

Reply delete
BandarSakongOnline July 13, 2017 at 3:38 PM

Qbandar Agen Sakong Online | Capsa Susun | Bandar Poker | Judi Domino99 | BandarQ | AduQ | Poker Texas Indonesia

Mengadakan Kontes SEO dengan TOTAL HADIAH Rp.30.000.000 untuk 20 Pemenang :
Ikuti dan Daftarkan diri Anda untuk menguji kemampuan SEO anda
Siapkan website terbaik Anda untuk mengikuti kontes ini.

Dengan Keyword : Agen BandarQ Judi Sakong Bandar Poker Online Terpercaya QBANDAR

Tanggal : 10 Mei 2017 sampai 25 Juli 2017

Selengkapnya : http://QBandar.org/Kontes/

Buktikan bahwa Anda adalah Ahli MASTER SEO disini.
Saat yang tepat untuk mengetest kemampuan SEO Anda dengan tidak sia-sia.

Tunggu apa lagi? Ikuti kontes ini sekarang juga!

Reply delete

Post a Comment

Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).

 

Site Info

  • Fortuner SUV Terbaik
  • Commonwealth Life Perusahaan Asuransi Jiwa Terbaik Indonesia
  • Cincin Kawin
  • PageRank

    Followers

    back to topReturn to top of page Copyright © 2012 | Blog SEO DAW - XP | Tutorial Blogspot | Belajar SEO Blogspot - Privacy Policy Template by Hack Tutors