Bikin Daftar Isi Tampilan Explore (jToCTree)

Membuat daftar isi blog tampilan explore atau jToCTree - Sebenarnya widget jToCTree atau jQuery Table of Content Treeview merupakan daftar isi yang fungsinya menyerupai daftar isi jQuery Accordion, jadi kedua-duanya tampilannya sangat cantik sekali. Seperti anda lihat pada gambar dibawah, bahwa tampilan daftar isi widget jToCTree menyerupai Windows Explore, menarik bukan?

Daftar Isi Folder Bercabang - jToCTree Versi 1.0 yang akan Rudy Hartono dibahas ini tentunya jika dipasang pada blog anda akan mengundang pengunjung lebih tertarik ingin membuat dan memasangnya karena tampilannya yang terkesan simple dan mudah diterapkan, juga memiliki folder-folder pada label yang berisi judul dari postingan anda, seperti anda lihat screenshotnya dibawah ini.

Cara membuat daftar isi jToCTree atau model explore di blog :
1. Login ke Blogger
2. Pilih Templates => Lanjutkan
3. Pilih Edit HTML
4. Backup dulu template anda untuk menjaga kemungkinan ada kesalahan
5. Centang kotak kecil pada Expand Template Widget
6. Silahkan cari kode ]]></b:skin> gunakan lebih cepat dengan ctrl + F
7. Copy kode dibawah ini dan paste diatas kode ]]></b:skin>

/* jToCTree */ #judafistre {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicpxv1YJGiNl554FaCO2iocMBl3SLW8kYet_GMz0_spwNvxY0EA1K6DO2HpWs4X7BwHoonCYNcvDSIDZqOCJJ9fv-PCNeCjCAY1VYs4Kfx3PbxQRlGtZ1v4pWCUGog9pl3olFIizLkcAo/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.expandabld { 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; }

8. Berikutnya cari kode </head> lalu  copy kode dibawah ini dan letakkan di atas kode </head>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/><script type='text/javascript' src='https://sites.google.com/site/blogrudyhartono/js/jquery.treeview.js'/><script type='text/javascript' src='https://sites.google.com/site/blogrudyhartono/js/jquery.toc.treeview.js'/><script language='javascript'>//<![CDATA[ var judul = 'Daftar Isi' function dafisjtoctree() { $('#hitam').treeview({ animated: 'fast', collapsed: true, control: '#treecontrol' }); } $(document).ready(function() { dafisjtoctree(); }); //]]></script>

9. Selesai, simpan template anda

Untuk menampilkan daftar isi dengan folder bercabang / jToCTree ini bisa anda letakkan didalam postingan (pada posisi HTML) atau dapat juga diletakkan pada widget (halaman depan blog).

Untuk menampilkannya pada widget (sidebar blog) caranya :
1. Pilih Tata Letak
2. Klik HTML/Javascript
3. Masukkan kode dibawah ini kedalam HTML/JavaScript

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

Keterangan:
Silahkan ganti URL warna merah dengan URL blog

Semoga postingan tentang Cara Membuat Daftar Isi Tampilan Explore (jToCTree) dapat bermanfaat dan selamat menerapkan pada blog anda, happy blogging.