-->

Cara Membuat Table of Content blogger Otomatis (TOC)

Daftar Isi [Tampilkan]

serieswans.com - Halo sobat blogger, pada kesempatan kali ini saya akan membagikan tutorial mengenai bagamaimana cara membuat table of content blogger Otomatis (TOC) SEO friendly.

Jika anda pengguna platform Wordpress, tentunya akan sangat mudah dengan bantuan plugin untuk membuat table of content atau daftar isi di postingan artikel. berbeda dengan pengguna platform blogger ini yang tidak ada pluginnya. sebelum lanjut ke tutorialnya, saya akan bahas terlebih dahulu mengenai Table of Contents.

Cara Membuat Table of Content blogger Otomatis (TOC)

Apa itu Table of Contents (TOC)

Table of Content atau yang biasa di bilang Daftar isi dari sebuah postingan artikel, tujuannya untuk mempermudah pengguna untuk melompat ke bagian artikel yang ingin mereka baca, jadi ketika pengguna mengklik isi dari table of content tersebut, maka pengguna akan langsung di arahkan ke bagian yang ingin mereka baca.

contohnya saja jika anda pernah mengunjungi dan membaca artikel di wikipedia, pasti anda pernah melihat table of content atau daftar isi tersebut dan mengklik salah satu bagian dari isi daftar konten teresebut, setelah itu anda akan di arakan ke bagian yang ingin anda baca. 

Cara Memasang Table Of Contents Otomatis di Blogger

  • Masuk ke akun blogger
  • Pilih menu Tema => Edit HTML
  • kemudian copy CSS dan Javascript berikut ini dan letakan sebelum kode </head> atau </body>

<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 > 1) { 
 // Hanya Tampil Jika Ditemukan Minimal 2 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>
  • Kemudian, supaya anda tidak perlu menambahkan kode pemanggil TOC di postingan secara manual dan anda tidak perlu mengedit artikel yang sudah lama. silahakan cari kode <data:post.body/>

tips — ada beberapa kode <data:post.body/> didalam tema blogger, biasanya ada 2 atau 3. silahkan anda pilih kode yang ke 3 atau kodenya terletak pada halaman item.

  • Jika sudah ketemu, silahkan ganti dengan kode di bawah ini
<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>
  • Setelah itu simpan tema dan cek hasilnya

Cara Membuat TOC di artikel Blog Muncul

Cara Membuat Table of Content blogger Otomatis (TOC)

Kode javascript di atas akan secara otomatis membaca tag heading h3 dan h4 yang kemudian akan menjadi table of contents.agar table of contents tersebut muncul,pastikan anda menggunakan subheading atau minor heading saat menulis artikel. contohnya sebagai berikut

Akhir kata 

Demikian pembahasan kali ini mengenai Cara Membuat Table of Content blogger Otomatis (TOC). jika ada pertanyaan silahkan berkomentar di bawah ya sob, semoga bermanfaat.
Next
Previous
Tidak ada kata "Tapi" dan "Nanti" jika anda ingin Sukses
  • Facebook
  • Twitter
  • Instagram
  • Buka Komentar ( 0 )
    tutup Komentar

    0 Komen

    Posting Komentar

    • Mohon Tinggalkan jejak sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.
    • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
    • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
    • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
      <i>#comments</i>
    • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
      <em>#comments {margin:0; padding:10px 15px}</em>

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    x
    Berlangganan

    Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!