Widget Daftar Isi Akordion dengan Sortir Bulan Terbit

Kali ini Saya akan memperkenalkan widget daftar isi untuk Blogger dengan konsep akordion JQuery:

Lihat Demo

Pertama-tama, masuklah ke tab Posting/Entri, kemudian pilih Edit Laman. Tambahkan sebuah halaman baru:

Tambahkan sebuah halaman statis

Klik tab Edit HTML pada formulir posting:

Pilih mode HTML.

Salin kode di bawah ini, kemudian letakkan di dalam formulirnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/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="http://www.dte.web.id/2011/11/widget-daftar-isi-akordion-dengan.html" title="Accordion TOC by Taufik Nurrohman">&#9654; 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="http://dte-project.googlecode.com/svn/trunk/accordion-toc-2.js"></script>

Konfigurasi Widget

Opsi	Keterangan
url	Ganti dengan URL blog Anda.
containerId	ID kontainer elemen yang nantinya akan digunakan 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 tua terlebih dahulu.
maxResults	Jumlah maksimal feed yang ingin dimuat. Abaikan!
activePanel	Urutan panel yang ingin dibuat terbuka secara default. Dalam hal ini, nilai 1 menunjukkan bahwa panel yang akan aktif saat pertama kali widget dimuat adalah panel yang pertama.
slideSpeed	Tentukan kecepatan efek animasi panel baik saat bergeser ke atas maupun saat bergeser ke bawah pada variabel ini.
delayLoading	Waktu tunda pemuatan feed.

Kode yang Saya beri garis bawah adalah JQuery. Jika templat Anda sudah dilengkapi dengan JQuery, Singkirkan kode tersebut!