Membuat Table Of Content Otomatis Dalam Postingan

Table of Contents

Table Of Content pada blogger tentunya bertujuan untuk mempermudah pengunjung menelusuri isi dalam blog atau website kita. Table Of Content adalah gambaran umum yang berisi tulisan berupa link dalam bentuk berupa tabel.

Jadi dengan postingan blog atau artikel yang lebih panjang, blog Anda kemungkinan besar akan mendapat peringkat yang baik di mesin pencari. Lalu, bagaimana cara membuatnya.

Membuat Table Of Content Otomatis Dalam Postingan

Berikut cara memasang dan membuat table of content otomatis di postingan blog. Kode dibawah ini harus di pasang dalam template dan postingan blog.

• Klik tema > Edit HTML
• Kemudian salin kode CSS dibawah ini diatas kode ]]</b:skin>

.mbtTOC {background-color: #eee;color: #707037;line-height: normal;margin: 10px 0;padding: 10px 0;width: auto;}
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}
.mbtTOC ul { list-style:none; } .mbtTOC ol li,.mbtTOC ul li { padding:15px 0 0; margin:0 0 0 30px; font-size:15px; }
.mbtTOC a{ color:#c00; text-decoration:none; } .mbtTOC a:hover{ text-decoration:underline; } .mbtTOC button{ background:#eee;font-size:16px;position:relative; outline:none; cursor:pointer; border:none; color:#707037; padding:0 0 0 15px;font-weight:700} .mbtTOC button:after{content: "\f03a"; font-family:FontAwesome;position:relative;left:5px;font-size:14px;font-weight: 300;}

• Salin kode JavaScript berikut tepat diatas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function mbtTOC() {var mbtTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
//]]>
</script>
</b:if>

Pastikan terdapat link font awesome di template Anda, jika belum ada tambahkan kode berikut tepat diatas kode </head>

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

Font awesome digunakan untuk memunculkan icon dalam daftar isi.

• Cari dan hapus kode berikut <data:post.body/> posting (biasanya kode kedua) dengan kode ini:

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

• Simpan template, pemasangan table of content selesai.

Lanjut cara memunculkan Table of content dalam postingan. Pastikan postingan Anda memiliki minimal dua subjudul dengan heading tag H3. Setelah selesai menulis postingan, klik mode HTML lalu pasang dua kode berikut:

• Salin kode berikut sebelum subjudul pertama

<div class="mbtTOC">
<button onclick="mbtToggle()">Daftar Isi</button>
<ol id="mbtTOC"></ol>
</div>

Ganti tulisan daftar isi dengan Table Of Content.

• Salin kode dibawah ini dibagian akhir paragraf

<script>mbtTOC();</script>

Demikian artikel mengenai bagaimana cara membuat table of content di blogger.