Cara Membuat Daftar Isi Keren di Blogger

Cara Membuat Daftar Isi Blog sobat seperti gambar ini.

Jika Sobat Mau Membuat Daftar Isi Blog Sobat Seperti Gambar Itu. caranya Gampang Banget.
1. Buka Blog Sobat..
2. Pilih Tata Letak.. Kemudian Pilih ADD GADGET..
3. Terus, Sobat ADD GADGET HTML..
4. kemudian Sesuaikan Letak Dimana Yang Akan Sobat Tambah, seperti Pada Blog Saya..
5. kemudian COPY PASTE KODE DI BAWAH INI kedalam Gadget HTML..
========================================================================
<style type="text/css">
#tabbed-toc {
  margin:0 auto;
  background-color:#33c9f7;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#000;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px Times New Roman,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Times New Roman,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#000;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#c7f25f;
  color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#7ee3c7;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #181D67;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Times New Roman,Sans-Serif;
}
#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#051466;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color:#eee;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#999;
  color:none;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>
<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Tahoma,Sans-Serif;text-decoration:none;margin:10px;" href="http://apapunituzar.blogspot.com" title="Tabbed TOC">37412</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://apapunituzar.blogspot.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: false,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>
APAPUNITUZAR//FAUZARRAJU

========================================================================
ubah Nama APAPUNITUZAR/FAUZARRAJU yang berwarna MERAH, Dengan Nama Blog Anda dan Nama Anda. Terimakasih, GOOD JOB.

tinggalkan Back Link blog sobat di . muhammadfauzarrahmanraju@gmail.com
Share yha..
FAUZARRAJU
README

Berbagi Itu Sehat. Apabila Anda Tau Sesuatu. Mari Kita Berbagi, Karena Ilmu Anda Berguna Bagi Orang Lain [Source : Fauzar Raju] SEMUA YANG ADA DI www.apapunituzar.com Merupakan Hasil Dari Orang Lain Maupun Dari Pribadi. Jika Ada Hasil Dari Anda Yang Kami Posting Di Sini, Mohon Hubungi Saya. Saya Tidak Mau Ada Terjadi Pelanggaran. Jika Hasil Anda Tidak Memiliki Izin Untuk Kami Share Di Sini, AKAN KAMI HAPUS, Sesuai Permintaan Anda. Jika Anda Tidak Menghubungi Saya Tentang Hak Kepemilikan Anda, Maka Kami Anggap Itu Bukan Milik Anda. TERIMAKASIH.

BERKOMENTAR SESUAI PERLUNYA. MEMPUNYAI PERTANYAAN ATAU PERMINTAAN, SILAHKAN KOMENTAR