Bismillah. Alhamdulillah... Satu widget lagi telah selesai di buat untuk para sahabat setia Blogger Tune-Up. Widget ini kemudian 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[1]. Fungsinya sama dengan jenis Daftar Isi jQuery Accordion[2] yaitu untuk menampilkan semua data artikel kita sehingga proses pencarian artikel oleh para pembaca blog kita semakin mudah dan menarik.
- 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
- Dan silahkan telusuri keunggulan jToCTree
Jika sahabat blogger tertarik untuk menggunakan jToCTree ini ada beberapa hal yang perlu diketahui/disepakati, diantanya:
- Blogger Tune-Up menghabiskan banyak waktu untuk membuat jToCTree ini, donasi atau apresiasi-nya akan sangat membantu Blogger Tune-Up untuk terus berkarya
- jToCTree ini dibuat oleh seorang blogger newbie, maka jika anda merasa master (lebih hebat) dari Blogger Tune-Up, saya secara pribadi mohon ma'af yang sebesar-besarnya karena tidak mampu membuat sesuatu yang bagus buat anda yang sudah menjadi master blog
- jToCTree ini bersifat gratis untuk digunakan pada blog siapapun tanpa harus membayar atau tukar guling dengan apapun
- jToCTree diperbolehkan untuk di review pada blog siapapun dengan atau tanpa pemberitahuan ke Blogger Tune-Up, tetapi wajib memasukan link yang menuju blog Blogger Tune-Up pada artikel yang dibuat
- Tidak diperbolehkan melakukan decompile/unpacking terhadap script code jToCTree dengan tujuan untuk membuang kredit link yang menuju ke blog Blogger Tune-Up
- Jika ditemukan bug atau error mohon kesediaannya untuk memberitahukan Blogger Tune-Up melalui email, twitter, facebook atau media yang anda sukai
- Jika tidak sepakat dengan hal diatas maka silahkan membuat sendiri sesuatu yang mirip dengan jToCTree atau yang lebih baik.
- Blogger Tune-Up tidak menyediakan URL untuk script jToCTree maka anda yang akan menggunakan silahkan upload sendiri pada hosting milik anda
- Semua gambar pendukung jToCTree disediakan pada hosting Picasa, jadi jika anda ingin menggunakan sendiri gambar yang sesuai dengan selera silahkan upload pada hosting milik anda
- jToCTree ini merupakan versi 1.0 maka ada kemungkinan akan diperbaiki pada hari-hari berikutnya
- Let's begin for play...
Integrasi jToCTree Versi 1.0 pada Template Blog
Langkah 1Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
/* jToCTree */Langkah 5
#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 dibawah ini:
</head>Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>Langkah 7
<script type='text/javascript' src='https://github.com/jzaefferer/jquery-treeview/raw/master/jquery.treeview.js'/>
<script type='text/javascript' src='http://henscripts.googlecode.com/svn/trunk/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>
Simpan template dan lanjutkan membaca artikel...
Integrasi jToCTree Versi 1.0 pada Halaman atau Widget
Langkah 8Buat suatu artikel dan pindahkan editor artikel pada mode edit HTML atau buatlah suatu widget dengan jenis HTML/JavaScript
Langkah 9 Masukan (copy paste) kode dibawah ini didalam artikel atau konten widget:
<div id="judafistre">Langkah 10
<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://modification-blog.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=jtoctree"></script>
</div>
Terbitkan artikel atau simpan widget dan preview...
Keterangan:
- Lihat langkah 6 baris 1; buang satu baris tersebut jika blog anda telah memiliki framework jQuery
- Lihat langkah 6 baris 3; upload-lah file tersebut yang tersedia pada source code yang sudah anda download dan ambil link file jtoctree-1.0.js menggantikan URL/jtoctree-1.0.js
- Lihat langkah 6 baris 5; ubahlah kata 'Daftar Isi' dengan nama yang ingin anda gunakan
- Lihat langkah 6 baris 8; ubahlah kata 'fast' dengan 'normal' jika ingin mengubah efek slide menjadi lebih lambat
- Lihat langkah 6 baris 9; ubahlah kata true menjadi false jika ingin tampilan folder daftar isi langsung terbuka semua pada saat dilihat
- Lihat langkah 6 baris 10; buanglah control: '#treecontrol' jika kita tidak ingin menampilkan link/tombol Tutup | Buka | Buka Tutup
- Lihat langkah 9 baris 5; ubahlah alamat http://modification-blog.blogspot.com sesuai dengan alamat blog anda atau buang sekalian
Catatan kaki:
[1] Special thanks to Jörn Zaefferer for jQuery Treeview plugin
[2] Daftar Isi jQuery Accordion
