Membuat Daftar isi blog tampilan explorer

Widget ini diberi nama jToCTree yang merupakan kepanjangan dari jQuery Table of Content Treeview hasil kolaborasi/perpaduan framework jQuery, JSON Feed, dan jQuery Treeview plugin buatan Jörn Zaefferer. Fungsinya sama dengan jenis Daftar Isi jQuery Accordion yaitu untuk menampilkan semua data artikel kita sehingga proses pencarian artikel oleh para pembaca blog kita semakin mudah dan menarik.

Adapun ciri khas jToCTree versi 1.0 adalah sebagai berikut:

• Tampilan mirip dengan Explorer pada komputer, ketika folder di klik maka isi folder akan ditampilkan
• Folder diambil dari kategori/label artikel dan disusun secara ascending (dimulai dari A-Z)
• Judul artikel dan alamat artikel ditampilkan secara otomatis tanpa harus kita masukan secara manual dan secara otomatis pula tersusun secara ascending
• jToCTree tidak sama dengan dTree yang sempat booming beberapa saat yang lalu, karena dTree bekerja secara manual (data harus dimasukan sendiri oleh pemilik blog)
• jToCTree menggunakan animasi slide yang akan menampilkan artikel pada saat kategori tertentu diklik

Cara Pemasangan di blog :

• Login--Rancangan--Edit HTML
• Cari Kode ]]></b:skin> dan masukan kode dibawah ini tepat di atas kode ]]></b:skin>
  
  Source Script

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

• Cari kode </head> dan masukan kode dibawah ini tepat di atas kode </head>
  
  Source Script

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

• Langkah Terakhir untuk menampilkan daftar isi yang menyerupai tampilan explorer, dan kode ini dapat di pasang di dalam entry [ edit html ] atau di widget [ gadjet html ]
  
  Source Script

  <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://www.davitblog.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=jtoctree"></script>
  </div>
• Catatan : Kode di atas yang bertulisakan tebal harap di rubah dengan nama blog milik sobat masing.
• Selesai

http://www.davitblog.com/2011/04/membuat-daftar-isi-blog-tampilan.html