Kali ini Saya akan memperkenalkan widget daftar isi untuk Blogger dengan konsep akordion jQuery:
Pertama-tama, masuklah ke tab Posting/Entri, lalu pilih Edit Laman. Tambahkan sebuah halaman baru:
Klik tab Edit HTML pada formulir posting:
Salin aba-aba di bawah ini, lalu letakkan di dalam formulirnya:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <link rel="stylesheet" href="//cdn.rawgit.com/tovic/dte-project/0ef9de902cf286a77272f9b3c6f8168c17ab61c6/accordion-toc-skin.css"/> <div id="table-of-content" class="table-of-content"><span class="loading">Memuat...</span></div> <div class="credit-link"><a href="//www.dte.web.id/2011/11/widget-daftar-isi-akordion-dengan.html" title="Widget Daftar Isi Akordion dengan Sortir Bulan Terbit">▶ Accordion TOC</a></div> <script> var toc_config = { url: 'http://nama_blog.blogspot.com', containerId: 'table-of-content', monthNames: [ 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember' ], oldestFirst: false, maxResults: 9999, activePanel: 1, slideSpeed: { down: 400, up: 400 }, slideEasing: { down: null, up: null }, slideCallback: { down: function() {}, up: function() {} }, clickCallback: function() {}, jsonCallback: '_toc', delayLoading: 0 }; </script> <script src="//cdn.rawgit.com/tovic/dte-project/0ef9de902cf286a77272f9b3c6f8168c17ab61c6/accordion-toc-2.js"></script>Konfigurasi Widget
| Opsi | Keterangan |
|---|---|
| url | Ganti dengan URL blog Anda. |
| containerId | ID kontainer elemen yang nantinya akan dipakai untuk menampung isi widget. |
| monthNames | Nama-nama bulan dalam satu tahun sesuai dengan penamaan bulan di negaramu. |
| oldestFirst | Ganti nilainya menjadi true untuk menampilkan arsip dengan tanggal yang lebih bau tanah terlebih dahulu. |
| maxResults | Jumlah maksimal feed yang ingin dimuat. Abaikan! |
| activePanel | Urutan panel yang ingin dibentuk terbuka secara default. Dalam hal ini, nilai 1 menawarkan bahwa panel yang akan aktif dikala pertama kali widget dimuat yaitu panel yang pertama. |
| slideSpeed | Tentukan kecepatan efek animasi panel baik dikala bergeser ke atas maupun dikala bergeser ke bawah pada variabel ini. |
| delayLoading | Waktu tunda pemuatan feed. |
Kode yang Saya beri garis bawah yaitu jQuery. Jika templat Anda sudah dilengkapi dengan jQuery, Singkirkan aba-aba tersebut!