• Waktu Tak Pernah Kembali

    Nabi shallallahu 'alaihi wasallam bersabda: Dua kenikmatan yang sering dilupakan oleh kebanyakan manusia adalah kesehatan dan waktu luang [Hr. Bukhori No.5933]

  • Usahakan Waktu Kita Selalu Istiqomah Dijalan Alloh

    Nabi shallallahu 'alaihi wasallam bersabda: "Tempat cemeti di surga itu lebih baik dari dunia dan seisinya, sungguh berpagi-pagi atau sore hari di jalan Allah itu lebih baik daripada dunia seisinya." [Hr. Bukhori No.5936]

  • Kau Isi Apa Waktumu?

    Nabi shallallahu 'alaihi wasallam pernah membuat suatu garis lalu beliau bersabda: "Ini adalah cita-citanya, dan ini adalah ajalnya, ketika seseorang seperti itu (dalam cita-citanya), maka datanglah garis yang lebih dekat (yaitu ajalnya)." [Hr.Bukhori No.5939]

Jumat, 15 April 2011

Cara Memasang Daftar Isi Unik

it's an information blog
Penulisnya adalah: Muhammad Yusuf Abu Iram Pada Pukul 21.04 2 Wah ada komentar

Wah beneran trik cara memasang daftar isi kali ini unik, hasilnya bener2 menarik, ringan, tampilannya mantap, sebelumnya lihat dulu hasilnya disini

Nah kalo kamu berminat, nih abang kasih deh trik cara memasangnya ...

  1. Login blogger
  2. Rancangan, edit html, cari kode ]]></b:skin> 
  3. 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;
     }

selanjutnya cari kode </head>  dan letakkan kode berikut tepat diatas kode </head>

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


Daftar Isi  bisa diganti dengan nama yang kawan inginkan, Fast dapat diubah dengan kata Normal untuk kecepatan lebih lambat.

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

</script>
</div>


yang berwarna biru ganti dengan alamat blog sobat yang dipakai

selesai.........



Free Template Blogger collection template Distributor jahe Merah Karomah Blog Indahku Goresan Jari Jemariku cafe Gaul Para Salafiyyin

2 komentar :

hahaha unik , konyol dan koplak daftar isinya , Tapi keren dan sangat bermanfaat banget buat saya , hehehe ! kamu kreatif juga yah hehehe

Salam kenal dan ditunggu nih kunjungan baliknya gan !

http://masihbelajarnih.blogspot.com/

Posting Komentar

Setelah mata lelah membaca, tangan lelah menggerakkan mouse, tapi janganlah lelah untuk berkata menyapa, sapalah kami...terima kasih atas kesediaannya memberi inspirasi, silahkan ketik disini :

Jika anda menghendaki tukaran link / banner/follow silahkan anda simpan linknya di Buku Tamu Kami. Diberdayakan oleh Blogger.