Cara Membuat Table Of Content (TOC) Otomatis di Blog

Daftar Isi: [Buka]

Table Of Content Otomatis - Hai, pada kesempatan ini The Pleh akan membagikan tutorial cara membuat Table Of Content (TOC) Otomatis di Postingan Blogger.

Seperti janji saya saat mereview template LinkMagz, saya akan menepati janji saya hari ini tentang membuat daftar isi otomatis di blog.

Cara Membuat Table Of Content Otomatis di Postingan Blogger

TOC singkatan dari table of content atau biasa di kenal dengan daftar isi yang berfungsi untuk menampilkan heading, sub heading dan minor heading dalam satu table dengan memanfaatkan jump link internal sebagai pemanggilannya.

Manfaat Memasang TOC

Selain memudahkan pengunjung mencari artikel yang ingin di baca langsung tanpa scroll ke bawah, TOC juga bisa memperindah pada tampilan search engine nantinya, seperti contoh dibawah:

Cara Membuat Table Of Content (TOC) di Blog

1. Backup Template Blog

Bila terjadi sesuatu yang tidak diinginkan seperti Error, kamu bisa memasang template lama kamu lagi.

2. Cari kode /head

Pertama, buka blogger > template > edit html dan cari kode </head>, jika sudah ketemu silahkan paste kode di bawah tepat di atas kode </head>.


<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>

<style media='all' type='text/css'>

.bwstoc {

 margin: 10px 0;

 background: #F0F0F0;

 border: 1px solid #ddd;

}

.bwstoc ol, .bwstoc ul {

 margin: 0 0 15px 20px;

 padding: 0;

}

.bwstoc ul {

 list-style: disc;

}

.bwstoc ol li, .bwstoc ul li {

 font-size: 95%;

 padding: 5px 10px 0 0;

 margin: 0 0 0 30px;

}

.bwstoc a {

 text-decoration: none;

}

.bwstoc a:hover {

 text-decoration: underline;

}

.bwstoc .bwstocHeader {

 font-weight: bold;

 font-size: 100%;

 position: relative;

 outline: none;

 border: none;

 padding: 5px 15px 5px 5px;

 margin: 5px 10px;

}

.bwstoc .bwstocHeader a {

 text-decoration: none;

 cursor: pointer;

}

.bwstoc .bwstocHeader a:hover {

 text-decoration: underline;

}

</style>

<!-- Blogger TOC -->

<script type='text/javascript'>

//<![CDATA[

function bwstoc() {

 var bwstoc = i = headinglength = getheading = 0;

 headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;

 if (headinglength > 0) {

 // Hanya Tampil Jika Ditemukan Minimal 1 Heading

 for (i = 0; i < headinglength; i++) {

 getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;

 var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");

 var bws_2 = bws_1.trim();

 var getHeadUri = bws_2.replace(/\s/g, "_");

 document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);

 bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";

 document.getElementById("bwstoc").innerHTML += bwstoc;

 }

 } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }

}

function bwstocShow() {

    var bwstocBtn = document.getElementById('bwstoc');

 var bwstocWrapID = document.getElementById('bwstocwrap');

 var bwstocLink = document.getElementById('bwstocLink');

    if (bwstocBtn.style.display === 'none') {

        bwstocBtn.style.display = 'block';

 bwstocWrapID.style.display = 'block';

 bwstocLink.innerHTML = 'Tutup';





    } else {

        bwstocBtn.style.display = 'none';

 bwstocWrapID.style.display = 'inline-block';

 bwstocLink.innerHTML = 'Tampil';

    }

}

//]]>

</script>

<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>

</b:if>

3. Cari kode data:post.body/

Silahkan cari kode <data:post.body/> dan hapus kode tersebut dan di ganti dengan kode dibawah. Untuk template viomagz terdapat 3 kode, setiap template berbeda.


<div id='post-toc'>

  <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'>

    <div class='bwstocHeader'>

      Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]

    </div>

      <ul id='bwstoc' style='display:none'/>

  </div>

<data:post.body/>

<script>bwstoc();</script>

</div>

4. Simpan Template

Untuk langkah terakhir silahkan kalian klik menyimpan.

Cara Mengatasi Daftar Isi Tidak Muncul di Blog

Jika kamu sudah memasang kode diatas dengan benar, maka seharusnya sudah muncul, bila tidak tampil bisa membaca artikel sebagai berikut:

#pastikan mempunyai heading, subheading dan minor heading.

Itu saja sih jika daftar isi tidak muncul di postingan blogger.

Penutup

Itu saja untuk hari ini tentang cara membuat Table Of Content (TOC) otomatis di blog, jika ada pertanyaan jangan sungkan untuk menghubungi kami dengan berkomentar di bawah.

ThePleh