CARA MEMBUAT DAFTAR ISI

Daftar isi otomatis ini sangat bermamfaat karena dengan adanya daftar isi otomatis ini pengunjung akan lebih mudah menjelajah blog anda dan memudahkan anda mengelompokan postingan anda untuk mempelajari bagaimana membuat daftarisi ini silahkan anda lihat dan simak tutorialnya dibawah ini : 

Tutorial Blog Cara Membuat Daftar Isi Otomatis Menggunakan Style

Mula mula masuk dahulu ke accoun blog anda

Biasa isikan Username dan Password anda

Lalu Klik New Entri anatu Buat entry baru

Lalu pilih HTML jangn pilih Compose

Kemudian Berijudul Daftar isi atau apapun namanya bebas 

Kemudian copy Paste kan kode HTML dibawah ini :

<div style="margin-top: -10px;">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>
<style type="text/css">
#daftar-isi {
  background-color:#333;
  border:2px solid #fafafa;
  color:#fff;
  margin-bottom:10px;
  -webkit-box-shadow:0 1px 2px #000;
  -moz-box-shadow:0 1px 2px #000;
  box-shadow:0 1px 2px #000;
  overflow:hidden;
}

#daftar-isi .judul-label {
  overflow:hidden;
  cursor:pointer;
  text-decoration:none;
  font:normal 13px/100% 'Verdana',Arial,Sans-serif;
  padding:10px 15px 11px;
  color:#bbb;
  text-shadow:0 1px 1px rgba(0, 0, 0, 0.3);
  border-top:1px solid #444;border-bottom:1px solid #222;
  background:#333;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#333');
  background:-webkit-linear-gradient(top, #3c3c3c, #333);
  background:-moz-linear-gradient(top, #3c3c3c, #333);
  background:-o-linear-gradient(#3c3c3c, #333);
  background:linear-gradient(#3c3c3c, #333));
}

#daftar-isi .headactive {
  color:#efefef;
  border-top:1px solid #24B6E3;border-bottom:1px solid #104968;
  background:#248AB0;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#248AB0', endColorstr='#21739B');
  background:-webkit-linear-gradient(top, #248AB0, #21739B);
  background:-moz-linear-gradient(top, #248AB0, #21739B);
  background:-o-linear-gradient(#248AB0, #21739B);
  background:linear-gradient(#248AB0, #21739B));
}

#daftar-isi ol {
  background-color:#333;
  margin:0 0;
  padding:0 0;
  color:#999;
  list-style:none;
}

#daftar-isi li {
  line-height:normal;
  font:normal 11px/100% 'Verdana',Arial,Sans-serif;
  margin:0 0;
  padding:5px 5px 5px 15px;
  white-space:nowrap;
  text-align:left;
  border-top:1px solid #444;border-bottom:1px solid #222;
}

#daftar-isi li:first-child {border-top:none;}
#daftar-isi a              {color:#5687f8;}
#daftar-isi a:hover        {text-decoration:underline;}
#daftar-isi a:visited      {color:#5687b8;}

#daftar-isi strong {
  font-weight:bold;
  font-style:italic;
  color:red;
}
</style>
<script type="text/javascript">
    showNew    = true;
    accToc     = true;
    openNewTab = true;

    var maxNew     = 10,
        baru       = "New!!!",
        sDownSpeed = 600,
        sUpSpeed   = 600;
</script>
<script src="http://wisnunugraha.googlecode.com/files/AccordionList.js" type="text/javascript">
</script>
<script src="http://dalemmas.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
<div style="text-align: right;">
<div style="margin-top: -10px;">
<a href="http://thomijasir.blogspot.com/" target="_blank"><img alt="Catatan Thomi Jasir" border="0" height="30px" src="http://i1077.photobucket.com/albums/w468/Thomijasir/logojadiexchange145x45.jpg" title="Situs ini memiliki berbagai macam informasi yang anda harus ketahui disini juga ada Download software games business informasi kesehatan tutorial blog" widith="200px" /></a></div>
</div>

Keterangan :

Warna Merah : isikan dengan alamat URL Blog anda

Warna Hijau : isikan dengan kata kata anda fungsinya untuk menampilkan tulisan di entry baru

Warna Kuning : itu adalah ukuran margin anda bisamengubahnya sesuai template blog anda

Lalu Pratinjau dulu untuk melihat hasilnya 

Setelah menurut anda bagus untuk dipasang tinggal Save

Langkah terakhir adalah publikasi 

selesilah lagkah langkanya

Sekian Tutorial dari saya semoga bermamfaat dan selamat mencoba !!
Klik DISINI kalo memang suka dengan artikel ini