Cara membuat table of content

Hallo sobat, hari ini saya akan menulit tentang cara membuat table of content atau daftar isi blog, fungsinya agar setiap pengunjung yang datang ke blog kita bisa melihat seluruh daftar isi yang ada di dalam blog kita. Table of content atau daftar isi yang ada di blog tidak jauh berbeda dengan yang daftar isi yang ada di sebuah buku. yang akan menampilkan label beserta isi tulisan yang ada dalam label tersebut. sobat berminat untuk memasang daftar isi blog berikut adalah cara memasang daftar isi sebuah blog.

Pertama sobat masuk ke Dasbor >> Template >> Edit HTML jangan lupa untuk mencentang "Expand template widget"
Setelah itu sobat letakan kode J-Query berikut tepat di atas kode </head>, tetapi jika sobat sudah mempunyai kode J-Query versi apapun tidak disarankan untuk memasukan kode j-query berikut karena akan terjadi galat.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Setelah sobat selesai meletakan kode diatas, selanjutnya sobat cari kode berikut ]]></b:skin> Kemudian letakan kode dibawah ini tepat diatas kode ]]></b:skin>

.judul-label{background-color:#E5ECF9;font-weight:bold;line-height:1.4em;margin-bottom:5px;overflow:hidden;white-space:nowrap;vertical-align: baseline;margin: 0 2px;outline:none;cursor: pointer;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius:.5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 1px 1px 4px #AAAAAA;box-shadow: 0 1px 2px rgba(0,0,0,.2);color:#e9e9e9;border: 2px solid white !important;background: #6e6e6e;background:-webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');    }

.data-list{line-height:1.5em;margin-left:5px;margin-right:5px;padding-left:15px;padding-right:5px; white-space:nowrap;text-align:left;font-family:"Arial",sans-serif;font-size:12px;}

.list-ganjil{background-color:#F6F6F6;}

.headactive{
    color: #fef4e9;
    border: 2px solid white !important;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top, #faa51a, #f47a20);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}

Setekah itu jangan lupa save templatenya :) Selanjutnya sobat masuk halaman dan buat halaman baru beri nama halaman tersebut dengan "Daftar isi blog" atau bisa juga "Table of content" setelah itu sobat copy code berikut dan paste ke halaman yang tadi sudah sobat buat

<script src="http://bloggerpas-sitemap.googlecode.com/files/bloggerpas-sitemap2.js"></script>
<script src="http://URL blog sobat.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript">
$(function() {
     $("#daftar-isi .judul-list").hide();
     $("#daftar-isi .judul-label:first").addClass('headactive').next().slideDown();
     $("#daftar-isi .judul-label").css("cursor", "pointer");
     $("#daftar-isi .judul-label").click(function() {
          if($(this).next().is(':hidden') ) {
               $("#daftar-isi .judul-label").removeClass('headactive').next().slideUp();
               $(this).toggleClass('headactive').next().slideDown();
          }
     });
});
</script>

Tahap terahir save halaman tersebut lalu lihat hasilnya.

Jika sobat ingin melihat demo dari kode diatas silahkan sobat lihat : Daftar isi
Jika sobat berminat untuk memasang Daftar isi tersebut, saya harap sobat tidak menghapus Link kredit : widget by : bloggerpas. Sebagai bentuk penghargaan kita terhadap hasil karya orang lain :)
Sumber kode : bloggerpas.blogspot.com,

Sobat suka tulisan ini..?