More Info

The hallmark of jToCTree version 1.0 is as follows:
• The display is similar to the Explorer on the computer, when the folder click the folder contents
will be displayed
• Folder is taken from the category / label articles and arranged in ascending (starting from AZ)
• title of the article and featured article addresses automatically without having to manually input us
and automatically arranged in ascending
• jToCTree dTree not the same as that was booming some time ago, because dTree work manually
(data must be entered by the owner of the blog)
• jToCTree using slide animations that will feature articles on a particular category when clicked
• And please browse the advantage jToCTree
if the blogger friends are interested in using this jToCTree there are some things to know / agreed,
• Tune-Up Blogger spent a lot of time to make this jToCTree, or appreciation of his donation will
greatly assist Tune-Up Blogger to continue working
• jToCTree was made by a blogger newbie, so if you feel the master (more severe) than Blogger
Tune-Up, I personally beg profusely Sorry for not being able to make something good for those of
you who have become master blog
• jToCTree is free for use on any blog without having to pay or swap with any
• jToCTree allowed for the review on a blog that anyone with or without notice to the Blogger Tune-
Up, but must include a link to the blog Blogger Tune-Up on the article made
• It is forbidden to decompile / unpacking of jToCTree script code in order to remove the credit link
to the Blogger blog Tune-Up
• If you find a bug or error please notify the willingness to Tune-Up Blogger via email, twitter,
facebook or your preferred media
• If you do not agree with the above then please make yourself something similar to or better

• Integration jToCTree Blog Template Version 1.0 on
• Step 1
Login to Blogger
step 2
Go to the "Draft - Edit HTML"
step 3
Find the code below:
•]]> </ b: skin>
• Step 4
Enter (copy paste) the code below the above code in step 3:

/*   jToCTree     */

#judafistre {background:url(
KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center
#E7F7FB;padding:5px;border:1px solid #339DC6; }

.branda { background:
/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:
/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:
/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:
/treeview-black-line.png); }

.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-
black li.lastExpandable { background-image:
/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:
4/d/folder.gif) 0 0 no-repeat; }

.filetree li.expandable span.folder { background:
/folder-closed.gif) 0 0 no-repeat; }

.filetree span.file { background:
/file.gif) 0 0 no-repeat; }

.filetree span.file a { text-decoration:none; }

step 5
Find the code below:
</ head>

step 6
Enter (copy paste) the code below the above code in step 5:

<script type='text/javascript'

<script type='text/javascript' src='

<script type='text/javascript' src='http://hens-pusat-'/>

<script language='javascript'>//<![CDATA[

var judul = 'Daftar Isi'

function dafisjtoctree() {

animated: 'fast',

collapsed: true,

control: '#treecontrol'



$(document).ready(function() {




step 7
Save the template and continue reading the article ...
JToCTree Integration Version 1.0 on page or Widget

step 8
Create an article and move the editor of the article in HTML editing mode or create a widget with
type of HTML / JavaScript

step 9
Enter (copy paste) the code below in the article or content widget:

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


<script src="


• See step 6 line 1; throw a line if you have your blog jQuery framework
• See step 6 line 3; upload the file was available on the source code that you download and capture
link-1.0.js jtoctree file replaces URL/jtoctree-1.0.js
• See step 5 6 lines; change the word 'Content' with the name you want to use
• See step 6 lines 8; change the word 'fast' with 'normal' if you want to change the slide effect is
• See step 6 row 9; change the word true to false if you want to view folder content directly open all
the time viewed
• See step 6 line 10; cast control: '# treecontrol' if we do not want to show the link / button Close |
Open | Open Close
• See step 9 line 5; change address matches the address of
your blog or dispose of all

To top