-->

TOC (Tabel Of Content) atau Daftar Isi Otomatis di Blogspot

Cara mudah membuat TOC (Tabel Of Content) atau Daftar Isi Otomatis di Blogspot untuk SEO dan tidak menggunakan jquery

Daftar Isi [Tutup]

    Untuk menambah jumlah skor seo dan tentu saja memudahkan pengunjung untuk mencari inti pembahasan pada suatu artikel, maka diperlulan yang namanya daftar isi atau Tabel Of Content yang disingkat TOC.

    Membuat TOC (Tabel Of Content) atau Daftar Isi Otomatis di Blogspot

    Dengan adanya cara otomatis membuat TOC ini memudahkan penulis agar tidak perlu susah-susah melakukan edit secara manual di html untuk membuat daftar isi ini.

    Dikarena kan juga akan menambah waktu lebih lama untuk merubah atau menambahkan attribut id di setiap heading yang ada pada artikel, apabila terjadi kesalahan maka daftar isi tersebut akan error atau tidak berfungsi sebagai mana mestinya.

    Dari sumber yang saya baca, toc ini tidak menggunakan jquery yang pasti lebih bersahabat untuk skor pada blog tidak berkurang

    Apa itu Tabel Of Content (TOC)?

    Tabel Of Content merupakan inti pembahasan, judul, sub judul atau ide pokok artikel yang berupa kalimat panjang ataupun pendek yang di tandai dengan Heading Seperti H2, H3, dan H4.

    TOC di blogger atau blogspot harus dibuat menggunakan script/kode yang akan dipasang pada Tema secara manual yang akan menghasilkan Daftar Isi secara otomatis di artikel nantinya. seperti pada artikel mantankode ini sudah terpasang.

    Berbeda dengan WordPress yang dimana kamu hanya tinggal memasang plugin dan sedikit pengaturan,jreng jreng sudah jadi.

    Tapi kamu tidak perlu khawatir, karena pemasangannya ini tidak lah susah.

    Pengaruh TOC untuk Blog?

    Tidak perlu khawatir, kecepetan blog anda tidak terpengaruh ketika menggunakan Tabel Of Content ini.

    Kamu juga akan mendapatkan hadiah sitelink dari google, apabila telah sesuai dengan persyaratan yang berlaku.

    Langkah 1: Backup Tema

    Untuk menghindari hal yang tidak di inginkan seperti error, ada baiknya untuk melakukan backup tema terlebih dahulu.

    Langkah 2: Menambahkan CSS JS

    Letakkan kode css berikut ini diatas kode </head>

    <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:0;border:0;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 b=i=headinglength=getheading=0;headinglength=document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;if(headinglength>1){for(i=0;i<headinglength;i++){getheading=document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;var d=getheading.replace(/[^a-z0-9]/gi," ");var c=d.trim();var a=c.replace(/\s/g,"_");document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id",a);b="<li><a href='#"+a+"'>"+getheading+"</a></li>";document.getElementById("bwstoc").innerHTML+=b}}else{document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>")}}function bwstocShow(){var b=document.getElementById("bwstoc");var c=document.getElementById("bwstocwrap");var a=document.getElementById("bwstocLink");if(b.style.display==="none"){b.style.display="block";c.style.display="block";a.innerHTML="Tutup"}else{b.style.display="none";c.style.display="inline-block";a.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>

    Langkah 3: Menambahkan HTML

    Silahkan cari kode <data:post.body/>  biasanya terdapat 1 - 3, apabila ada lebih silahkan di ganti semua dengan kode berikut 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 -->

    Langkah 4: Simpan Tema

    Apabila terjadi error, silahkan di perhatikan di bagian apa error tersebut. Apabila ada yang tidak sengaja ada yang dihapus silahkan gunakan tema yang ada backup tadi.

    Opsi Tambahan

    Dicara diatas daftar isi tidak tampil ketika artikel dibuka, melainkan harus di klik Tampil agar muncul.

    Nah maka dari itu saya mencoba merubah sedikit kode tersebut agar daftar isi ditampilkan ketika artikel dibuka.

    Silahkan diubah kode berikut ini.

    Untuk JavaScript </head>

    <script type='text/javascript'>/*<![CDATA[*/function bwstoc(){var b=i=headinglength=getheading=0;headinglength=document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;if(headinglength>0){for(i=0;i<headinglength;i++){getheading=document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;var d=getheading.replace(/[^a-z0-9]/gi," ");var c=d.trim();var a=c.replace(/\s/g,"_");document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id",a);b="<li><a href='#"+a+"'>"+getheading+"</a></li>";document.getElementById("bwstoc").innerHTML+=b}}else{document.write("<style>.bwstoc{display:block !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>")}}function bwstocShow(){var b=document.getElementById("bwstoc");var c=document.getElementById("bwstocwrap");var a=document.getElementById("bwstocLink");if(b.style.display==="block"){b.style.display="none";c.style.display="inline-block";a.innerHTML="Tampil"}else{b.style.display="block";c.style.display="block";a.innerHTML="Tutup"}};/*]]>*/</script>

    Untuk <data:post.body/>

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

    Penutup

    Semoga artikel saya ini bermanfaat, dan mudah dipahami. Saya juga ucapkan terima kasih kepada admin bibit.ws yang telah membuat tutorial tabel of content otomatis.

    Show comments
    Hide comments


    MANTANKODE.NET Kebijakan Komentar, Silahkan berkomentar sesuai ketentuan perundang-undangan!
    Baca Kebijakan Berkomentar kami sebelum berkomentar.

    Notification

    Donasi yang anda berikan akan digunakan untuk, pengembangan blog ini.

    Kesehatan admin dan lebih semangat berbagi tips dan informasi.

    Yang telah membantu saya ucapkan terima kasih

    Donasi: Trakteer

    Done
    Night Mode