Cara Membuat Daftar Isi Otomatis Menggunakan Style

Cara Membuat Daftar Isi Otomatis Menggunakan Css ini adalah tutorial blog yang selan jutnya saya postingkan lihat juga artikel sebelumnya yaitu DOWNLOAD GAME YU GI OH POWER OF CHAOS : KAIBA THE REVENGE.

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://thomijasir.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

Ini hasilnya :

Tampilan Daftar is otomatis anda

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