Membuat Daftar Isi Table Of Content di Blogger

Apa itu Daftar isi Table of content (TOC) Blogger? Daftar isi Table of content atau Sitemap pada blogger tentunya bertujuan untuk mempermudah pengunjung. Daftar isi atau yang biasa disebut Table Of Content adalah gambaran umum yang berisi tulisan berupa link dalam bentuk berupa tabel.

Jadi dengan posting blog atau artikel yang lebih panjang, blog sobat kemungkinan akan mendapat peringkat yang lebih baik di mesin pencari google. Google menganggap posting yang lebih panjang sebagai faktor peringkat.

Berikut cara memasang dan membuat daftar isi atau Table Of Content otomatis postingan blog.

Membuat daftar isi subjudul postingan blog:

Kode-kode ini harus di pasang dalam template dan postingan blog.

• Klik tema > Edit HTML
• Salin kode CSS daftar isi untuk blogger 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 JS toc untuk blogger 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 ada link font awesome di template sobat, 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! Tema

Pemasangan daftar isi atau table of content selesai. Berikutnya cara memunculkan daftar isi TOC dalam postingan.

Pastikan postingan sobat memiliki minimal dua subjudul dengan heading tag H3. Setelah selesai menulis postingan, klik mode HTML lalu pasang dua kode berikut:

• Salin kode dibawah ini 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 berikut dibagian akhir paragraf

<script>mbtTOC();</script>

Itulah artikel mengenai bagaimana cara membuat Table Of Content di blogger.

Tweet