Widget Membuat Daftar Isi dengan jToCTree

Berikut ini cara membuat daftar isi unik, nah ikuti deh langkah-langkahnya ya ...

Cari kode ]]></b:skin> lalu taruh diatasnya kode dibawah ini :

        /*  jToCTree  */
        #judafistre {
            background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjwSKe4aK3laQv8TZnkhkRIxqFmFciQtmsa9XLcbFIWcb9YjdNCcdYu-yNMzn2ds6PmXD0XUeXzyCgAgc7E3dLKNOPd6QpsAUw0I-boD893Io1JEq58bdmimTI3s4Ea_lIrfsL8089DfU/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 </head>

    <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>:

Save.

Lalu buat 1 halaman / posting ; beri judul Daftar isi atau semau anda lalu copas kode berikut di mode edit HTML :

<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://abuiram.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=jtoctree">

</script>
</div>

warna kuning ganti dengan url anda