Cara Membuat Daftar Isi Keren

Pada postingan terdahulu sudah saya membahas mengenai Cara Membuat Widget Daftar Isi Blog Otomatis.
Untuk kali masih dengan artikel yang sama, tetapi mungkin yang ini lebih keren karena menggunakan Akordion dengan sortir label.

 

>>> DEMO <<<

Berikut panduan Cara Membuat Daftar Isi Keren dengan Akordion sortir by label, ikuti langkah-langkah berikut:

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

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

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:
=======================
<div style="overflow:auto; border: 1px solid #000000; margin: auto; 

padding: 3px; width: 100%; height: 500px; background-color: none; 

text-align: left;">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  

type="text/javascript"></script>
<link href="http://reader-download.googlecode.com/

svn/trunk/acc-toc-labelsort-default.css" media="screen" rel="stylesheet" type="text/css">

</link>
<script type="text/javascript">
var showNew    = true,
    accToc     = false,
    openNewTab = true,
    maxNew     = 10,
    baru       = "Baru!",
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/hompishive-labels-v1.js" type="text/javascript">
</script>
<script src="http://catatan-piper-comex.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

======================== 

Ganti URL http://catatan-piper-comex.blogspot.com dengan alamat blog Anda, lalu Simpan dan Terbitkan.
Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!
Kode yang diberi warna biru adalah fungsi scroll, jika Anda tidak ingin menggunakan nya, kode tersebut bisa dihapus saja.


Lebih Banyak Pilihan

Opsi	Nilai	Keterangan
showNew	true	Jika bernilai true, tanda merah bertuliskan Baru! akan ditampilkan, jika bernilai false, tanda merah bertuliskan Baru! akan disembunyikan.
	false
accToc	true	Jika bernilai true, efek akordion akan diterapkan, jika bernilai false, efek akordion akan hilang sehingga semua daftar isi akan terlihat.
	false
openNewTab	true	Jika bernilai true, setiap link akan secara otomatis terbuka di tab/jendela baru saat diklik, jika bernilai false, setiap link akan terbuka di tab/jendela yang sama saat diklik.
	false
maxNew	1, 2, 3, ... (numerik)	Digunakan untuk menentukan jumlah maksimal Baru! yang tampil pada setiap posting baru (Menentukan seberapa banyak posting bisa disebut sebagai posting baru).
baru	"Baru!", "New!", "Terbaru!", ... (teks)	Digunakan untuk mengubah teks Baru!.
sDownSpeed	"slow", "fast", 600, 1000 ... (kecepatan valid pada JavaScript)	Digunakan untuk menentukan kecepatan efek .slideDown() panel.
sUpSpeed	"slow", "fast", 600, 1000 ... (kecepatan valid pada JavaScript)	Digunakan untuk menentukan kecepatan efek .slideUp() panel.

Demikian tutorial mengenai cara membuat daftar isi keren dengan Akordion sortir by label. Selamat mencoba dan Semoga Bermanfaat.

Happy Blogging