Skip to main content

Cara Membuat Table of Content di Blogger (TOC Otomatis) Versi AMP

Cara membuat dan memasang table of content valid AMP di blogger. Jika di beberapa artikel yang ada di internet membahas cara membuat table of content di blogger tapi pada blog non AMP, nah kali ini saya akan membahas sebaliknya, saya akan membuat table of content atau daftar isi otomatis di blogger valid AMP yang tentunya simple dan SEO Friendly.

Fungsi Table Of Content di Blogger

Table of Content memiliki fungsi yang sama seperti di daftar isi yang ada di sebuah buku, yaitu menyampaikan inti dari pembahasan yang di berikan sebuah artikel, namun yang membedakan TOC versi buku dan versi blog adalah, di blog anda tinggal mengklik apa yg ada di daftar isi tanpa harus mencari perhalaman seperti daftar isi yang ada di buku.

BACA JUGA : Cara Membuat Parse Koding Postingan

Jika biasanya menggunakan TOC di blogger dilakukan dengan cara manual, yaitu menempelkan kode kedalam postingan, nah, Table of Content atau daftar isi yang akan saya bagikan ini tidak perlu begitu, karena TOC akan otomatis terpasang di dalam postingan tanpa harus memasangnya manual.

Cara Kerja Table of Content di Blogger

Cara kerja script yang saya buat ini yaitu dengan mengumpulkan h1, h2, dan h3 yang ada di dalam postingan. Jadi jika script ini tidak berfungsi, itu berarti anda tidak memasang tag yang saya jelaskan di atas.

Cara Membuat Table Of Content (TOC Otomatis) di Blog Valid AMP

  • Pertama silahkan anda login ke akun blogger anda.
  • Kemudian pilih tema, lalu klik Edit HTML
  • Cari kode penutup head, contohnya seperti ini </head> atau &lt;/head&gt;
  • Jika sudah, letakkan kode di bawah ini tepat diatas kode tadi.
  • <b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>

    <b:if cond='data:view.url != data:view.url params { amp: "1" }'>

    <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>
    //<![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></b:if>
  • Langkah selanjutnya, cari kode <data:post.body/> dan ganti dengan kode di bawah ini.
  • <!-- TOC www.repick.net -->
    <b:if cond='data:view.url != data:view.url params { amp: "1" }'>
    <div id='post-toc'> <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Daftar Isi [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]</div><ul id='bwstoc' style='display:none'/></div> <data:post.body/> <script>bwstoc();</script> </div></b:if><!-- end TOC -->
  • Kode di atas untuk TOC tampilan tertutup
  • Jika anda ingin TOC tampilan terbuka maka gunakan kode di bawah ini
  • <!-- TOC www.repick.net -->
    <b:if cond='data:view.url != data:view.url params { amp: "1" }'>
    <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></b:if><!-- end TOC -->
  • Di dalam template biasanya terdapat lebih dari satu kode <data:post.body/>, silahkan anda coba satu persatu.

Jika Terdapat Error AMP

Jika pada saat anda memasang kode tersebut terdapat error AMP, maka ganti kode di bawah ini.

<b:if cond='data:view.url != data:view.url params { amp: "1" }'>

Dengan kode di bawah ini, silahlan sesuaikan berdasar halaman AMP anda masing masing.

Jika halaman AMP anda adalah m=1, maka ganti dengan kode di bawah ini.

<b:if cond='data:blog.isMobileRequest != &quot;true&quot;'>

Jika halaman AMP anda di semua versi seperti desktop, maka ganti dengan kode dibawah ini.

<b:if cond='data:blog.isMobileRequest != &quot;true&quot;'>

Nah, bagaimana artikel cara membuat table of content (TOC Otomatis) di blogger valid AMP ini? Apakah sangat berguna?, jika ada pertanyaan silahkan berkomentar dengan sopan di kolom komentar ya.

www.repick.net

NOTE : Konten yang ada di blog ini asli karya Gio Lesmana. Tidak diperkenankan mengambil isi konten tanpa izin. Traktir saya kopi melalui: Paypal.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar