Membuat Daftar Isi Keren Berdasarkan Label

Membuat Daftar Isi Keren Berdasarkan Label

         7/18/2012 02:55:00 PM |  Diposkan oleh Revi Sanjaya

          

Setelah sebelummnya aq share tentang daftar isi otomatis dan arsip sebagai daftar isi blog, kali ini aq share membuat daftar isi blog keren dengan JQuery. daftar isi yang ini nih aq rasa lebih bagus dari sebelumnya ada feature dropdown dan bisa diset sesuai yang anda inginkan. nih lihat dulu contohnya disini

Langsung saja, buatlah laman baru pada blog anda atau buat entri baru, kemudian copas kode script di bawah ini.

<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://revizarthieta.blogspot.com//feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Ubahlah tulisan yang berwarna biru tersebut ke alamat  blog kamu, simpan dan lihat hasilnya.

Options

Opsi	Nilai	Keterangan
showNew	true	Jika bernilai true, tanda merah bertuliskan Baru! akan ditampilkan, jika bernilai false, tanda merah bertuliskanBaru! 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 bernilaifalse, 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.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"> ini adalah kode JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!

Update :
Menambahkan fungsi scroll

<div style="overflow:auto;height:200px;"> 

<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://revizarthieta.blogspot.com//feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Ubah kode yang berwarna biru sesuai dengan blog anda.