Cara Membuat Daftar Isi Artikel Otomatis di Blogger

Daftar Isi [Tutup]

    Berikut adalah cara membuat daftar isi artikel atau table of content (ToC) pada postingan blogger. Salah satu manfaat penggunaan ToC pada artikel blog adalah menambah nilai SEO blog pada hasil pencarian organik.



    cara membuat table of content di blogger


    Dengan menggunakan ToC maka isi dari artikel akan ditampilkan secara point-to-point di hasil pencarian organik.
    Cara Membuat Daftar Isi Artikel Otomatis di Blogger

    Untuk memasang ToC ini caranya mudah, jika Anda ingin membuat ToC pada blog yang dimiliki, berikut adalah tahapan-tahapan pembuatannya.

    Cara Membuat Table of Content (ToC) Otomatis

    Sebelum memulai membuat table of content pada blog Anda, sebaiknya lakukan backup template blog yang digunakan, sehingga ketika terjadi error ketika editing, Anda sudah memiliki backup nya.

    Langkah 1: Cari Tag HTML </head>

    Pada tahap ini, silahkan gunakan tombol keyboard Ctrl + F untuk mempercepat proses pencarian tag </head>.

    Setelah ditemukan, silahkan salin kode berikut, dan tempel atau pastekan sebelum kode tag </head> tersebut.


    <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>

    Langkah 2: Cari Tag HTML <data:post.body/>

    Pada langkah kedua ini, silahkan cari tag <data:post.body/> pada template blog yang Anda gunakan, dan ganti tag tersebut dengan kode berikut.


    <b:if cond='data:blog.metaDescription'>
    
      <data:blog.metaDescription/><br/><br/>
    
    </b:if>
    
    <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>

    Secara umum, terdapat beberapa tema yang memiliki kode tag <data:post.body/> lebih dari satu, maka jika hal ini terjadi pada Anda, silahkan ganti tag <data:post.body/> tersebut pada tag kedua atau ketiga. Jika ingin lebih pasti lagi, maka Anda bisa mencoba nya satu persatu.

    Langkah 3: Simpan Tema

    Setelah semua editing selesai, silahkan simpan tema yang sudah di edit, sehingga settingan tema yang sudah dilakukan tidak hilang.


    Mengatasi ToC atau Daftar Isi Artikel Tidak Muncul

    Jika Anda telah benar dalam memasang kode-kode diatas, maka akan tampil sebagaimana berikut ini:

    Cara Membuat Daftar Isi Artikel Otomatis di Blogger

    Namun bagaimana jika tidak tampil?

    Jika tidak tampil maka kemungkinan besar bahwa artikel pada blog Anda tidak menggunakan Tag Heading.

    Tag Heading yang akan ditampilkan pada ToC ini adalah seperti Tag H2, H3, dan H4, jadi jika ToC yang sudah dibuat tidak tampil, maka koreksi penggunaan Tag Heading pada artikel blog Anda.



    Demikianlah seputar cara membuat daftar isi artikel otomatis atau ToC pada Blogger atau Blogspot. Semoga bermanfaat.
    Tinggalkan Komentar