Tutorial Membuat Table of Contents Hirarki Otomatis di Blogger

Dalam penulisan artikel, sebagian blogger menghendaki tulisan panjang dan mendetail. Ini bagus untuk memberikan penjelasan yang lengkap kepada pembaca, selain juga baik di mesin pencari seperti Google. Agar enak dibaca dan tidak menjenuhkan, maka mereka pun membuat table of contents di dalam postingan tersebut.

Table of contents (TOC) atau daftar isi merupakan fitur berupa daftar yang mencakup judul dari poin-poin penting di dalam sebuah artikel. Jika kita klik judul tersebut, secara otomatis akan mengarahkan kita pada bahasan dari judul tersebut. Contoh paling umum mengenai fitur ini bisa kita lihat di situs Wikipedia.

Manfaat Memasang Table of Contents di Blog

Fitur TOC memiliki banyak manfaat. Bagi pengunjung blog, mereka bisa langsung menuju pada informasi yang mereka cari dengan mengklik tautan di dalam TOC. Kebanyakan pengguna internet memang lebih suka fokus pada bahasan yang diinginkan, meskipun tidak sedikit juga yang tertarik membaca artikel secara keseluruhan.

Tidak hanya bagi pengunjung, dengan membuat table of contents di blog, kita akan  mendapat manfaat besar di sisi SEO. Judul atau menu di dalam TOC akan terindek mesin pencari Google dan ditampilkan di hasil pencarian. Menu yang terindek di Google menjadi jump link yang mengarah langsung ke bahasan. Berikut contohnya:

Dari gambar di atas, bisa kita lihat bahwa Google juga mengindex jump link dari menu table of contents dalam artikel di blogkulo.com (blog saya yang lain). Namun, blog tersebut menggunakan platform Wordpress Self-Hosted. Lalu, bagaimana memasang table of contents di Blogger? mudah, ikuti panduannya di bawah ini.

Tutorial Membuat Table of Contents di Blogger

Tutorial ini memuat script yang bukan karya saya sendiri. Script ini berasal dari idnxmus.com. Banyak tutorial sejenis dengan script dan tampilan TOC yang berbeda-beda. Saya memilih script ini karena mampu menampilkan menu TOC secara hirarki dengan mengambil heading (h2, h3, h4) yang ada di dalam artikel.

Selain menampilkan tampilan hirarki, TOC ini juga seo friendly. Dan menariknya, terdapat dua opsi, otomatis dan semi-otomatis. Untuk table of contents otomatis, tampilan TOC akan otomatis berada di atas artikel. Sedangkan yang semi-otomatis lebih dinamis, karena Anda bisa menempatkannya di dalam artikel. Berikut tutorialnya.

Daftar Isi Otomatis

Dalam dashboard Blogger, klik menu Theme/Tema di sisi kiri lalu klik Customize/Sesuaikan dan pilih Edit HTML.

Cari kode </head>. Jika sudah ketemu, salin script di bawah ini dan tempel atau letakkan di atas kode tersebut.

<script type='text/javascript'>
    //<![CDATA[
      function tockeren(){
       var a=1,b=0,c="";
       document.getElementById("postMiddle").innerHTML=document.getElementById("postMiddle").innerHTML.replace(/<h([\d]).*?>(\n.*?|.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#'+f.replace(/[^a-z0-9]/gi," ").trim().replace(/\s/g,"_")+'" title="'+f+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='"+f.replace(/[^a-z0-9]/gi," ").trim().replace(/\s/g,"_")+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("tocContent").innerHTML+=c}
    //]]>
</script>

Kemudian, carilah kode <data:post.body/>. Jika menemukannya, ganti kode tersebut dengan kode HTML berikut ini.

<div id='postMiddle'>
<div class='tableOfContent'>
  <input aria-label='Daftar Isi' class='toctoggle' id='toctoggle' role='button' type='checkbox'/>
  <span class='toctogglespan'><label class='toctogglelabel' for='toctoggle'/></span>
  <div id='tocContent'></div>
</div>
<data:post.body/>
<script>tockeren();</script>
</div>

Langkah terakhir, carilah kode ]]></b:skin>. Tambahkan kode CSS berikut ini di atas kode tersebut. Simpan dan lihat hasilnya.

/* TOC Otomatis by idnxmus.com */
.post-body .tableOfContent {
     padding:12px 15px;
     margin:20px 0;
     background-color:#f8f9fa;
     border:1px solid #e4e9ef;
     border-radius:4px;
     font-size:16px;
     line-height:1.5em;
}
.post-body .tableOfContent #tocContent {
     margin:5px 0;
}
.post-body .tableOfContent #tocContent ol, .post-body .tableOfContent #tocContent ul {
     margin:0 0 10px;
     padding:10px 0 0 17px;
     position:relative;
}
.post-body .tableOfContent #tocContent ol ol, .post-body .tableOfContent #tocContent ul ul, .post-body .tableOfContent #tocContent ol ul, .post-body .tableOfContent #tocContent ul ol {
     padding-left:30px;
}
.post-body .tableOfContent #tocContent li {
     position:relative;
     margin:0 0 10px;
}
.post-body .tableOfContent #tocContent ol ul:before, .post-body .tableOfContent ol ol:before, .post-body .tableOfContent #tocContent ul ol:before, .post-body .tableOfContent ul ul:before {
     content:'';
     display:block;
     width:1px;
     height:calc(100% - 10px);
     position:absolute;
     left:-11px;
     border-left:1px dashed rgba(0,0,0,.2);
     top:0;
}
.post-body ol.point2 li:before {
     content:'';
     display:block;
     height:1px;
     width:15px;
     border-top:1px dashed rgba(0,0,0,.2);
     position:absolute;
     left:-38px;
     top:10px;
}
.post-body .tableOfContent #tocContent a {
     display:inline-table;
     margin-left:5px;
}
.post-body .tableOfContent #tocContent .point2 a {
     margin:0;
}
.post-body .tableOfContent #tocContent a:hover {
     text-decoration:underline;
}
.post-body .tableOfContent .toctogglelabel {
     display:block;
     cursor:pointer;
}
.post-body .tableOfContent .toctogglespan i.icon.icon-dropdown {
     float:right;
     margin:0;
}
ol.point2 li {
     list-style-type:circle;
     position:relative;
}
:not(:checked) > .toctoggle {
     display:inline !important;
     position:absolute;
     opacity:0;
}
.tableOfContent .toctogglespan .toctogglelabel:before {
     content:'Daftar Isi :';
     font-weight:600;
}
.toctoggle:checked ~ #tocContent {
     display:none;
}
label.toctogglelabel:after {
     background-image:url("data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z' fill='%2309204C'/></svg>");
     content:'';
     margin-top:3px;
     width:16px;
     height:16px;
     background-size:cover;
     background-repeat:no-repeat;
     background-position:center center;
     float:right;
     transition:all .3s ease;
     -webkit-transition:all .3s ease;
}
.toctoggle:checked + .toctogglespan .toctogglelabel:after {
     -webkit-transform:rotate(180deg);
     transform:rotate(180deg);
}
.post-body ol.point2 {
     padding-top:10px;
}
:target::before {
     content:"";
     display:block;
     height:60px;
     margin-top:-60px;
     visibility:hidden;
}
@media screen and (max-width:480px) {
.post-body .tableOfContent {
     font-size:15px;
}
}

Daftar Isi Semi-otomatis

Untuk TOC Semi-otomatis, script di atas </head> dan kode CSS sama dengan yang TOC otomatis. Bedanya, kode <data:post.body/> diganti dengan kode berikut ini:

<div id='postMiddle'>
<data:post.body/>
</div>

Selanjutnya, ketika mengedit atau menulis artikel, masuk ke Tampilan HTML di dalam halaman edit postingan. Letakkan kode berikut ini sebelum heading pertama di dalam artikel (misalnya <h2> atau <h3>).

<div class='tableOfContent'>
  <input aria-label='Daftar Isi' class='toctoggle' id='toctoggle' role='button' type='checkbox'/>
  <span class='toctogglespan'><label class='toctogglelabel' for='toctoggle'/></span>
  <div id='tocContent'></div>
</div>
<script>tockeren();</script>

Agar tidak mempengaruhi kecepatan loading blog, pindahkan kode <script>tockeren();</script> di bagian paling bawah artikel Anda. Simpan dan lihat hasilnya.

Demikian sekilas tutorial membuat Table of Contents di Blogger. Tutorial ini sudah saya terapkan di blog ini, demonya pun bisa di lihat dalam artikel ini. Hanya saja, kode CSS sedikit saya rubah menyesuaikan template blog ini. Untuk tutorial lainnya, baca juga Tutorial Membuat Sitemap di Halaman Statis Blogger.