Cara Membuat Table of Content Hirarki Otomatis di Blogger

Menulis artikel yang panjang dan sangat detail memang sangat bagus dalam memberikan informasi kepada pembaca. Tak hanya itu, artikel dengan jumlah kata yang sangat panjang seperti lebih dari 1000 kata tentu sangat baik di mata Google, sebagian besar dari seorang blogger tentu ingin sekali merapikan postingannya dengan menggunakan bantuan Table of Content layaknya seperti menulis artikel ataupun laporan pada Microsoft Word.

Table of Content sendiri mencakup beberapa poin-poin penting di dalam sebuah artikel seperti H2 dan juga H3 pada artikel blog. Selain itu, dengan menggunakan TOC otomatis juga akan membantu pembaca untuk menemukan poin-poin penting yang ingin langsung dibaca tanpa harus membaca dari awal, pembaca hanya perlu klik daftar isi dan memilih poin mana yang ingin dibaca, hal tersebut biasanya digunakan untuk mempersingkat waktu.

Memasang TOC Otomatis juga akan memberikan manfaat yang cukup besar pada SEO. Heading 1 dan Heading 2 yang sudah dimasukan ke dalam Table of Content tentunya akan terindex oleh mesin pencari seperti Google dan akan ditampilkan di hasil pencarian.’

Cara Membuat Table of Content (TOC) Hirarki Otomatis di Blogger

Seperti yang sudah diketahui bersama bahwasannya fitur Table of Content ini sudah banyak digunakan oleh developer pembuat template. Sayangnya, masih banyak sekali template blogger yang masih belum memiliki fitur Table of Content otomatis ini. Sehingga diharuskan untuk membuat TOC otomatis tanpa bantuan pembuat template.

Oleh karena itu, kesempatan kali ini saya akan membagikan tutorial mengenai cara membuat TOC otomatis di blogger dengan tampilan hirarki dan tentunya SEO friendly. Oh iya, sangat disarankan untuk membaca artikel ini agar tidak ada kesalahan dalam memasukan script pada template agar tidak terjadi error. Sebelum melakukan cara ini, alangkah baiknya back-up terlebih dahulu template yang saat ini anda gunakan.Demo

Table of Content Otomatis

Jenis TOC otomatis ini hanya bisa ditampilkan diatas artikel ataupun dibawah judul blog, sehingga anda tidak dapat menyesuaikan ataupun menempatkannya didalam artikel seperti di paragraph 2, dibawah H2, dan lain sebagainya. Namun, jika ini tidak menjadi suatu masalah bagi anda, silahkan ikuti langkah-langkah berikut ini.

1. Langkah pertama yang harus anda lakukan yakni dengan menambahkan CCS berikut ini tepat diatas kode ataupun sebelum kode ]]></b:skin> agar tampilannya menjadi hirarki. /* TOC Otomatis - mahes.web.id */ .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; } }
2. Selanjutnya anda masukan saja script dibawah ini tepat diatas kode </head>. Biasanya kode </head> berada dibawah script ]]></b:skin> <!-- TOC Start --> <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> <!-- TOC End -->
3. Langkah yang terakhir yakni anda cari saja kode <data:post.body/>. Jika sudah menemukannya, silahkan ganti kode tersebut dengan script yang sudah dibagikan dibawah 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>
4. Selesai.

Kode <data:post.body/> dalam beberapa template tentu memiliki jumlah yang berbeda-beda, sebagai contoh pada template VioMagz terdapat ada 3 kode seperti itu. Untuk merubahnya, silahkan anda cari <data:post.body/> yang kedua.

Table of Content Semi Otomatis

Table of Content semi otomatis ini memang sangat saya rekomendasikan untuk anda dikarenakan anda bisa menyesuaikan dan meletakkannya sesuai dengan keinginan masing-masing. Anda juga tidak perlu kesulitan dalam memasang TOC semi otomatis ini, dikarenakan anda hanya perlu memanggil script TC dengan script yang nantinya akan diberikan dibawah ini.

1. Silahkan ikuti langkah-langkah pada poin 1 dan 2 seperti yang sudah dijelaskan diatas.
2. Kemudian anda cari kode <data:post.body/> dan silahkan rubah dengan kode berikut: <div id='postMiddle'> <data:post.body/> </div>
3. Lalu silahkan masukan kode dibawah ini tepat pada artikel yang ingin anda pasangkan Table of Content otomatis, baik itu dibawah H2, paragraph 2, dan lain sebagainya. <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>
4. Jika sudah, agar Table of Content berjalan dengan baik. Silahkan masukan kode dibawah ini tepat di bagian paling bawah artikel. <script>tockeren();</script>
5. Selesai.

Contoh penulisan Table of Content Semi Otomatis yang benar agar berjalan dengan baik:

Ini adalah contoh penulisan H2 dan H3 yang Benar.

Contoh ppenulisan Table of Content Semi Otomatis yang salah, sehingga menyebabkan H2 ataupun H3 tidak muncul pada TOC otomatis:

Ini adalah contoh penulisan H2 dan H3 yang salah.

Demikianlah tutorial saya kali ini mengenai cara membuat Table of Content hirarki otomatis di blogger dengan mudah, apabila anda mengalami permasalahan, silahkan tanyakan pada kolom komentar yang sudah disediakan. Selamat mencoba!