Pembaharuan: 1 Desember 2013
Saya memakai versi terakhir dari SLIDES yaitu pada 5 Februari 2013 (versi 1.2.0):
Tahap 1: Mengedit Tema
Untuk membuatnya, pertama-tama masuklah ke sajian Tema kemudian klik Edit HTML dan klik Lanjutkan:
Temukan aba-aba ini:
]]></b:skin>
Salin aba-aba di bawah ini, kemudian letakkan di atasnya:
/*! SlidesJS for Blogger by Taufik Nurrohman <http://gplus.to/tovic> */ /* Main */ .slidesJS-frame { width:739px; height:341px; background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia_JQNzcv_w1fChb4OAfJOkd4f_xFYo9whzxAcLm1QQN9AGwRd55hLgp2jza95j9N-VXqXKgQIJOcydEw1nmxXh5ltxcMgyeIg3MM1GaePLFlLzVkbNEP36ljWXfGxX23vOBiO6Admj4Q/s1600/slidesJS-frame.png') no-repeat 50% 50%; margin:0 auto; } .slidesJS { background-color:#F0F0F0; position:relative; top:18px; left:84px; } .slidesJS-container { position:relative; overflow:hidden; display:none; } /* Next & Prev */ .slidesJS-next, .slidesJS-prev { position:absolute; top:50%; left:-39px; width:24px; height:43px; margin-top:-21px; background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkDURIj1EylF9YkPO49G_99Adb26Gz64QfatdsMra9TWczHvJLlFaXZUAmupDoQCUst1-JfPaQnlKttqWlIVwe9lZ8lMT38y8ZFlSpIO-OIl5ju6fsRnNNvJZJLWBtbXS5ljRqyqqfiTs/s1600/slidesJS-arrow-prev.png') no-repeat 50% 50%; display:block; overflow:hidden; text-indent:-9999px; } .slidesJS-next { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXTB6_kISmLHjYQkJIQgBSgmuiZ1Vsr4SeDLVuan3zxNiqhN9kfZpSeOPY6Ob9MqgJMELidD2Huc3Hg5kbq2YK108QEA0pUU6a7ZjGdh-BEClFDWRN24oiop-f9cyxi3_5uGH8zU6uEN4/s1600/slidesJS-arrow-next.png'); right:-39px; left:auto; } /* Pagination */ .slidesJS-pagination { list-style:none; margin:26px auto 0; padding:0; width:auto; text-align:center; } .slidesJS-pagination li { display:inline-block; *display:inline; margin:0 1px; padding:0; list-style:none; } .slidesJS-pagination a { display:block; width:12px; height:12px; background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjNFDDdTstpxNPzJJ75_jHWwBNcqbuft6lS9di4hamUkM5cFMv9UIZraEPem3G_IDK_iapdfL0WetLzciMTGC18EAxyRFbPw1VucbwC7mO7sHJ9Xo9JYHtJhyy12l0in9R1Y83nKrHSK8/s1600/slidesJS-pagination.png') 50% 0; text-indent:-999px; overflow:hidden; } .slidesJS-pagination li.current a {background-position:0 -12px} /* Caption */ .slidesJS-caption { display:none; position:absolute; right:0; bottom:0; left:0; z-index:500; padding:5px 20px 10px; background-color:black; background-color:rgba(0,0,0,.5); font:normal normal 13px/1.33 Helmet,Freesans,Sans-Serif; color:white; border-top:1px solid black; text-shadow:none; } .slidesJS-title a { color:white; text-decoration:none; } .slidesJS-title a:focus, .slidesJS-title a:hover {text-decoration:underline} .slidesJS-meta:before {content:" - "} .slidesJS-meta-comment {display:none} /* Ribbon */ .slidesJS-ribbon { display:block; /* display:none; <= uncomment this declaration to hide the ribbon */ width:112px; height:112px; position:absolute; top:-19px; left:-19px; z-index:500; background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZWhh7YlFB3V7PP1J6q61WE-Dct5RfDyfPoKOrW_8NvL4iytTOz8DiH0A0joW2jH6ElFtNHcOAhh3eNVp2ueGoQrIP6RSf2HXsYbXDBdW5vZops9afh83ED73qIokrO5Arnlvs3NN4osc/s1600/slidesJS-ribbon.png') no-repeat 0 0; }Klik Simpan Tema.
Tahap 2: Meletakkan Slideshow
Masuklah ke sajian Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bab atas posting:
Salin aba-aba di bawah ini kemudian letakkan di dalam formulirnya:
<div class="slidesJS-frame" id="slidesJS-frame"> <div class="slidesJS" id="slidesJS"></div> </div> <div style="clear:both;"></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script> var slidesJS_config = { url: 'http://nama_blog.blogspot.com', numPost: 7, labelName: null, monthArray: [ "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ], noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC', newTabLink: false, containerId: 'slidesJS', slider: { width: 570, height: 270, preload: true, preloadImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhEzj_H9pYPjxlqLhF5ZMUGQw0ggXgpt4rQ78jnhtfOjjyxkMbWVyUW1KvRVjdSTHIA8IvBW08IR7-HkrRxcHc12Z7_NHQDb6tF8PQuohztlxDXwMpJOPhGbLe4f4FEJaz0Ti8XsPBEtk/s1600/slidesJS-loading.gif", generateNextPrev: true, nextText: "Berikutnya", prevText: "Sebelumnya", pagination: true, generatePagination: true, prependPagination: false, fadeSpeed: 350, fadeEasing: "", slideSpeed: 350, slideEasing: "", start: 1, effect: "slide", crossfade: false, randomize: false, play: 5000, pause: 0, hoverPause: true, bigTarget: false, animationStart: function(current) { $('.slidesJS-caption', '.' + this.container).slideUp(100); }, animationComplete: function(current) { $('.slidesJS-caption', '.' + this.container).slideDown(200); }, slidesLoaded: function() { $('.slidesJS-caption', '.' + this.container).slideDown(200); } } }; </script> <script src="//dte-project.googlecode.com/svn/trunk/blogger-slidesjs.js"></script>Ganti aba-aba yang Saya beri tanda dengan alamat blog Anda kemudian simpan.
Kode yang Saya beri garis bawah ialah jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan aba-aba tersebut!
Konfigurasi Widget
| Opsi | Keterangan |
|---|---|
| url | Ganti nilainya dengan URL blog Anda. |
| numPost | Digunakan untuk memilih jumlah posting yang ingin ditampilkan. |
| labelName | Ganti nilainya dengan nama label untuk menampilkan posting berlabel spesifik. Misalnya labelName: "jQuery" akan menciptakan slideshow hanya menampilkan posting yang mempunyai label jQuery. |
| monthArray | Daftar nama-nama bulan sesuai dengan sistem penanggalan di negaramu. |
| noImage | URL gambar cadangan untuk posting yang tidak mempunyai gambar. |
| newTabLink | Jika bernilai true, semua tautan pada slideshow akan membuka ke tab/jendela gres secara otomatis ketika diklik. |
| containerId | ID kontainer penampung widget. |
| slider => width | Digunakan untuk memilih lebar slideshow. |
| slider => height | Digunakan untuk memilih tinggi slideshow. |
| slider => preload | Jika bernilai false, efek animasi akan dimulai segera sesaat ketika JSON berhasil dimuat. Ini akan menciptakan halaman seolah termuat lebih cepat. Hanya saja, alasannya ialah animasi dimulai terlalu cepat (sebelum semua gambar termuat) akhirnya itu akan menciptakan animasi slideshow menjadi tidak rapi pada ketika permulaan. |
| slider => preloadImage | URL gambar animasi memuat slideshow. |
| slider => generateNextPrev | Jika bernilai false, navigasi Next & Prev tidak akan tampil. |
| slider => nextText | Label navigasi Next. |
| slider => prevText | Label navigasi Prev. |
| slider => generatePagination | Jika bernilai false, navigasi 1, 2, 3, … tidak akan tampil. |
| slider => prependPagination | Opsi untuk menyisipkan navigasi angka dari sebelah atas slideshow. Secara normal, navigasi angka akan disisipkan dari sebelah bawah. |
| slider => fadeSpeed | Digunakan untuk memilih kecepatan animasi jikalau opsi effect bernilai "fade". |
| slider => fadeEasing | Digunakan untuk memilih easing animasi jikalau opsi effect bernilai "fade". |
| slider => slideSpeed | Digunakan untuk memilih kecepatan animasi jikalau opsi effect bernilai "slide". |
| slider => slideEasing | Digunakan untuk memilih easing animasi jikalau opsi effect bernilai "slide". |
| slider => start | Digunakan untuk memilih urutan slide yang akan ditampilkan pertama kali. |
| slider => effect | Digunakan untuk memilih tipe efek animasi. Pilihannya ada dua: slide dan fade. |
| slider => crossfade | Digunakan untuk memilih apakah efek perpindahan slide (khusus efek fade) akan dilakukan dengan cara memudarkan slide yang tampil, kemudian pada ketika yang bersamaan menampilkan slide setelahnya (true) atau dengan cara memudarkan slide yang tampil, menunggu hingga efek pemudaran berakhir, kemudian slide berikutnya ditampilkan (false). |
| slider => randomize | Jika bernilai true, maka plugin akan berusaha untuk mengacak urutan slide. |
| slider => play | Digunakan untuk memilih usang waktu berhenti sementara sehabis animasi terjadi. |
| slider => pause | Digunakan untuk memilih usang waktu berhenti sementara sehabis pengguna mengeklik tombol navigasi. |
| slider => bigTarget | Jika bernilai true setiap gambar pada slide akan berfungsi sebagai navigasi. Ketika gambar tersebut diklik, maka slide berikutnya akan tampil. |
| slider => animationStart | Opsi untuk menerapkan fungsi bebas yang akan bekerja ketika animasi perpindahan slide dimulai. |
| slider => animationComplete | Opsi untuk menerapkan fungsi bebas yang akan bekerja ketika animasi perpindahan slide selesai. |
| slider => slidesLoaded | Opsi untuk menerapkan fungsi bebas yang akan bekerja ketika slideshow telah berhasil termuat. |
Contoh Penerapan Efek Fade
var slidesJS_config = { ... slider: { ... fadeSpeed: 350, fadeEasing: "", effect: "fade", ... } };Contoh Penerapan Easing
Untuk menerapkan efek percepatan kustom, plugin Easing jQuery diharapkan di sini:
var slidesJS_config = { ... slider: { ... slideSpeed: 1000, slideEasing: "easeInOutBack", effect: "slide", ... } };Contoh Penerapan crossfade: true
var slidesJS_config = { ... slider: { ... fadeSpeed: 350, fadeEasing: "", effect: "fade", crossfade: true ... } };Tema Polos untuk Modifikasi
Kode CSS ini ialah aba-aba minimal untuk pembentukan tata letak slideshow. Selebihnya dapat dimodifikasi sesuai dengan desain tema:
/* Main */ .slidesJS-frame { background-color:white; width:570px; /* samakan dengan lebar slideshow */ height:270px; /* samakan dengan tinggi slideshow */ border:4px solid black; margin:0 auto; } .slidesJS { background-color:#f0f0f0; position:relative; font:normal normal 11px/normal Helmet,Freesans,Sans-Serif; } .slidesJS-container { position:relative; overflow:hidden; display:none; } /* Next & Prev */ .slidesJS-next, .slidesJS-prev { display:block; float:left; background-color:black; color:white; font-weight:bold; text-decoration:none; height:20px; line-height:20px; padding:0 7px; margin:8px 0 0; overflow:hidden; } .slidesJS-next {float:right} /* Pagination */ .slidesJS-pagination { list-style:none; margin:8px auto 0; padding:0; width:auto; text-align:center; } .slidesJS-pagination li { list-style:none; display:inline-block; *display:inline; margin:0 2px; padding:0; } .slidesJS-pagination a { display:block; background-color:black; color:white; font-weight:bold; text-decoration:none; height:20px; line-height:20px; padding:0 7px; overflow:hidden; } .slidesJS-next:hover, .slidesJS-prev:hover, .slidesJS-pagination li.current a {background-color:blue} /* Caption */ .slidesJS-caption { display:none; position:absolute; right:0; bottom:0; left:0; z-index:500; padding:8px 10px 10px; background-color:black; background-color:rgba(0,0,0,.5); font:normal normal 13px/1.33 Helmet,Freesans,Sans-Serif; color:white; } .slidesJS-title a { color:white; text-decoration:none; } .slidesJS-title a:focus, .slidesJS-title a:hover {text-decoration:underline} .slidesJS-meta:before {content:" - "} .slidesJS-meta-comment {display:none} /* Ribbon */ .slidesJS-ribbon {display:none}