Top

Bibit WS Blog

Hanya sebuah situs web pribadi sederhana

Home » Tutorial Blog » Cara Membuat Table of Content Blogger (TOC di Blogspot) SEO Friendly

Cara Membuat Table of Content Blogger (TOC di Blogspot) SEO Friendly

Bibit.WS – Kalau di WordPress, bikin daftar isi konten di suatu posting artikel sangatlah mudah dengan bantuan plugin. Tapi berbeda dengan Blogspot atau Blogger.com yang tidak ada pluginnya. Dan pada kesempatan kali ini saya mau share hasil script oprekan sebagai cara membuat table of content Blogger atau TOC di Blogspot yang lebih SEO friendly.

Kenapa saya sebut “lebih SEO friendly”?

Jadi begini ceritanya, saya dapat kode pembuat TOC di blogspot ini dari blog alinuxblog.com. Setelah terpasang, hasil permalink-nya hanya berupa penambahan ‘#point1’, ‘#point2’, ‘#point3’, dan seterusnya.

Sedangkan ketika melihat di WordPress, hasil permalink-nya adalah hasil generate sesuai judul Heading-nya masing-masing. Tentu menurut saya pribadi, permalink yang sesuai dengan judul Heading seperti pada WP akan lebih SEO friendly.

Berikut contoh permalink hasilnya:

TOC di Blogspot

Cara Bikin Table of Contents untuk Blogspot

Tidak saya tulis panjang lebar lagi, berikut tutorial dan script selengkapnya:

Masuk ke akun Blogger anda. Pilih menu Tema. Klik tombol Edit HTML.

Copy semua kode berikut dan tempel DI ATAS </head> atau bisa juga DI BAWAH <body> tergantung selera anda (pilih salah satu saja):

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
/* 
 * Blogspot TOC
 * https://bibit.ws/toc-di-blogspot.php
*/
.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'>
/* 
 * SEO Friendly Blogspot Table Of Contents
 * https://bibit.ws/toc-di-blogspot.php
*/
//<![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>

Selanjutnya, biar anda tidak perlu menambah kode pemanggil TOC di postingan blogspot secara manual, dan tidak perlu edit artikel yang sudah ada, silakan anda modif <data:post.body/> masih di Tema blogspotnya.

Cari kode <data:post.body/> dan 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><!-- end TOC -->

Akan ada beberapa (2 atau 3) kode <data:post.body/> di dalam Tema blogspot anda, jadi silakan ganti semua. Anda bisa mencarinya dengan shortcode keyboard ‘Ctrl+F’.

Nah sekarang klik tombol “Simpan Tema” dan cek hasilnya.

Sebagai info tambahan, selain URL hasilnya lebih SEO friendly, script TOC blogspot di atas juga tidak memakai jQuery, tanpa Google Fonts dan tanpa Font Awesome, sehingga diharapkan lebih ringan.

Tentang Bibit WS

Hanya seorang blogger biasa. Bukan mastah ataupun suhu, panggil saja "mas" biar akrab. Sedang mencoba membantu sesama newbie dengan membuat plugin WordPress berakronim CSB.

Reader Interactions

Komentar

  3. Taufik Junaidie mengatakan

    Alhamdulillah work…

    setelah saya kesana kemari, akhirnya ketemu cara nya dipostingan ini…

    tanpa susah-susah memasukkan TOC setiap postingan, yang ini sudah otomatis…

    trimakasih banyak ya….

    semoga ilmunya berkah bermanfaat bagi banyak orang

    Salam kenal dari taufikjunaidie.com

    Balas

  6. Reza mengatakan

    Untuk mengatur ukurannya mas, gimana ya?
    Saya pakai menu sticky. Jadi, judul heading-nya tertutup bila di buka melalui TOC ini.

    Dimana merubah ukurannya ya mas?

    Balas

  8. Wiki Pebrianto mengatakan

    Udah sekian lama nyari-nyari cara biar bisa otomatis, eh akhirnya ketemu juga hehehe. Mantap min sangat bermanfaat.
    .
    Tapi sayangnya, saat ini saya dalam perampingan elemen di HTML template min, jadinya ditunda dlu untuk pemasangan material ini.
    .
    Tapi yang jelas tutornya benar-benar “Baru” dan masih langka. Sukses selalu ya min..

    Balas

    • Bibit WS mengatakan

      Kalo manual, pertama harus tambahkan id="post-toc" di awal postingan lewat edit template.

      Lalu, di kolom penulisan artikel pilih tab yg HTML. Masukan kode pemanggil yg seperti ini kebawah paragraf sesuai keinginan:

      <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>
      <script>bwstoc();</script>

      Balas

    • Bibit WS mengatakan

      Pada langkah yang akhir, ganti kode dengan ini:

      <div id='post-toc'>
      <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tutup</a>]</div><ul id='bwstoc' style='display:block'/></div>
      <data:post.body/>
      <script>bwstoc();</script>
      </div><!-- end TOC -->

      Balas

  18. Uki mengatakan

    Saya sudh pernah coba dan hasilnya memuaskan terimakasih mas

    Tapi saya ingin tanya sekaligus request hehe bagimana caranya suapaya toc otomatis tampil mas

    Balas

    • Bibit WS mengatakan

      Pada langkah terakhir pada postingan di atas, ganti kodenya dengan script modif berikut ini:

      <div id='post-toc'>
      <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tutup</a>]</div><ul id='bwstoc' style='display:block'/></div>
      <data:post.body/>
      <script>bwstoc();</script>
      </div><!-- end TOC -->

      Balas

  21. idkholis mengatakan

    Mantap scriptnya mas.. saya coba pasang di theme blog hasilnya OK. Tadinya mau pasang sebagian artikel yang dikira penting aja.. eh taunya ada script yang bisa add toc keseluruhan artikel..

    Sangat manfaat dan sangat membantu mas turorialnya.
    Makasih ya mas bibit.ws

    Balas

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *