Cara Membuat Table of Contents (TOC) Otomatis di Blogger

Cara Membuat Table of Contents (TOC) Otomatis di Blogger
Cara Membuat Table of Contents (TOC) Otomatis di Blogger

 Cara Membuat Table of Contents (TOC) Otomatis di Blogger - Pada artikel kali ini saya ingin sedikit berbagi lagi masih seputar tentang dunia blogging yaitu bagaiaman Cara Membuat Table of Contents (TOC) secara otomatis dan juga SEO Friendly dengan tampilan berupa hirarki bertingkat.

Dengan menerapkan fitur TOC ini kedalam postingan yang kalian buat, tentu kalian akan sangat bermanfaat sekali bagi pengunjung atau visitor blog kalian untuk membantu mencari inti dari artikel yang sudah kalian jelaskan. Saya pun tidak heran jika penggunaan TOC saat ini sangat begitu digemari, namun banyak yang belum mengetahui metode ini, penggunaan metode TOC ini yaitu salah satu penyebabnya adalah karena blogger sekarang lebih cenderung untuk membuat artikel yang panjang.

Fungsinya sendiri sebenarnya hanya digunakan untuk memudahkan para pengunjung atau visitor blog kalian untuk menuju ke inti atau point utama pada isi artikel yang telah kalian jelaskan, namun juga tak bisa dipungkiri bahwa penggunaan fitur TOC ini dapat mempercantik pada tampilan konten yang layaknya suatu buku yang memiliki daftar isi.

Cara kerja dari fitur TOC ini ialah mengambil judul heading dan subheading di artikel dan membuatnya berurutan sehingga memiliki tampilan yang bertingkat, jadi tidak sesulit seperti dahulu membuat daftar isi secara manual, kalau dari kalian yang sudah lama mengikuti website ruangcoder, ada di website ini membuat fitur daftar isi secara manual, namun pada kali ini tidak seperti itu, sudah otomatis.

Table of Contents Otomatis

Fitur TOC yang pertama ini letaknya hanya bisa diterapkan diatas artikel maupun dibawah judul artikel saja, jika kalian ingin menyisipkan ke dalam artikel bisa ikuti tutorial kedua yaitu tutorial Semi Otomatis.

Pertama, silahkan kalian masuk ke menu Dashboard Blog > Template > Edit HTML, lalu simpan javascript berikut ini tepat diatas kode </head>

<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-z]/gi," ").trim().replace(/\s/g,"_")+'" title="'+f+'">'+f.replace(/[^a-z]/gi," ")+"</a>",a=parseInt(e),"<h"+e+" id='"+f.replace(/[^a-z]/gi," ").trim().replace(/\s/g,"_")+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("tocContent").innerHTML+=c}
    //]]>
</script>

Kemudian silahkan kalian cari kode <data:post.body/> gantilah 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>
<data:post.body/>
<script>tockeren();</script>
</div>

Terakhir, silahkan kalian tambahkan kode CSS berikut ini tepat diatas kode ]]></b:skin>
/* TOC Otomatis by Ruangcoder.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;
}
}
Tips!
Jika kalian telah menggunakan sticky header, pastikan kalian sudah mengatur tinggi header pada kode :target::before { Jika tidak, silahkan hapus pada kode tersebut

Table of Content Semi-Otomatis

Pada TOC kedua ini bisa dibilang adalah yang paling saya rekomendasikan untuk kalian gunakan, kenapa? tentunya karena bisa kalian pasang di dalam artikel sesuai kemauan kalian. Pertama, pasang terlebih dahulu javascript TOC otomatisnya seperti yang sudah saya jelaskan diatas dan simpan lagi diatas kode </head> Kemudian kalian cari kode <data:post.body/> lalu ganti dengan kode HTML berikut ini.
<div id='postMiddle'>
<data:post.body/>
</div>

Terakhir, silahkan kalian tambahkan juga kode CSS seperti yang telah saya berikan diatas.

Bagaimana Menerapkannya?

Nah, agar fitur TOC ini bisa muncul di dalam artikel kalian, kalian perlu selipkan kode HTML berikut ini, bisa diatas tag <h2> maupun diantara paragraf 2 dan 3.
<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>
<script>tockeren();</script>
Perhatian!
Pada bagian <script>tockeren();</script> baiknya kalian letakkan diakhir artikel supaya pemanggilan script dilakukan setelah halaman selesai dimuat.

Penutup

Pada kode JS dan CSS nya kedua fitur TOC ini ialah sama dan yang berbeda adalah pada saat pemanggil scriptnya, semi-otomatis lebih fleksibel karena letaknya bisa disesuaikan dengan keinginan kalian.
Oke mungkin artikel tentang Cara Membuat Table of Contents (TOC) Otomatis di Blogger sampai disini terlebih dahulu, semoga bermanfaat bagi kalian semuanya.