Widget Daftar Isi Akordion dengan Sortir Label

Kali ini Saya akan memeprkenalkan widget daftar isi akordion berdasarkan label setelah sebelumnya Saya pernah menuliskan tentang widget daftar isi akordion berdasarkan bulan terbit:

Lihat Demo

Buat widget daftar isi ini dengan mengikuti langkah-langkah berikut:

Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Menambahkan halaman statis baru.

Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML:

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/2012/02/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',
    showNew: 10,
    newText: ' - <strong style="font-weight:bold;font-style:italic;color:red;">Baru!</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    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-1.js"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda, lalu klik tombol Publikasikan.

Konfigurasi Widget

Opsi	Keterangan
url	Ganti nilainya dengan URL blog Anda.
containerId	ID kontainer elemen yang nantinya akan digunakan untuk menampung isi widget.
showNew	Opsi untuk menampilkan teks Baru! di samping judul-judul posting terbaru atau tidak. Angka menunjukkan jumlah maksimal posting terbaru/terakhir diterbitkan yang ingin diberi label ini.
newText	Markup HTML bebas untuk label Baru!
sortAlphabetically	Opsi ini mencakup judul panel dan daftar judul posting di bawahnya. Ubah nilainya menjadi true untuk menyortir konten berdasarkan abjad.
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!