Iklan Billboard 970x250

Artikel Terkait

Untuk Anda yang mau mengirimkan karya literasimu, baik itu cerpen, puisi, esai dan karya literasi lainya, silahkan Anda buka disini Kirim Artikel. LINK UNDUH SUDAH SAYA PERBAIKI. (Khusus Pada Artikel Aplikasi Android )

×
Pasang Table of Contents (TOC) Otomatis di Artikel Blogger pada Template Igniplex

Iklan 728x90

Pasang Table of Contents (TOC) Otomatis di Artikel Blogger pada Template Igniplex

    Bloggerntt.com - Cara Pasang Table of Contents(TOC) Otomatis di Artikel Blogger pada Template Igniplex, Anda pengguna Template Igniplex? Template Igniplex karya Mbak Igniel ini terkenal akan struktur layoutnya yang mumpuni dan valid schema markup blogger. Untuk pengguna Template Igniplex, belum ada penempatan TOC pada templatenya. Yang artinya, harus dipasang sendiri oleh pengguna itu sendiri. Sayapun akhirnya memutuskan untuk memasang TOC otomatis di blog ini, karena banyak sekali artikel saya yang lumayan panjang isi dan pembahsanya.

    Untuk Anda yang tertarik dengan template igniplex buatan Mbak Iginel, linknya sudah saya sediakan di akhir artikel ini.

    Apa itu Daftar Isi?

    Daftar isi sepertinya bukan hanya digunakan untuk buku cetakan saja. Dalam artikel postingan web atau blog juga sangat penting. Apalagi artikel postingannya sangat banyak sekali.

    Daftar isi dalam artikel postingan akan sangat memudahkan pembaca dalam memahami keseluruhan isi dari artikel yang dibuat.

    Pengertian Table Of Contents (TOC)

    Table of Contents (TOC) sangat membantu pengunjung untuk memahami isi dari sebuah artikel panjang. Dalam hal ini bukan sitemap yang akan saya bahas, tetapi TOC atau daftar isi dari materi artikel.

    Daftar isi, biasanya hanya berisi Isi dan disingkat secara informal sebagai TOC, adalah daftar, biasanya ditemukan pada halaman sebelum dimulainya karya tulis, judul bab atau bagian atau deskripsi singkat dengan nomor halaman awal.

    Jika anda pernah membaca artikel di Wikipedia, tentu saja anda pernah melihat Table of Contents, yang memudahkan anda menuju bagian artikel tertentu. Begitulah sekiranya mengenai Table of Contents.

    Daftar isi atau dalam bahasa inggrisnya dikenal Table of Contents (TOC) sangat diperlukan guna membantu pembaca menemukan poin-poin penting dalam pembahasan artikel.

    Pengaruh Daftar Isi atau Table of Contents(TOC) terhadap SEO Blog?

    Google sendiri tidak mengatakan bahwa dengan memberi daftar isi pada postingan blog akan meningkatkan SERP di Google.

    Beberapa waktu yang lalu, Google sempat memperbaharui algoritma untuk hasil penelusuran mobile. Dimana sebuah konten yang memiliki Table of Contents, memiliki 'perlakuan khusus' di Google.

    Jika dikaitkan dengan SEO, daftar isi memang tidak berpengaruh.

    Jika tujuan anda membuat artikel hanya untuk SEO, sepertinya tidak usah pakai daftar isi saja. Tetapi bila anda mencari kepuasan pembaca artinya anda benar-benar ingin membuat pembaca mudah memahami isi seluruh artikel, maka daftar isi ini menjadi penting.

    Google lebih memihak kepada penggunanya dari pada pemilik blog atau web.

    Pembaca akan lebih betah atau lebih lama membaca artikel di blog anda dan mungkin akan sering mengunjungi blog anda karena kemudahan memahami isi artikel.

    Google mulai tahu bahwa blog anda lebih disukai oleh orang dari blog yang memiliki ranking di atas anda. Dengan demikian blog anda bisa terangkat di SERP Google.

    Cara Pasang Daftar Isi atau Table of Contents(TOC) Otomatis di Artikel Blogger

    Tutorial Cara Memasang Table of Contents pada Blogspot secara otomatis. Otomatis yang dimaksud adalah, anda tidak perlu menulis artikel dalam mode HTML, dan memasukan kode manual setiap kali menulis artikel.

    Semua kode yang dibagikan pada artikel ini cukup dipasang pada template Blogger Anda, dan Anda cukup membuat subheading H3 (subheading) dan H4 (minor subheading), dan Blockquote.

    Kenapa tidak memasang TOC secara manual?
    Cara manual pun bagus, akan tetapi perlu 'tenaga extra' pada saat setiap kali posting artikel blogger, Anda harus membuka mode Compose dengan menambahkan attribut ID pada setiap tag heading(h2,h3,h4,h5,h6) artikel jika ingin memasang table of contents.
    Artinya perlu waktu yang lumayan lama, jika artikel Anda memiliki pembahasan dan sub-sub judul yang banyak. Dan terkadang, lupa menandai salah satu heading karena kebanyakan kode. Jadi mumet.

    Untuk pengguna template Igniplex, untuk membuat Daftar Isi atau Table of Contents(TOC) Otomatis di Artikel Blogger caranya sangat mudah.
    Dan efek setelah saya memasang TOC otomatis ini, terlihat pada saat pencarian artikel di SERP Google.
    Bisa Anda lihat pada gambar di bawah ini:

    Pasang Table of Contents (TOC) Otomatis di Artikel Blogger pada Template Igniplex

    Memasang Table of Contents(TOC) Otomatis di Artikel Blogger pada Template Igniplex

    Berikut ini adalah cara penempatan code dan script Table of Contents(TOC) Otomatis pada template igniplex:

    1. Masuk ke menu Dashboard blogger 
    2. Pilih Menu Tema
    3. Klik tombol Edit HTML
    4. Berikutnya silahkan copy code/script di bawah ini, lalu letakan pada mode edit template Anda.
    Cara ini juga bisa diterapkan di template Non AMP lainya.

    Code CSS Table of Contents(TOC) Otomatis

    Anda copy CSS berikut ini, dan paste sebelum ]]></b:skin> atau diantara kode <style>

    /*CSS TOC Bloggerntt.com*/
    .TOCbloggerntt{line-height:1.4em;padding:20px 30px 20px 10px;display:block;width:95%;margin:0 auto;background:#0091EA;border:1px solid #ccc;box-shadow:1px 1px 2px #fff inset,-1px -1px 2px #fff inset;border-radius:3px/6px}.TOCbloggerntt ol,.TOCbloggerntt ul{margin:0;padding:0}.TOCbloggerntt ul{list-style:none}.TOCbloggerntt ol li,.TOCbloggerntt ul li{padding:15px 0 0;margin:0 0 0 30px;font-size:15px}.TOCbloggerntt a{color:#2f303f;text-decoration:none}.TOCbloggerntt a:hover{text-decoration:underline}.TOCbloggerntt button{background:#2f303f;font-family:oswald,arial;font-size:20px;position:relative;outline:none;cursor:pointer;border:none;color:#707037;padding:0 0 0 15px}.TOCbloggerntt button:after{content:"\f107";font-family:"\A\AFont Awesome 5 Free";position:relative;left:10px;font-size:20px}

    Kode yang saya tandai warna biru di atas, silahkan Anda seting sesuai dengan tampilan template blog Anda. Atau tidak perlu, jika dirasa baik.

    Code Javascipt Table of Contents(TOC) Otomatis

    Anda Copy kode ini dan taruh diatas  kode </head> atau &lt;/head&gt;&lt; :

    <script type='text/javascript'>
        //<![CDATA[                  
        function TOCbloggerntt() {
            var TOCbloggerntt = i = headlength = gethead = 0;
            headlength = document.getElementById("post-toc").querySelectorAll("h3, h4").length;
            for (i = 0; i < headlength; i++) {
                gethead = document.getElementById("post-toc").querySelectorAll("h3, h4")[i].textContent;
                document.getElementById("post-toc").querySelectorAll("h3, h4")[i].setAttribute("id", "point" + i);
                TOCbloggerntt = "<li><a href='#point" + i + "'>" + gethead + "</a></li>";
                document.getElementById("TOCbloggerntt").innerHTML += TOCbloggerntt;
            }
        }
    function mbtToggle() {
        var mbt = document.getElementById('TOCbloggerntt');
        if (mbt.style.display === 'none') {
            mbt.style.display = 'block';
        } else {
            mbt.style.display = 'none';
        }
    }
    //]]>            
    </script>

    Berikutnya, Anda cari kode <data:post.body/> pada template anda, lalu ganti dengan kode di bawah ini.

    Untuk pengguna selain template Igniplex, biasanya kode <data:post.body/> muncul lebih dari satu, Anda cari kode yang paling terakhir. Lalu ganti dengan kode di bawah ini:

    <div id="post-toc">
    <div class="TOCbloggerntt">
    <button onclick="mbtToggle()">Langsung ke Konten Utama</button>
    <ol id="TOCbloggerntt"></ol>
    </div>
    <data:post .body=""> <script>
        TOCbloggerntt();
    </script> </data:post></div>
    

    Untuk code yang saya mark biru di atas, bisa Anda ganti sesuai kata-kata Anda.

    Code JavaScript diatas akan secara otomatis membaca tag heading h3 dan h4, yang kemudian akan menjadi Table of Contents untuk artikel yang Anda buat sebelumnya (sudah di publish).

    Agar Table of Contents tidak kosong, pastikan anda menggunakan Subheading dan atau Minor Heading pada saat menulis artikel pada mode compose.

    Kelebihan dan Kekurangan Daftar Isi atau Table of Contents(TOC) Otomatis

    Berikut ini adalah kelebihan dari memasang TOC Otomatis di artikel blogger:

    • Tampil otomatis, tanpa perlu memakan waktu mengedit pada saat membuat artikel blog. TOC otomatis ini akan mendeteksi tag h3 dan h4 yang Anda buat.
    • Permudah pengunjung menelusuri semua isi artikel blog.
    • Artikel akan terlihat 'SEO Friendly' 

    Berikut merupakan kekurangan dari pemasangan TOC otomatis pada artikel blogger:

    • Untuk artikel yang isinya singkat , TOC otomatis ini akan terlihat mengganggu tampilan artikel.
    • Otomatis mendeteksi tag h3 dan h4, dimana jika pada artikel Anda lupa mengedit sub artikel tersebut, akan muncul blank(kosong) dalam list TOC. Solusinya, Anda perlu mengedit ulang pada mode compese artikel tesebut.


    Penutup

    Table of Contents (TOC) atau Bisa disebut juga Jump Link atau Daftar Isi di dalam postingan Blogger adalah daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat pada sebuah artikel di blog.

    Table of Contents bisa kita gunakan sebagai rincian dari isi artikel yang berupa link sehingga akan memudahkan pembaca untuk memilih informasi bagian pokok bahasan apa yang akan dibacanya.

    Template Igniplex Premium


    Cukup sampai disini uraian saya mengenai cara Pasang Table of Contents(TOC) Otomatis di Artikel Blogger pada Template Igniplex, Semoga bermanfaat. Salam.

    Spoiler:


    • table of contents di blog
    • cara membuat table of content di blog
    • table of content for blog
    • table of contents blog
    • table of contents blog post
    • table of contents blogger
    Baca Juga
    SHARE
    Marko Kono
    Hi, My name is Marko. Pencinta Malam, Penyuka Hitam, Penikmat Gelap dan Pengurus Tapaleuk, hehehe 😃 Selain blogging, punya pekerjaan pribadi sebagai Staf Teknik bagian Pengawasan Proyek. Teknik Sipil menjadi bagian tak terpisahkan dari kehidupanya.
    Masukan Email Anda Untuk Dapatkan Update GRATIS!

    Artikel Terkait:

    Post a Comment

    Iklan Tengah Post