Cara Buat Daftar isi pada Blog

DAFTAR ISI BLOGGER

Mengapa Kita perlu membuat daftar isi pada Blog..??

Lagilagi muncuL sebuah pertanyaaN... tidak ada pertanyaan Maka tidak ada jawaban. hehehehehe.

Daftar isi merupakan Kumpulan Informasi Yang Lengkap mengenai Konten yang ada pada halaman Blog-Web.Dengan adanya daftar isi,Sama halnya kita memudahkan para pengunjung untuk Melihat konten yang kita sajikan.

Pertanyaan Lagi..??
Kira kira jika sebuah buku tidak memiliki daftar isi, maka apa yang terjadi..??

Barangkali dah kiamat kali ya itu buku..!! atau mungkin lebih bagusnya Di buang aja ke laut.. heheheheheheh

Menurut saya jika sebuah buku tidak memiliki daftar isi maka Kemungkinan Besar Tidak akan ada orang yang ingin menerbitkan buku tersebut,mengapa..?? buku yang tidak mempunyai daftar isi Cuma akan membuat Bingung seorang pembaca Ketika ingin mencari halaman yang ingin di ketahuinya terlebih lagi

Ketika ia ingin mengetahui Konten apa saja yang di sajikan dalam Buku itu.

jadi bingunggg...........!!! mau bahas daftar isi buku atau daftar isi Blog. hehehehe

Kembali ke topik awaL yaitu cara membuat daftar isi.

Daftar isi yang akan kita buat kali ini Ada dua macam, pertama daftar isi dengan Fungsi Scroll dan yang kedua menggunakan Efek Jquery

DEMO DAFTAR ISI DENGAN FUNGSI SCROLL

Untuk LanGkah pemasangan daftar isi seperti gambar diatas adalah

• masuk ke Blogger anda
• pilih menu laman Kemudian
• buat laman kosong
• Pada posisi HTML isikan kode di bawah ini :

<div dir="ltr" style="text-align: left;" trbidi="on">

<div style="border: 1px solid #eee; height: 600px; overflow: auto; padding: 10px; width: auto;">

<script src="http://ek11-daftarisi.googlecode.com/files/Daftar%20isi.js"></script><script src="http://d-crow.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

</div>

</div>

Catatan : Ganti URL yang berwarna merah dengan URL blog kamu,dan yang wana Biru Merupakan Tinggi dari daftar isi.

• Jika sudah jangan Lupa di simpan/publikasikan.

Bagi anda yang Kurang suka dengan model daftar isi seperti diatas, jangan khwatir masih ada alternatif kedua dengan model yang lain lagi,dengan menggunakan efek Jquery.untuk pemasangannnya sendiri sama seperti cara diatas yaitu :

• masuk ke Blogger anda
• pilih menu laman Kemudian
• buat laman kosong
• Pada posisi HTML isikan kode di bawah ini :

<style type="text/css">

#UTdaftar-isi{

width:100%;

background:rgba(0, 0, 0, 0.7);

border:2px solid #bbb;

color:#fff;

overflow:hidden;

}

#UTdaftar-isi .judul-label{

overflow:hidden;

cursor:pointer;

text-decoration:none;

font:normal 14px/100% monospace, sans-serif;

padding:10px 15px 11px;

color:#eee;

text-shadow:1px -1px 1px rgba(0, 0, 0, 0.9);

border-top:1px solid #444;border-bottom:1px solid #222;

background:rgba(0, 0, 0, 0.7);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#333');

background:-webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#333));

background:-moz-linear-gradient(top, #3c3c3c, #333);

background:-o-linear-gradient(#3c3c3c, #333);

background:linear-gradient(#3c3c3c, #333));

}

#UTdaftar-isi .judul-label:hover{

background:#333;

}

#UTdaftar-isi .headactive{

color:#efefef;

border-top:1px solid #999;border-bottom:1px solid #999;

background:#222;

}

#UTdaftar-isi ol{

background-color:#444;

margin:0 0;

padding:0 0;

color:#999;

list-style:none;

}

#UTdaftar-isi li{

line-height:normal;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.9);

font:normal 14px/100% 'Consolas',Arial,Sans-serif;

margin:0 0;text-decoration:none;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;

padding:5px 5px 5px 15px;

white-space:nowrap;

text-align:left;

border-top:1px solid #555;border-bottom:1px solid #333;

}

#UTdaftar-isi li:hover{

border-left:12px solid #333;background:#333;

}

#UTdaftar-isi li:first-child{border-top:none;}

#UTdaftar-isi a{color:#eee;}

#UTdaftar-isi a:hover{color:#000088;}

#UTdaftar-isi a:visited{color:#999;}

</style>

<script src="http://sahabadcrow.googlecode.com/files/Jquery.js" type="text/javascript"></script>

<script src="http://sahabadcrow.googlecode.com/files/daftar%20isi%2001.js"></script><script src="http://gladiatorku.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script><script src="http://sahabadcrow.googlecode.com/files/daftar%20isi%2002.js"></script>

Catatan : Ganti URL yang berwarna merah dengan URL sobat

• Jika sudah selesai, jangan lupa simpan/publikasikan,dan Hasilnya bisa anda lihat di bawah ini :

DEMO DAFTAR ISI DENGAN EFEK JQUERY