• Cara Membuat Dafta Isi di Blogspot


    Apa itu daftar isi atau table of content?

    Daftar Isi atau Table of Content (TOC) adalah gambaran umum isi tulisan berupa link subjudul (subheading) yang ada di artikel dalam bentuk sebuah tabel. 

    Karenanya, TOC ini hanya bisa diterapkan di postingan panjang (long post), minimal ada dua subjudul dengan heading tags H3.

    Lebih jelasnya, lihat demo daftar isi postingan blog.
    Berikut ini screen shot-nya.

    daftar isi postingan blog
    Di blog selfhosted WordPress, untuk memasang daftar isi ini sangat mudah. Kita tinggal memasang plugin, misalnya Table of Content Plus. 

    Plugin ini akan otomatis menampilkan daftar isi, diambil dari subjudul atau heading tags (h2/h3) yang ada dalam tulisan. Contohnya di postingan Jenis-Jenis Opini di Media Massa. Berikut ini tangkapan layarnya:

    Daftar Isi Postingan
    Cukup jelas ya, apa itu Daftar Isi atau Table of Content (TOC) yang dimaksud dalam postingan ini. Live demonya juga ada di postingan ini. Lihat lagi tuh, ada di atas.

    Fungsi Daftar Isi


    Buat apa memasang Daftar Isi atau TOC di postingan blog?
    Daftar Isi akan membuat postingan lebih ramah pengguna (user friendly). TOC ini melibatkan pembaca lebih banyak dengan menyediakan lebih banyak aksesibilitas dan navigasi yang lebih baik. 

    Menurut Pro Blogger Tips, Google lebih menyukai konten berkualitas tinggi yang terorganisir dan diformat dengan baik. Menambahkan elemen seperti tabel, bagian bernomor, dan daftar isi atau TOC adalah bagian dari upaya untuk mendapatkan peringkat tinggi di halaman hasil pencarian (SERP).

    Muncul tepat di atas awal posting an atau di bagian ata stulisan, daftar bisa langsung menuju bagian yang mereka butuhkan, tanpa perlu membaca seluruh posting. Oleh karena itu, Daftar Isi yang terencana dengan baik dapat membantu dalam:

    • Memberikan tampilan profesional pada postingan atau artikel Anda.
    • Mengatur poin dari posting atau artikel Anda secara sistematis.
    • Mengelola harapan audiens Anda, karena memberikan tampilan tingkat tinggi dari posting atau artikel Anda.
    • Menyediakan peta jalan bagi audiens Anda untuk dengan mudah menavigasi seluruh posting atau artikel Anda.
    TOC bisa meningkatkan pengalaman pengguna (user experience). Pengalaman pengguna adalah bagian penting dari posting atau artikel blog, yang tidak dianggap serius oleh banyak blogger saat ini.

    Menurut penelitian, pengalaman pengguna (UX) adalah kunci untuk mendapatkan peringkat yang lebih tinggi di SERP. Untuk meningkatkan pengalaman pengguna blog Anda, Daftar Isi akan membantu.

    Menurut penelitian, lebih dari 80% dari total pembaca web hanya membaca poin-poin penting dari sebuah posting blog atau artikel. 

    Seseorang harus menerapkan TOC hanya ketika artikel atau panjang posting cukup baik dan artikel atau posting memiliki lebih dari 3 judul.

    Apakah Daftar Isi Meningkatkan SEO?


    Tentu saja, Daftar Isi juga dapat membantu dalam SEO. Simak alasannya: ketika Anda menulis posting atau artikel yang panjang dan membuat daftar isi, konten Anda akan dibagi menjadi sub-bagian, masing-masing dengan aspek yang berbeda pada topik yang sama.

    Jadi, dengan posting blog atau artikel yang lebih panjang, blog Anda kemungkinan akan mendapat peringkat yang lebih baik di mesin pencari. Google menganggap posting yang lebih panjang sebagai faktor peringkat.

    Cara Membuat Daftar Isi Subjudul Postingan Blog


    Berikut ini cara memasang atau membuat daftar isi (table of content) otomatis postingan blog. Kodenya saya dapatkan dari My Blogger Tricks. Kode-kode ini harus dipasang dalam template blog dan di postingan.

    1. Klik Tema > Edit HTML
    2. Copas kode CSS Daftar Isi untuk Blogger ini di atas kode ]]</b:skin>


    .mbtTOC {background-color: #eee;color: #707037;line-height: normal;margin: 10px 0;padding: 10px 0;width: auto;}
    .mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}
    .mbtTOC ul { list-style:none; } .mbtTOC ol li,.mbtTOC ul li { padding:15px 0 0; margin:0 0 0 30px; font-size:15px; }
    .mbtTOC a{ color:#c00; text-decoration:none; } .mbtTOC a:hover{ text-decoration:underline; } .mbtTOC button{ background:#eee;font-size:16px;position:relative; outline:none; cursor:pointer; border:none; color:#707037; padding:0 0 0 15px;font-weight:700} .mbtTOC button:after{content: &quot;\f03a&quot;; font-family:FontAwesome;position:relative;left:5px;font-size:14px;font-weight: 300;}

    3. Copas kode JS TOC for Blogger berikut ini di atas kode </head>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    function mbtTOC() {var mbtTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
    //]]>
    </script>
    </b:if>

    4. Pastikan ada Link Font Awesome di template blog Anda. Jika belum, ada tambahkan pula kode berikut ini di atas kode </head>

    <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

    Font Awesome digunakan untuk memunculkan icon dalam Daftar Isi.

    5. Cari dan ganti kode kode <data:post.body/> posting (biasanya kode kedua) dengan kode ini:

    <div id='post-toc'><data:post.body/></div>

    6. Save! Simpan Template.

    Pemasangan kode daftar isi sudah selesai di template. Kini cara memunculkan Daftar Isi atau TOC dalam postingan.

    Memunculkan Daftar Isi Di Halaman Posting


    Pastikan postingan Anda memiliki minimal dua subjudul (subheading) dengan heading tags H3. Bisa juga dipasang di artikel yang suda ada, asalkan itu tadi... minimal ada dua subjudul.

    Selesai menulis postingan, atau saat mengedit postingan, klik Mode HTML, lalu pasang dua kode ini:

    1. Copas kode berikut ini di bawah alinea pertama atau sebelum subjudul pertama:

    <div class="mbtTOC">
    <button onclick="mbtToggle()">Daftar Isi</button>
    <ol id="mbtTOC"></ol>
    </div>

    Anda bisa ganti tulisan Daftar Isi dengan Table of Content.

    2. Copas pula kode berikut ini di bagian akhir postingan:

    <script>mbtTOC();</script>

    Demikian Cara Membuat Daftar Isi Postingan Blog, Table of Content untuk Blogger. 

    Code dibawah ini jangan di copy, karna hanya code untuk Script dalam Postingan

    <div style="background-color: white; border: 3px double rgb(23, 128, 221); padding: 10px; text-align: left;"> Kode Script Sobat Disini</div>

    • 0 comments:

    Posting Komentar

    1000 Para Pembaca