3 Cara Membuat Daftar Isi Atau Table of Content di Blogspot

 SEO Off Page menjadi salah satu langkah seorang blogger agar blog atau website mereka bisa bersaing di halaman pertaman google, salah satu dari SEO Off Page adalah dengan membuat artikel berkualitas. Artikel berkualitas secara tidak langsung akan membantu menaikkan peringkat blog atau website di mesin pencari dalam jangka panjang. Bagaimana ciri-ciri artikel berkualitas? Secara lengkap kamu bisa membaca di artikel saya tentang Artikel Berkualitas.

Cara Pertama Membuat Daftar Isi atau Table Of Content

• Masuk ke setting > Edit Html
• Cari kode ]]></b:skin>
• Pastekan kode dibawah sebelum kode atau tepat di atas kode  ]]></b:skin>

 .dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

• Stelah itu, simpan template.

• Selanjutnya, Edit artikel yang ingin ditambahkan daftar isi
• Edit artikel > Ubah tampilan compose menjadi Html
• Pastekan kode dibawah dibagian paling atas artikel kamu, atau dimanapun, tapi yang terbaik adalah dibagian paling atas artikel.

 Kode

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

• Ganti Link1, Link2, link 3 dan seterusnya dengan Sub Pembahasan artikel kamu. Ganti juga # dengan #subhead1 dan seterusnya. Jika di artikel terdapat lebih dari 3 sub pembahasan, tinggal tambahkan kode    <a href=”#”>Link 4</a>  dan seterusnya.

• Masih di tampilan html. Cari Sub Pembahasan kamu atau Subheading kamu. Dan tambahkan kode id=”subhead1”setelah kode <span dan seterusnya pada setiap sub pembahasan kamu.

 /* Versi Kedua */
.daftarisi {
    width:100%;
    border:1px solid #d3d3d3;
}
.daftarisi div {
    width:100%;
}
.daftarisi .daftar {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.daftarisi .content {
    display: none;
    padding : 5px;
}

 <script>
$(".daftar").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Tutup" : "Daftar Isi";
        });
    });

});
</script>

 <div class="daftarisi">
    <div class="daftar"><span>Daftar Isi</span>

    </div>
    <div class="content">
        <ul>
            <li><a href="#subhead1">This is just some random content.</a></li>
            <li><a href="#subhead2">This is just some random content.</a></li>
        </ul>
    </div>
</div>