M-S Blog: JQuery

Showing posts with label JQuery. Show all posts

Membuat Tampilan Scrollbar Blog dengan JQuery

Merubah Tampilan Scrollbar Blog dengan JQuery - Merubah tampilan scrollbar pada blog terkadang diperlukan untuk menyesuaikan dengan desain blog itu sendiri. Perlu atau tidak perlunya tentunya tergantung pemilik blog itu sendiri, apakah ingin dibuat custom atau tetap standar. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0DJfa4DL2IKdg3TJWeF-ozmbUnCwmJozEnyO1u8qG4T9mpY06AB53Wr_BwX0me62QnIIg2sjTGOLwRHHosByAvQOL8PRAaTtN8BBkV5HGEUgcjyQqezIQZ9PLYQvtlpa1LD-8g0i9cMs/s1600/Scrollbar+Blog+dengan+JQuery.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Tampilan Scrollbar Blog dengan JQuery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0DJfa4DL2IKdg3TJWeF-ozmbUnCwmJozEnyO1u8qG4T9mpY06AB53Wr_BwX0me62QnIIg2sjTGOLwRHHosByAvQOL8PRAaTtN8BBkV5HGEUgcjyQqezIQZ9PLYQvtlpa1LD-8g0i9cMs/s1600/Scrollbar+Blog+dengan+JQuery.jpg" title="" /></a></div>
 Tutorial tentang merubah atau mengganti scrollbar sebetulnya sudah banyak, namun selama melakukan pencarian, kebanyakan menggunakan menggunakan CSS seperti ini 
<pre style="background-color: #2f3741; border-left-color: rgb(64, 98, 126); border-left-style: solid; border-left-width: 4px; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code class="css" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;">::-webkit-scrollbar{width:6px;background:#444}
::-webkit-scrollbar-thumb{background-color:#222;border-radius:3px}</code></pre>
 
<div class="catatan" style="background-color: #f8e38d; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom-style: solid; border-bottom-width: 1px; border-top-left-radius: 4px; border-top-right-radius: 4px; color: #555555; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px; padding: 15px 18px 15px 48px; position: relative;">
Dengan menggunakan CSS di atas, hanya support pada browser dengan komponen dasar WebKit seperti Safari, Chrome, browser iOS, Android dan Blackberry. Tetapi tidak support dengan browser lainnya seperti Mozilla, Opera dll.</div>
 Karena penggunaan CSS tidak support dengan semua browser, maka saya tawarkan penggunaan jQuery sebagai alternatifnya. Sebetulnya penggunaan custom scrol ini telah saya buat dalam posting sebelumnya yanitu dengan <a href="http://blog.kangismet.net/2013/12/jquery-cross-browser-custom-scrollbar.html" style="background-color: white; color: #21afa4; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px; text-decoration: none;" target="_blank">Tiny Scrollbar</a>. Namun penggunaan tiny scrolbar lumayan ribet dan belum bisa digunakan untuk browser itu sendiri, hanya pada elemen tertentu saja. 
<h4 style="background-color: white; color: #4a4a4a; font-family: Oswald, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 23.390625px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 20px !important; padding: 0px 0px 12px; text-transform: uppercase;">
PENGGUNAAN NICESCROLL</h4>
Untuk menggunakan NiceScroll, simpan kode ini di atas <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;"></head></code> 
<pre class="line-number" data-codetype="JQuery" style="background-color: #2f3741; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEH7xz_aRQ68Nbi9P7dslRHHG2OUDjANYQeA9PZwlZGdWBJpviHUXIg4nZ_8W-JlYYLdi2Vgq51EXZCtaBEj8b0ggTYjn_9jFL7dx2W_D1reHxu1tpQRV2jNhQlGje3hyphenhyphenNBd5w8uvvlFc/s1600/new-line-number.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-left-color: rgb(153, 194, 98); border-left-style: none; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em 0.8em 54px; position: relative; word-wrap: normal;"><code class="xml" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;"><script src='https://kang-is.googlecode.com/svn/trunk/javascript/nicescroll.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(
 function() { 
 $("html").niceScroll({});
 }
);
//]]>
</script></code></pre>
 Dengan kode di atas, maka otomatis scrollbar default akan berubah, namun hanya muncul ketika mouse diarahkan ke samping kanan blog. Untuk memunculkan scrollbar secara permanen, maka perhatikan kode pada baris ke 6, tambahkan kode <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">cursoropacitymin:1</code> menjadi  
<pre style="background-color: #2f3741; border-left-color: rgb(64, 98, 126); border-left-style: solid; border-left-width: 4px; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code class="css" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;">$("html").niceScroll({cursoropacitymin:1});</code></pre>
 Masih banyak pengaturan yang lainnya, silahkan sobat lihat di web pemilik NiceScroll ini. Disini saya hanya share beberapa pengaturan yang penting saja :  <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">background:"#ddd"</code> untuk merubah background (edit ddd) <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">cursorcolor:"#808080"</code> untuk merubah warna kursor (edit 808080) <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">cursorborder:"1px solid #565656"</code> merubah warna garis pinggir kursor (edit 565656) sehingga kode lengkap untuk baris no 6 adalah : 
<pre style="background-color: #2f3741; border-left-color: rgb(64, 98, 126); border-left-style: solid; border-left-width: 4px; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code class="css" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;">$("html").niceScroll({cursoropacitymin:1,cursorcolor:"#808080",cursorborder:"1px solid #565656",background:"#ddd"});</code></pre>
 Untuk menerapkan terhadap elemen tertentu, misal sobat membuat elemen dengan class <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">myscroll</code>, pada HTMLnya sobat harus menentukan tinggi atau <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">height</code>, menambah kode <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">overflow:hidden</code> dan tambahkan jarak pinggir kanan <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">padding-right:17px</code> pada CSS terpisah atau inline (langsung pada HTML) seperti ini : 
<pre style="background-color: #2f3741; border-left-color: rgb(64, 98, 126); border-left-style: solid; border-left-width: 4px; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code class="xml" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;"><div class='myscroll' style='height:200px;overflow:hidden;padding-right:17px'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae velit at velit pretium sodales. Maecenas egestas imperdiet mauris, vel elementum turpis iaculis eu. Duis egestas augue quis ante ornare eu tincidunt magna interdum. Vestibulum posuere risus non ipsum sollicitudin quis viverra ante feugiat. Pellentesque non faucibus lorem. Nunc tincidunt diam nec risus ornare quis porttitor enim pretium. Ut adipiscing tempor massa, a ullamcorper massa bibendum at. Suspendisse potenti.
</div></code></pre>
 langkah selanjutnya tinggal menambahkan kode sesuai selektor pada jQuery baris ke 6 tadi. menjadi seperti ini : 
<pre style="background-color: #2f3741; border-left-color: rgb(64, 98, 126); border-left-style: solid; border-left-width: 4px; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code class="css" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;">$("html, .myscroll").niceScroll({cursoropacitymin:1,cursorcolor:"#808080",cursorborder:"1px solid #565656",background:"#ddd"});</code></pre>
 Untuk menambahkan selektor, tinggal tambah pada jQuery di atas. Lebih mudah bukan? 
<h4 style="background-color: white; color: #4a4a4a; font-family: Oswald, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 23.390625px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 20px !important; padding: 0px 0px 12px; text-transform: uppercase;">
OPTIONAL</h4>
Untuk browser, setelah penggunaan NiceScroll ini akan menampilkan default scrollbar terlebih dahulu, baru kemudian diganti dengan NiceScroll setelah JavaScript tereksekusi. Untuk blog yang lambat akan terlihat perubahannya. Sebagai pilihan, agar scrollbar tidak ditampilkan, maka tambahkan <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">overflow:hidden</code> pada <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">body</code>. 
<pre style="background-color: #2f3741; border-left-color: rgb(64, 98, 126); border-left-style: solid; border-left-width: 4px; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code class="undefined" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;">body {
....
....
....
overflow:hidden
}
</code></pre>
 
<div class="resource" style="background-color: #e0ecff; border: 1px solid rgb(179, 197, 224); color: #666666; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 11px; padding: 5px 10px;">
Sumber : http://blog.kangismet.net/2013/12/merubah-tampilan-scrollbar-dengan-jquery.html</div>

Merubah Tampilan Scrollbar Blog dengan JQuery - Merubah tampilan scrollbar pada blog terkadang diperlukan untuk menyesuaikan dengan desain ...

16:27 +

Cara Membuat Slideshow modifikasi dengan JQuery

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="dte_post-body" itemprop="articleBody" style="border: 0px; font-size: 13px; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
<div class="separator center" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 0px 20px; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="http://3.bp.blogspot.com/-uyuyH5q_EsU/UEv_ns58weI/AAAAAAAAEp4/3FtE5MaaFwo/s1600/modifikasi-slideshow-jquery.png" style="color: #346c98; text-decoration: none;" title="Beberapa Contoh Modifikasi Slideshow JQuery"><img alt="Cara Membuat Slideshow modifikasi dengan JQuery" height="261" src="http://3.bp.blogspot.com/-uyuyH5q_EsU/UEv_ns58weI/AAAAAAAAEp4/3FtE5MaaFwo/s1600/modifikasi-slideshow-jquery.png" style="background-color: #eeeeee; border: none; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 4px; vertical-align: baseline;" title="Cara Membuat Slideshow modifikasi dengan JQuery" width="348" /></a></div>
<h2 style="border: 0px; font-size: 30px; font-variant: inherit; line-height: 1; margin: -10px 0px 10px; padding: 20px 0px 0px; vertical-align: baseline;">
 1. Slideshow dengan Caption</h2>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;">
Untuk membuat slideshow dengan caption, kita memerlukan beberapa langkah perubahan. Pertama-tama, kita ganti elemen <code style="border: 0px; color: #bc587e; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bdiv%20class%3D%22slide%22%26gt%3B&sa=Telusuri" style="text-decoration: none;" target="_blank" title="Telusuri makna kode ini"><div class="slide"></a></code> dengan <code style="border: 0px; color: #bc587e; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bimg%26gt%3B&sa=Telusuri" style="text-decoration: none;" target="_blank" title="Telusuri makna kode ini"><img></a></code>. Kemudian sisipkan elemen <code style="border: 0px; color: #bc587e; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bfigcaption%26gt%3B&sa=Telusuri" style="text-decoration: none;" target="_blank" title="Telusuri makna kode ini"><figcaption></a></code> ke dalam <code style="border: 0px; color: #bc587e; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%23slider&sa=Telusuri" style="text-decoration: none;" target="_blank" title="Telusuri makna kode ini">#slider</a></code>. Bagian inilah yang nantinya akan diisi oleh teks dari setiap item slider:</div>
<pre data-codetype="HTML" id="code-block:1" style="background-color: #292e34; border-left-color: rgb(98, 137, 152); border-left-style: solid; border-width: 0px 0px 0px 4px; color: #8e9081; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 12px; font-style: inherit; font-variant: inherit; line-height: 18px; margin-bottom: 20px; overflow: auto; padding: 10px 12px; vertical-align: baseline; word-wrap: normal;"><code class="xml" style="border: 0px; color: inherit !important; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #86aade; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">figure id="slider">
 <<span class="title" style="border: 0px; color: #86aade; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">div class="container">
 <<span class="title" style="border: 0px; color: #86aade; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">img src="img/slide-1.jpg" alt="Deskripsi gambar 1">
 <<span class="title" style="border: 0px; color: #86aade; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">img src="img/slide-2.jpg" alt="Deskripsi gambar 2">
 <<span class="title" style="border: 0px; color: #86aade; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">img src="img/slide-3.jpg" alt="Deskripsi gambar 3">
 <<span class="title" style="border: 0px; color: #86aade; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">img src="img/slide-4.jpg" alt="Deskripsi gambar 4">
 </<span class="title" style="border: 0px; color: #86aade; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">div>
 <mark style="background-color: #fad163; border: 0px; display: inline; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #86aade; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">figcaption></<span class="title" style="border: 0px; color: #86aade; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">figcaption>
</<span class="title" style="border: 0px; color: #86aade; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">figure>
<<span class="title" style="border: 0px; color: #86aade; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">nav id="slider-nav"></<span class="title" style="border: 0px; color: #86aade; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">nav></code></pre>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;">
Supaya lebih semantik, Saya juga telah mengganti elemen <code style="border: 0px; color: #bc587e; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%23slider&sa=Telusuri" style="text-decoration: none;" target="_blank" title="Telusuri makna kode ini">#slider</a></code> yang tadinya adalah elemen divisi menjadi elemen figur. Lihat kode di atas!</div>
<h3 style="border: 0px; font-family: Gnuolane_Regular, 'Gnuolane Regular', Gnuolane, 'Times New Roman', Times, serif; font-size: 25px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1; margin: -10px 0px 10px; padding: 20px 0px 0px; vertical-align: baseline;">
CSS</h3>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;">
Setelah itu kita set beberapa perubahan pada kode CSS:</div>
<pre data-codetype="CSS" id="code-block:2" style="background-color: #292e34; border-left-color: rgb(92, 145, 82); border-left-style: solid; border-width: 0px 0px 0px 4px; color: #8e9081; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 12px; font-style: inherit; font-variant: inherit; line-height: 18px; margin-bottom: 20px; overflow: auto; padding: 10px 12px; vertical-align: baseline; word-wrap: normal;"><code class="css" style="border: 0px; color: inherit !important; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">/* Slider */
#slider {
 display:block;
 position:relative;
}

/* Untuk caption */
#slider figcaption {
 display:block;
 background-color:black;
 font:normal normal 11px Arial,Sans-Serif;
 color:white;
 opacity:.8;
 padding:10px 15px;
 position:absolute;
 right:0;
 bottom:-100px; /* sembunyikan dengan cara ini :) */
 left:0;
 z-index:4;
}

#slider img {
 display:block;
 margin:0 0;
 width:300px; /* dimensi lebar */
 height:200px; /* dimensi tinggi */
 float:left;
}</code></pre>
<h3 style="border: 0px; font-family: Gnuolane_Regular, 'Gnuolane Regular', Gnuolane, 'Times New Roman', Times, serif; font-size: 25px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1; margin: -10px 0px 10px; padding: 20px 0px 0px; vertical-align: baseline;">
JQuery</h3>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;">
Tangkap satu objek lagi dan simpan ke dalam variabel <code style="border: 0px; color: #bc587e; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%24caption&sa=Telusuri" style="text-decoration: none;" target="_blank" title="Telusuri makna kode ini">$caption</a></code>, yaitu elemen <code style="border: 0px; color: #bc587e; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bfigcaption%26gt%3B&sa=Telusuri" style="text-decoration: none;" target="_blank" title="Telusuri makna kode ini"><figcaption></a></code>:</div>
<pre data-codetype="JQuery" id="code-block:3" style="background-color: #292e34; border-left-color: rgb(100, 95, 142); border-left-style: solid; border-width: 0px 0px 0px 4px; color: #8e9081; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 12px; font-style: inherit; font-variant: inherit; line-height: 18px; margin-bottom: 20px; overflow: auto; padding: 10px 12px; vertical-align: baseline; word-wrap: normal;"><code class="javascript" style="border: 0px; color: inherit !important; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$caption = $slider.find('figcaption');</code></pre>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;">
Setelah itu, kita harus mengubah logika animasi slideshow, karena di sini kita baru saja menambahkan elemen caption. Langkah animasinya seperti ini:</div>
<blockquote style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px; background-color: #796490; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px; color: white; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 0px 20px; padding: 20px 22px 20px 50px; position: relative; quotes: none; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;">
Pertama-tama, tampilkan teks slide awal ke dalam elemen <code style="border: 0px; color: pink; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bfigcaption%26gt%3B&sa=Telusuri" style="text-decoration: none;" target="_blank" title="Telusuri makna kode ini"><figcaption></a></code> sebagai awalan (dalam kasus ini Saya mengambil teks tersebut dari atribut <code style="border: 0px; color: pink; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=alt&sa=Telusuri" style="text-decoration: none;" target="_blank" title="Telusuri makna kode ini">alt</a></code> pada masing-masing gambar). Ke dua adalah langkah animasi. Urutannya:</div>
<ol style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; list-style-image: initial; list-style-position: outside; margin: 0px 0px 0px 20px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">Sembunyikan caption</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">Geser slider</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">Ganti teks caption dengan deskripsi yang baru, kemudian tampilkan caption.</li>
</ol>
</blockquote>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;">
Semuanya akan menjadi seperti ini:</div>
<pre data-codetype="JQuery" id="code-block:4" style="background-color: #292e34; border-left-color: rgb(100, 95, 142); border-left-style: solid; border-width: 0px 0px 0px 4px; color: #8e9081; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 12px; font-style: inherit; font-variant: inherit; line-height: 18px; margin-bottom: 20px; overflow: auto; padding: 10px 12px; vertical-align: baseline; word-wrap: normal;"><code class="javascript" style="border: 0px; color: inherit !important; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$nav.find('a').on("click", function() {
 $nav.find('.active').removeClass('active');
 $(this).addClass('active');
 var pos = $(this).index() * $slider.width(),

text = $slide.eq($(this).index()).attr('alt'); // Mengambil teks dari atribut alt pada gambar ke-`$(this).index()`

// (1) Menyembunyikan caption...
 $caption.stop().animate({bottom:'-100px'}, 400);

// (2) Menggeser slider...
 $container.stop().animate({left:'-'+pos+'px'}, 600, function() {

// (3) Mengganti teks caption dengan deskripsi yang baru...
 // kemudian tampilkan caption dengan efek animasi properti 'bottom'
 $caption.html(text).stop().animate({bottom:'0'}, 400);

});
 clearInterval(autoSlide);
 autoSlide = setInterval(slideShow, 3000);
 return false;
}).first().addClass('active');

// Sebagai awalan => tampilkan caption dengan deskripsi atribut alt dari slide pertama
$caption.html($slide.first().attr('alt')).stop().animate({bottom:'0'}, 600);</code></pre>
<h3 style="border: 0px; font-family: Gnuolane_Regular, 'Gnuolane Regular', Gnuolane, 'Times New Roman', Times, serif; font-size: 25px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1; margin: -10px 0px 10px; padding: 20px 0px 0px; vertical-align: baseline;">
Lainnya</h3>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;">
Slideshow berupa gambar membutuhkan waktu lebih lama untuk memuat. Dan saat proses pemuatan terjadi, biasanya kita akan melihat efek yang tidak bagus dari gambar yang terpotong-potong. Cara termudah untuk mengatasi itu adalah dengan menyembunyikan semua gambar terlebih dahulu sebelum termuat. Hingga saat gambar sudah termuat, kita bisa menampilkannya:</div>
<pre data-codetype="CSS" id="code-block:5" style="background-color: #292e34; border-left-color: rgb(92, 145, 82); border-left-style: solid; border-width: 0px 0px 0px 4px; color: #8e9081; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 12px; font-style: inherit; font-variant: inherit; line-height: 18px; margin-bottom: 20px; overflow: auto; padding: 10px 12px; vertical-align: baseline; word-wrap: normal;"><code class="css" style="border: 0px; color: inherit !important; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">/**
 * Tip yang baik untuk slideshow berupa gambar:
 * Sembunyikan tampilan sampai semua gambar benar-benar termuat...
 * ... agar saat gambar sedang dimuat, dia tidak merusak pemandangan kita :)
 */

// Tampilkan '.container', 'figcaption' dan '#slide-nav' saat halaman (semua gambar) telah termuat!
 $container.show();
 $caption.show();
 $nav.css('opacity',1);

// Kemudian jalankan interval slideshow...
 autoSlide = setInterval(slideShow, 3000);

});</code></pre>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;">
Sementara gambar sedang memuat, kita tampilkan efek animasi loading dengan menambahkan latar berupa <code style="border: 0px; color: #bc587e; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=loading.gif&sa=Telusuri" style="text-decoration: none;" target="_blank" title="Telusuri makna kode ini">loading.gif</a></code>agar slideshow menjadi lebih menarik dan komunikatif:</div>
<pre data-codetype="CSS" id="code-block:7" style="background-color: #292e34; border-left-color: rgb(92, 145, 82); border-left-style: solid; border-width: 0px 0px 0px 4px; color: #8e9081; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 12px; font-style: inherit; font-variant: inherit; line-height: 18px; margin-bottom: 20px; overflow: auto; padding: 10px 12px; vertical-align: baseline; word-wrap: normal;"><code class="css" style="border: 0px; color: inherit !important; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">#slider {
 background:white url('img/loading.gif') no-repeat 50% 50%;
}</code></pre>
<div class="button-group" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 0px 20px; padding: 0px; text-align: center; vertical-align: baseline;">
<a class="button demo" href="http://reader-download.googlecode.com/svn/trunk/simple-useful-jquery-slideshow_with-caption.html" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px; background-color: #5498c9; border-color: rgb(80, 142, 188) rgb(80, 142, 188) rgb(70, 121, 160); border-style: solid; border-width: 1px; box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px; box-sizing: border-box; color: rgb(232, 245, 255) !important; cursor: pointer; display: inline-block; font-family: Roboto_Regular, Roboto, 'Roboto Regular', 'Franklin Gothic Medium', 'Franklin Gothic Book', 'Lucida Sans', 'Lucida Sans Unicode', Helmet, Freesans, sans-serif; font-weight: bold; height: auto; margin: 1px; padding: 8px 14px; position: relative; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px; vertical-align: middle; white-space: nowrap; width: auto;" target="_blank" title="Akan lebih mudah dipahami saat Anda melihat kode sumbernya.">Lihat Demo</a></div>
<h2 style="border: 0px; font-size: 30px; font-style: inherit; font-variant: inherit; line-height: 1; margin: -10px 0px 10px; padding: 20px 0px 0px; vertical-align: baseline;">
2. Efek Fade</h2>
<h3 style="border: 0px; font-family: Gnuolane_Regular, 'Gnuolane Regular', Gnuolane, 'Times New Roman', Times, serif; font-size: 25px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1; margin: -20px 0px 10px; padding: 20px 0px 0px; vertical-align: baseline;">
CSS</h3>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;">
Pembuatan efek fade bisa dilakukan dengan perhitungan yang lebih sederhana:</div>
<blockquote style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px; background-color: #796490; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px; color: white; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 0px 20px; padding: 20px 22px 20px 50px; position: relative; quotes: none; vertical-align: baseline;">
Konsep dasar slideshow dengan efek <code style="border: 0px; color: pink; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=fade&sa=Telusuri" style="text-decoration: none;" target="_blank" title="Telusuri makna kode ini">fade</a></code> adalah: Semua gambar bertumpuk, dan masing-masing gambar bergantian menampilkan diri dengan efek peningkatan/penurunan pemudaran.</blockquote>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;">
Sehingga, kode CSS yang perlu kita ubah hanya ada pada bagian ini:</div>
<pre data-codetype="CSS" id="code-block:8" style="background-color: #292e34; border-left-color: rgb(92, 145, 82); border-left-style: solid; border-width: 0px 0px 0px 4px; color: #8e9081; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 12px; font-style: inherit; font-variant: inherit; line-height: 18px; margin-bottom: 20px; overflow: auto; padding: 10px 12px; vertical-align: baseline; word-wrap: normal;"><code class="css" style="border: 0px; color: inherit !important; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">#slider img {
 display:block;
 margin:0 0;
 width:300px;
 height:200px;
 /* Gunakan posisi absolut untuk menumpuk masing-masing slide satu sama lain */
 position:absolute;
 top:0;
 left:0;
}</code></pre>
<h3 style="border: 0px; font-family: Gnuolane_Regular, 'Gnuolane Regular', Gnuolane, 'Times New Roman', Times, serif; font-size: 25px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1; margin: -10px 0px 10px; padding: 20px 0px 0px; vertical-align: baseline;">
JQuery</h3>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;">
Setelah itu, ada beberapa bagian variabel yang bisa kita buang. Kita sudah tidak perlu lagi menggunakan variabel-variabel ini, karena semua slide kini berada dalam satu tumpukan!</div>
<pre data-codetype="JQuery" id="code-block:9" style="background-color: #292e34; border-left-color: rgb(100, 95, 142); border-left-style: solid; border-width: 0px 0px 0px 4px; color: #8e9081; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 12px; font-style: inherit; font-variant: inherit; line-height: 18px; margin-bottom: 20px; overflow: auto; padding: 10px 12px; vertical-align: baseline; word-wrap: normal;"><code class="javascript" style="border: 0px; color: inherit !important; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">var $slider = $('#slider'),
 $caption = $slider.find('figcaption'),
 $container = $slider.find('.container'),
 $nav = $('#slider-nav'),
 $slide = $container.children(),
 s_length = $slide.length,
 <del style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">s_wide = $slider.width() * s_length</del>,
 <del style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">s_height = $slider.height()</del>,
 autoSlide = null;</code></pre>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;">
Efek animasi bisa dibuat dengan JQuery <code style="border: 0px; color: #bc587e; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=.fadeIn()&sa=Telusuri" style="text-decoration: none;" target="_blank" title="Telusuri makna kode ini">.fadeIn()</a></code> dan <code style="border: 0px; color: #bc587e; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=.fadeOut()&sa=Telusuri" style="text-decoration: none;" target="_blank" title="Telusuri makna kode ini">.fadeOut()</a></code>. Seperti ini:</div>
<pre data-codetype="JQuery" id="code-block:10" style="background-color: #292e34; border-left-color: rgb(100, 95, 142); border-left-style: solid; border-width: 0px 0px 0px 4px; color: #8e9081; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 12px; font-style: inherit; font-variant: inherit; line-height: 18px; margin-bottom: 20px; overflow: auto; padding: 10px 12px; vertical-align: baseline; word-wrap: normal;"><code class="javascript" style="border: 0px; color: inherit !important; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$nav.find('a').on("click", function() {

$nav.find('.active').removeClass('active');
 $(this).addClass('active');

var pos = $(this).index() * $slider.width(),
 text = $slide.eq($(this).index()).attr('alt');
 $caption.stop().animate({bottom:'-100px'}, 400);

// Sembunyikan semua slide dengan efek .fadeOut() ...
 // ... kemudian tampilkan slide ke-`$(this).index()` dengan efek .fadeIn()
 $slide.fadeOut(600).eq($(this).index()).fadeIn(600, function() {
 $caption.html(text).stop().animate({bottom:'0'}, 400);
 });

clearInterval(autoSlide);
 autoSlide = setInterval(slideShow, 3000);

}).first().addClass('active');</code></pre>
<h3 style="border: 0px; font-family: Gnuolane_Regular, 'Gnuolane Regular', Gnuolane, 'Times New Roman', Times, serif; font-size: 25px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1; margin: -10px 0px 10px; padding: 20px 0px 0px; vertical-align: baseline;">
Lainnya</h3>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;">
Jangan lupa untuk menghilangkan latar animasi loading saat semua gambar sudah termuat:</div>
<pre data-codetype="JQuery" id="code-block:11" style="background-color: #292e34; border-left-color: rgb(100, 95, 142); border-left-style: solid; border-width: 0px 0px 0px 4px; color: #8e9081; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 12px; font-style: inherit; font-variant: inherit; line-height: 18px; margin-bottom: 20px; overflow: auto; padding: 10px 12px; vertical-align: baseline; word-wrap: normal;"><code class="javascript" style="border: 0px; color: inherit !important; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$(window).on("load", function() {
 $slider.css('background-image','none');
});</code></pre>
<div class="button-group" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: center; vertical-align: baseline;">
<a class="button demo" href="http://reader-download.googlecode.com/svn/trunk/simple-useful-jquery-slideshow_with-caption_with-fade-effect.html" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px; background-color: #5498c9; border-color: rgb(80, 142, 188) rgb(80, 142, 188) rgb(70, 121, 160); border-style: solid; border-width: 1px; box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px; box-sizing: border-box; color: rgb(232, 245, 255) !important; cursor: pointer; display: inline-block; font-family: Roboto_Regular, Roboto, 'Roboto Regular', 'Franklin Gothic Medium', 'Franklin Gothic Book', 'Lucida Sans', 'Lucida Sans Unicode', Helmet, Freesans, sans-serif; font-weight: bold; height: auto; margin: 1px; padding: 8px 14px; position: relative; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px; vertical-align: middle; white-space: nowrap; width: auto;" target="_blank" title="Akan lebih mudah dipahami saat Anda melihat kode sumbernya.">Lihat Demo</a></div>
</div>
</div>

Cara Membuat Slideshow modifikasi dengan JQuery

1. Slideshow dengan Caption Untuk membuat slideshow dengan caption, kita memerlukan beberapa langkah perubahan. Pertama-tama, kita ga...

02:19 +

M-S Blog

M-S Blog

M-S Blog

Membuat Tampilan Scrollbar Blog dengan JQuery

Cara Membuat Slideshow modifikasi dengan JQuery

Popular Posts

Blog Archive