membuat menu daftar isi jtoctree

demonya bisa dilihat disini:http://kawaliblog2.blogspot.com/2011/02/tutup-buka-buka-tutup.html

1. Cara membuatnya : Login blogger
2. Rancangan, edit html, cari kode ]]></b:skin>
3. Simpan kode berikut tepat diatas kode tadi :

Isikan materi postingan anda (/* jToCTree */
#judafistre {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPvolWzjDFPV7dEKHu3lhZhAg_9kFAzTPiGtu4eInYwZ8GYCYAnvX0Kq3WYDiOciVuU8KE9VML2HmFwqdl_GrUBRpvMOWg_jlwdtQQbEVQz2Q8I5NGMqf-YGTCj8XB0QnBgkFSwOoTYec/d/bg5.gif)
repeat-y scroll left center #E7F7FB;
padding:5px;
border:1px solid #339DC6;
}
.branda {
background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TUBMbWj8ZzI/AAAAAAAAEr4/iqyIQmaeqTc/d/blogger.png)
0px 4px no-repeat !important;
}
.judafis {
padding:0 0 0 4px;
font-weight:bold;
}
.treeview, .treeview ul {
padding: 0;
margin: 0;
list-style: none;
}
.treeview ul {
background-color:
transparent;
margin-top: 4px;
}
.treeview .hitarea {
background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TUBMyDGBM0I/AAAAAAAAEsQ/b__wKvGpCLo/d/treeview-default.gif) -64px -25px no-repeat;
height: 16px;
width: 16px;
margin-left: -16px;
float: left;
cursor: pointer;
}
* html .hitarea {
display: inline;
float:none;
}
.treeview li {
margin: 0;
padding: 3px 0pt 3px 16px;
}
.treeview a.selected {
background-color: #eee;
}
#treecontrol {
margin: 2px 0;
display: none;
}
.treeview .hover {
color: red; cursor: pointer;
}
.treeview li {
background: url(http://lh3.ggpht.com/_xcD4JK_dIjU/TUBMyE2GQFI/AAAAAAAAEsU/8rb8Y7zjLQw/d/treeview-default-line.png)
0 0 no-repeat;
}
.treeview li.collapsable, .treeview li.expandable {
background-position: 0 -176px;
}
.treeview .expandable-hitarea {
background-position: -80px -3px;
}
.treeview li.last {
background-position: 0 -1766px ;
}
.treeview li.lastCollapsable {
background-position: 0 -111px
}
.treeview li.lastExpandable {
background-position: -32px -67px
}
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea {
background-position: 0;
}
.treeview-black li {
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMxfHyt7I/AAAAAAAAEsM/OQ8KPEkd4iI/d/treeview-black-line.png);
}
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable {
background-image: url(http://lh5.ggpht.com/_xcD4JK_dIjU/TUBMblX2uHI/AAAAAAAAEsI/qilKwCGDUas/d/treeview-black.gif);
}
.filetree li {
padding: 3px 0 2px 16px;
}
.filetree span.folder, .filetree span.file {
padding: 1px 0 1px 18px; display: block;
}
.filetree span.folder {
background: url(http://lh3.ggpht.com/_xcD4JK_dIjU/TUBMbqeQA4I/AAAAAAAAEsA/MxndTFShj-4/d/folder.gif)
0 0 no-repeat;
}
.filetree li.expandable span.folder {
background: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMbhMdwlI/AAAAAAAAEsE/9pe2zTo3i1U/d/folder-closed.gif)
0 0 no-repeat;
}
.filetree span.file {
background: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMbVyeYzI/AAAAAAAAEr8/pGIGq0amWFE/d/file.gif)
0 0 no-repeat;
}
.filetree span.file a {
text-decoration:none;
})

selanjutnya cari kode </head> dan letakkan kode berikut tepat diatas kode tadi :

Isikan materi postingan anda (<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='https://github.com/jzaefferer/jquery-treeview/raw/master/jquery.treeview.js' type='text/javascript'/>
<script src='http://kangdadang.googlecode.com/files/jtoctree-1.0.js' type='text/javascript'/>
<script language='javascript'>//<![CDATA[
var judul = 'Daftar Isi'
function dafisjtoctree() {
$('#hitam').treeview({
animated: 'fast',
collapsed: true,
control: '#treecontrol'
});
}
$(document).ready(function() {
dafisjtoctree();
});
//]]></script>)

Daftar Isi bisa diganti dengan nama yang kawan inginkan, Fast dapat diubah dengan kata Normal untuk kecepatan lebih lambat.

selanjutnya untuk cara pemanggilannya pada edit html Posting atau pada Gadget HTML/JAVA SCRIPT :

Isikan materi postingan anda (<div id="judafistre">
<div id="treecontrol">
<a title="Tutup semua folder" href="#"> Tutup</a> | <a title="Buka semua folder" href="#"> Buka</a> | <a title="Tombol buka tutup semua folder" href="#">Buka Tutup</a>
</div>
<script src="http://f-bayu.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=jtoctree">

</script>
</div>)

yang berwarna biru ganti dengan alamat blog sobat yang dipakai

selesai.........

untuk referensi lebih lengkapnya dapat kawan-kawan baca disini:http://modification-blog.blogspot.com/2011/01/jtoctree-versi-10-daftar-isi-folder.html dan http://f-bayu.blogspot.com/search/label/tutorial%20blog