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

  9. Renovasi Otak mengatakan

    Supaya TOC nya berada dibawah gambar gimana ya bang? Soalnya, artikel gw diawali dengan gambar. Nah biar TOC nya berada dibawah gambar tersebut gimana?

    Balas

      • Hlaiki mengatakan

        iya mas bukannya bentrok sih, tapi cuma ketutup aja sama header stickynya sih mas..

        di artikelnya kompi ajaib ada mas, biar gak ketutupan header, tapi bingung cara gabunginnya sama script nya kamu mas..

        tolong di update mas.. akan sangat membantu kalau sudah tolong reply komen ini ya mas

        Balas

          • Hlaiki mengatakan

            maaf mas tapi masih ketutup, coba kamu buka TOC trus klik pas mengarah kebagian headingnya.. naah ketutup disitu mas

          • Bibit WS mengatakan

            Owalah.. kalo soal itu yaa jelas tertutup. Penggulungan halaman kan memang sampai di ujung atas, sementara paling atas sudah terisi menu navigasi. Bukan bentrok ini namanya, tapi tertutup karna memang ruang paling atas ada navigasinya.

    • 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

      • Nikmal Abdul mengatakan

        Mas, mau nanya. Itu nambahin id=”post-toc” nya dibagian mana ya? Caranya? Terus kalau saya nerapinnya tampil dulu baru nutup gimana kalau di tengah paragraf, apakah kodenya beda lagi?

        Balas

          • Rinjani Melda mengatakan

            Min Min Admin. . Perhatikan Ay nih. Ay udah work apply ini plugin ke blog secara manual lewat edit html dan secara manual naro di tengah paragaf. worth it deh ay. buktiin aja dulu di postingan ane tentang teks negosiasi [https://www.kudupinter.com/2019/10/21-contoh-teks-negosiasi-singkat-jual.html];

            Caranya sama , cuma semua script ini

            Konten [<a>Tampil</a>]

            bwstoc();
            <!– end TOC –>

            tidak semua di masukin ke edit html. yang ane masukin hanya ini

            bwstoc();
            <!– end TOC –>

            dan sisanya yang ini

            Konten [<a>Tampil</a>]

            ay ay taruh setelah paragraf secara menual lewat feature html postingan.

            and finally done. iam so inpeerresed with my work . . thnks kiyuh for your sugestion baby

    • 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

  25. mistersongga mengatakan

    wah, akhirnya nemu juga caranya. Sudah banyak saya cari di mbah google nemunya malah bikin sitemap. nanti saya coba ah di mistersongga.blogspot.com. semoga nanti jadi lebih humanfriendly lagi blognya

    Balas

  34. adonan mengatakan

    bang.. utk viomagz solusinya bagaimana ya? karena tidak muncul.. sudah dibikin heading subhead
    makasih bang

    Balas

  37. sam mengatakan

    alhamdulilah bekerja di template hasil download an
    dan otomatis di setiap postingan
    terimakasih mas,

    Balas

  39. Ilmu Coding mengatakan

    Assalamu’alaikum Mas Bibit. Izin mengembangkan ide ini ya. Saat ini saya sudah berhasil menerapkan sistem hirarkinya. Semoga ke depannya bisa diulas sama Mas Bibit.

    Balas

  46. Triyatni mengatakan

    Sudah berhasil di blog saya. Terima kasih banyak. Saya selalu rekomndasikan blog ini jika ada yang bertanya cara bikin daftar isi di blogspot hehe

    Balas

  48. ex-themes mengatakan

    itu kan untuk blogger kang.. kalo wordpress kasih tutor juga dong gan… jangan yg pakai plugin tapi without plugin yah kang…

    Balas

  56. Akur Atan mengatakan

    Halo Mas, saya coba membandingkan apa yang sudah dikerjakan oleh Anda melalui satu blog sangat sederhana dapat hasil “sangat bagus-sangat memuaskan”. Hasil uji coba ini, pertama saya membuat satu posingan dan berikutnya membuat halaman pertama dilanjutkan halaman kedua. Luar biasa. Bagus… sungguhan sangat bagus! Great!. ini blognya: https://tocbibit.blogspot.com/

    Balas

Tinggalkan Balasan

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