Membuat Daftar Isi Dropdown Ala Explorer Pada Blog Anda

Di sini saya akan membagikan info tentang membuat daftar isi dengan style WIndows Explorer. Tampilannya bisa anda lihat di sini.

Setelah anda melihatnya, apakah anda tertarik?? Jika tertarik, mari coba cara di bawah ini. Cara ini sedikit agak membuat otak anda ribet.

Pertama, Login--Rancangan--Edit HTML
Cari Kode  ]]></b:skin>
Masukkan kode dibawah ini tepat di "atas" kode ]]></b:skin>

/* jToCTree */
#judafistre {background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/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 tersebut

<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 template.
Jangan lega dulu.
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 ]

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

NB : Kode di atas yang berwarna MERAH harap di rubah dengan nama blog anda.

Save, Lalu lihat hasilnya.

GOODLUCK

TERIMA KASIH SUDAH MEMBACA POSTING DI ATAS. JANGAN LUPA TINGGALIN JEJAK DI KOMENTAR YA? ^_^

1 comment

January 7, 2012 at 5:09 PM

itu dah saya coba tapi lom bisa.. apanya ya yg salah

Post a Comment

Mohon Untuk Tidak Mencantumkan Nama Anonim Anda. Terima Kasih.