Pembaharuan: 25 November 2013
Menjawab undangan dari It's a Hardlife, Saya mencoba untuk memodifikasi jQuery Carousel yang sederhana alasannya ialah slideshow versi Agile Carousel itu terlalu rumit. Saya mengambil TinyCarousel sebagai materi utama, yang pada awalnya hanya berupa slideshow gambar biasa untuk dimodifikasi lagi sesuai dengan tata letak slideshow Agile Carousel sehingga setiap slide menjadi lebih kaya akan konten:
Tahap 1: Mengedit Tema
Untuk membuatnya, pertama-tama masuklah ke sajian Tema kemudian klik Edit HTML dan klik Lanjutkan:
Temukan isyarat ini:
]]></b:skin>
Salin isyarat di bawah ini, kemudian letakkan di atasnya:
/*! * Custom TinyCarousel for Blogger by Taufik Nurrohman * Visit: http://www.dte.web.id */ .tinycarousel { overflow:hidden; font:normal normal 10px/12px Arial,Sans-Serif; color:#666; margin:0 auto; } .tinycarousel-viewport { overflow:hidden; position:relative; background-color:#eee; border:1px solid #ccc; margin:0 auto; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .tinycarousel-overview { list-style:none; margin:0; padding:0; position:absolute; left:0; top:0; } .tinycarousel-overview li { list-style:none; float:left; padding:0; height:auto; background-color:white; color:#666; } .tinycarousel-inner { padding:10px; border:1px solid #ccc; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; overflow:hidden; position:relative; } li .tinycarousel-inner {padding-bottom:48px} .tinycarousel-image { display:block; width:100%; height:auto; border:none; outline:none; margin:0; padding:0; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; } .tinycarousel-title { font:normal bold 11px/100% Verdana,Tahoma,Arial,Sans-Serif; color:#39f; margin:0 0 6px; padding:10px 0 0; background:none; } .tinycarousel-title a { color:inherit; text-decoration:none; border:none; } .tinycarousel-summary { margin:0; padding:0; overflow:hidden; } .tinycarousel-footer { color:#aaa; background-color:#333; background-image:-webkit-linear-gradient(#555,#333); background-image:-moz-linear-gradient(#555,#333); background-image:-ms-linear-gradient(#555,#333); background-image:-o-linear-gradient(#555,#333); background-image:linear-gradient(#555,#333); padding:0 10px; height:24px; line-height:24px; overflow:hidden; position:absolute; right:0; bottom:0; left:0; } .tinycarousel-footer-date {bottom:24px} .tinycarousel-navigation { display:block; background-color:white; border:1px solid #ccc; margin:2px auto 0; overflow:hidden; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .tinycarousel-navigation .tinycarousel-inner {border:none} .tinycarousel-button { background-color:#666; padding:2px 5px; overflow:hidden; position:relative; float:left; margin:0 2px 0 0; color:white; text-decoration:none; font-weight:bold; text-align:center; } .tinycarousel-navigation .disable {display:none} .tinycarousel-button:active {background-color:#900} .tinycarousel-total-posts { float:right; margin:2px 5px 0 0; font-weight:bold; font-size:120%; } /* Orientasi Vertikal */ .tinycarousel.vertical .tinycarousel-overview li { float:none; display:block; } .tinycarousel.vertical .tinycarousel-button, .tinycarousel.vertical .tinycarousel-total-posts { float:none; display:block; margin:0 0 2px; } .tinycarousel.vertical .tinycarousel-button.disable {display:none} .tinycarousel.vertical .tinycarousel-total-posts { text-align:center; margin-top:10px; margin-bottom: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 isyarat di bawah ini kemudian letakkan di dalam formulirnya:
<div id="tinycarousel-container" class="tinycarousel"></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script> var tinycarousel_config = { url: 'http://nama_blog.blogspot.com', numPosts: 12, labelName: null, containerId: 'tinycarousel-container', newTabLink: false, summaryLength: 100, monthArray: [ "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ], noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC', nav: { prevText: '<', nextText: '>', showText: 'Menampilkan {num} Posting' }, carousel: { axis: "x", itemwidth: 200, itemheight: 370, itemmargin: 5, itempadding:10, visible: 4, display: 1, start: 1, interval: true, intervaltime: 3000, animation: true, duration: 1000, easing: "swing", callback: function() {} } }; </script> <script src="//dte-project.googlecode.com/svn/trunk/blogger-tinycarousel.js"></script>Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda kemudian klik Simpan.
Kode yang Saya beri garis bawah ialah jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan isyarat tersebut!
Konfigurasi Widget
| Opsi | Keterangan |
|---|---|
| url | Ganti nilainya dengan URL blog Anda. |
| numPosts | Digunakan untuk memilih jumlah posting yang ingin ditampilkan. |
| labelName | Ganti nilainya menjadi nama label untuk menampilkan posting dengan label yang spesifik. Misalnya, memilih nilai labelName: "Widget" akan menciptakan widget ini menampilkan posting berlabel Widget saja. |
| containerId | ID kontainer penampung widget. |
| newTabLink | Ganti nilainya menjadi true untuk menciptakan semua tautan terbuka di tab/jendela gres secara otomatis. |
| summaryLength | Digunakan untuk memilih panjang ringkasan posting. |
| monthArray | Daftar nama-nama bulan sesuai dengan sistem penanggalan di negaramu. |
| noImage | URL gambar thumbnail pengganti untuk posting yang tidak mempunyai gambar. |
| nav => prevText | Teks navigasi mundur. |
| nav => nextText | Teks navigasi maju. |
| nav => showText | Teks indikator jumlah posting. |
| carousel => axis | Ganti nilainya menjadi "y" untuk menampilkan carousel vertikal. |
| carousel => itemwidth | Digunakan untuk memilih lebar masing-masing item carousel. |
| carousel => itemheight | Digunakan untuk memilih tinggi masing-masing item carousel. |
| carousel => itemmargin | Digunakan untuk memilih margin masing-masing item carousel. |
| carousel => itempadding | Digunakan untuk memilih padding masing-masing item carousel. |
| carousel => visible | Digunakan untuk memilih jumlah item yang ingin ditampilkan dalam satu baris. |
| carousel => display | Digunakan untuk memilih jumlah item yang akan tergeser dalam satu kali gerakan. |
| carousel => start | Digunakan untuk memilih indeks permulaan item (normalnya dimulai dari indeks pertama). |
| carousel => interval | Ganti nilainya menjadi false untuk menciptakan animasi berjalan secara manual (dengan cara mengeklik tombol navigasi). |
| carousel => intervaltime | Digunakan untuk memilih waktu interval animasi (hanya berlaku kalau opsi interval bernilai true). |
| carousel => animation | Ganti nilainya menjadi false untuk mematikan efek animasi. |
| carousel => duration | Digunakan untuk memilih kecepatan animasi. |
| carousel => easing | Digunakan untuk memilih tipe easing animasi. |
| carousel => callback | Fungsi bebas yang dapat Anda terapkan pada widget ini yang akan bekerja setiap kali slide berganti. |
Contoh Pengaturan Carousel Vertikal
Perhatikan pada bagian-bagian yang Saya tandai:
var tinycarousel_config = { ... nav: { prevText: '▲', nextText: '▼', showText: 'Menampilkan {num} Posting' }, carousel: { axis: "y", itemwidth: 200, itemheight: 370, itemmargin: 5, itempadding:10, visible: 1, display: 1, start: 1, interval: true, intervaltime: 3000, animation: true, duration: 1000, easing: "swing", callback: function() {} } };