Membuat Daftar Isi Tampilan Explorer

Kali ini saya akan share tips membuat daftar isi, daftar isi ini disebut jToCTree, daftar isi ini mirip seperti explorer pada komputer, kalian bisa melihatnya pada gambar di atas, atau pada Demonya : DEMO
Jika kalian berminat, ikuti langkah - langkah di bawah ini :

1. Login blogger.
2. Pilih rancangan >> edit html >> cari kode ]]></b:skin>
3. Copy kode di bawah ini, diatas kode ]]></b:skin>

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

4. Cari kode </head> dan copy paste kode di bawah, 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='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>

5. Selanjutnya simpan template.
6. Terakhir kita hanya perlu menampilkan daftar isinya di dalam entry {Edit HTML}
kodenya :

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

7. ganti link http://infotipsblogging.blogspot.com dgn link anda.

Semoga berhasil.

Related Post :

Subcribe Via Email :

Jika Anda Menyukai Artikel Blog ini, Masukan Alamat Email Anda Pada Kolom di Bawah, Maka Anda Akan Mendapatkan Kiriman Email Setiap Kali Ada Posting Baru. Terima Kasih Atas Partisifasinya

Enter Your Email Address :