Home » » Membuat Menu Daftar Isi Jtoctree

Membuat Menu Daftar Isi Jtoctree


Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>  Simpan kode berikut tepat diatas kode tadi :
/*  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;
     }

7. Selanjutnya cari kode </head>  dan letakkan kode berikut tepat diatas kode tadi :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='https://github.com/jzaefferer/jquery-treeview/raw/master/jquery.treeview.js' type='text/javascript'/>
<script src='http://kangdadang.googlecode.com/files/jtoctree-1.0.js' type='text/javascript'/>
<script language='javascript'>//<![CDATA[
var judul = 'Daftar Isi'
function dafisjtoctree() {
 $('#hitam').treeview({
  animated: 'fast',
  collapsed: true,
  control: '#treecontrol'
  });
 }
$(document).ready(function() {
 dafisjtoctree();
});
//]]></script>
NB: Daftar Isi  bisa diganti dengan nama yang kawan inginkan, Fast dapat diubah dengan kata Normal untuk kecepatan lebih lambat.

8. Selanjutnya untuk cara pemasangan pada edit html Posting atau pada Gadget HTML/JAVA 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://3xploration.co.cc/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=jtoctree">
</script>
</div>
NB: Yang berwarna biru ganti dengan alamat blog sobat 
Share
Related Post

1 comments:

thank sobat

DKP_RAJH Thank you for commenting on » Membuat Menu Daftar Isi Jtoctree

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .