Memasang Daftar Isi Di Postingan Blogspot Terbaru

Memasang daftar isi di postingan blogspot tidaklah mudah. Dibutuhkan segera yang harus dipasang pada HTML blogspot mu. Memasang daftar isi atau table of content di blogspot sangat penting terhadap SEO.

Table of Contents

Daftar Isi / Table Of Content

Daftar isi atau table of content pada halaman postingan blogspot merupakan penjembatan untuk pengunjung dalam mencari informasi yang dibutuhkan. Daftar isi sangat membantu tu pengunjung dan bisa meningkatkan ranking seo blogspot.

Tanpa daftar isi (TOC) sangat dibutuhkan untuk laptop dengan konten artikel yang cukup panjang. Terlebih penting untuk artikel lebih dari 700 atau 1000 kata.

Contoh Website Besar Pakai Daftar Isi (TOC)

Salah satu contoh website besar yang membuat dan memasang daftar isi adalah Wikipedia. Wikipedia menyajikan banyak kata dalam setiap postingan artikel. Bahkan bisa lebih dari 2000 kata setiap postingan artikel.

Maka dari itu setiap halaman postingan blogspot yang memiliki jumlah kata cukup banyak diwajibkan membuat dan memasang daftar isi (TOC). Jangan khawatir karena di sini kita belajar bersama untuk mencapai yang kamu butuhkan.

Cara Memasang Daftar Isi di Postingan Blogspot

Cara memasang daftar isi di postingan blogspot yang harus kamu lakukan adalah mengubah di halaman html dasbor blogger. Langkah-langkah yang harus kamu lakukan kan untuk memasang daftar isi di postingan blogspot antara lain :

Ubah di HTML Blogspot

Langkah pertama, buka Blogger >> Tema >> Edit HTML >> Kemudian tambahkan kode CSS ini sebelum </head>

<style type=’text/css’>
/* CSS Table of Contents */
#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}
#toc_list{font-weight:700;cursor:pointer;margin:10px 0}
#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
#toc_list svg{vertical-align:middle}
#toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
#toc ol li:before{left:-2em}
#toc li a{color:#222}
#toc li a:hover{color:#1e90ff}
#toc{display:grid}
.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
.back_tocontent:hover{background:#2d3436;color:#fff}
:target::before{content:'';display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>

Langkah kedua, tambahkan kode di bawah ini sebelum </body>

<script type=’text/javascript’>
//<![CDATA[
$(document).ready(function(){$(“.post-body a”).on(“click”,function(o){if(“”!==this.hash){o.preventDefault();var t=this.hash;$(“html, body”).animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>
</script>

Simpan Tema.

Langkah ketiga ini simpan script yang sudah kamu tambahkan di HTML.

Informasi tambahan simpan script dibawah ini di notepad ataupun Google keep. Yang terpenting bisa dengan mudah mengambil untuk dicopas script yang sudah kamu simpan.

Ubah di Halaman Postingan Blogspot (Mode HTML)

Setelah mengobati halaman html dasbor blogger sekarang kembali ke ke halaman postingan blogspot. Ubah mode penulisan normal menjadi HTML.

Tambahkan kode berikut pada mode HTML, bukan compose.

<div id=”light-toc”>
<div id=”toc_list” onclick=”if (document.getElementById(‘toc’).style.display === ‘none’) { document.getElementById(‘toc’).style.display = ‘block’; } else { document.getElementById(‘toc’).style.display = ‘none’; }” role=”button” tabindex=”0″>
Contents <svg width=”18″ height=”18″ viewBox=”0 0 24 24″><path fill=”#000000″ d=”M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z” /></svg></div>
<div id=”toc”>
<ol>
<li><a href=”#toc_1″ title=”Subheading 1″>Bagian Subheading 1</a></li>
<li><a href=”#toc_2″ title=”Subheading 2″>Bagian Subheading 2</a></li>
<li><a href=”#toc_3″ title=”Subheading 3″>Bagian Subheading 3</a></li>
<li><a href=”#toc_4″ title=”Subheading 4″>Bagian Subheading 4</a></li>
<li><a href=”#toc_5″ title=”Subheading 5″>Bagian Subheading 5</a></li>
</ol>
</div>
</div>

Ubah tulisan yang memiliki kode menjadi sesuai sub judul di postingan blogspot kamu.