Blogger

Cara Membuat Table of Content Otomatis di Blogger

0
Please log in or register to do it.

Tables of contents (TOC) atau yang sering disebut daftar isi adalah poin-poin pembahasan yang terdapat pada sebuah artikel. Table of content biasanya dipasang pada sebuah artikel yang panjang.

  1. Apa itu Table of Contents (ToC) ?
  2. Dampak TOC terhadap SEO?
  3. Memasang Table of Contents pada Blogger Secara Otomatis
  4. Cara Membuat Artikel Blog agar TOC Muncul

Table of content bisa kamu temui pada situs Wikipedia, JalanTikus, dan pada situs-situs lainnya. Tujuan memasang table of content di blogger adalah untuk mempermudah pembaca artikel mengerti artikel yang sedang dibahas dan tentunya berpengaruh pada SEO.
Setiap harinya, Google selalu memperbaharui Algoritmanya. Ini bertujuan agar Google semakin memudahkan penggunanya dalam mencari informasi di mesin pencari.

Semakin banyaknya perbaikan dan update yang dilakukan Google, membuat para Webmaster dan SEO maupun Blogger untuk bekerja lebih ekstra agar website yang dikelolanya tetap bisa bersaing 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. Saya akan menjelaskan secara rinci, mulai dari apa itu Table of Contents, dampak baik terhadap hasil penelusuran, serta Cara membuatnya.

Apa itu Table of Contents (ToC) ?

Bisa dibilang, Table of Contents ini merupakan “daftar isi” bagi sebuah artikel. Daftar isi ini akan mempermudah pengguna untuk melompat ke bagian artikel yang ingin mereka baca. Jadi ketika pengguna mengklik isi dari Table of Contents tersebut, pengguna akan langsung bisa membaca bagian yang mereka klik tersebut.
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.

Dampak TOC terhadap SEO?

Ternyata, penggunaan Table of Contents pada sebuah konten website cukup penting, khususnya bagi anda yang mengandalkan trafik website dari Google. Kenapa penting?
Karena ternyata, robots mobile Google akan menggunakan bagian atau subheading yang terdapat artikel (yang sudah menggunakan TOC) menjadi sebuah sitelink. Anda bisa melihat contoh di screenshot hasil penelusuran mobile di bawah ini:
table of contents otomatis blogspot
Yang saya tandai berwarna merah tersebut merupakan sitelink yang dibuat Google, dengan mengambil data dari Table of Contents pada Artikel Blog.

Memasang Table of Contents pada Blogger Secara Otomatis

Jika anda pengguna CMS WordPress, tentunya sangat mudah untuk membuat Table of Contents pada artikel secara otomatis, cukup menggunakan plugin tambahan yang sudah banyak tersedia di gallery plugin WordPress.
Namun bagi pengguna Blogger, memasang TOC harus menggunakan JavaScript yang ditanam dalam template.
Kali ini, saya akan membahas Tutorial Cara Memasang Table of Contents pada Blogspot secara otomatis. Otomatis yang saya maksud, anda tidak perlu menulis artikel dalam mode HTML, dan memasukan kode manual setiap kali menulis artikel.

Semua kode yang akan saya bagikan berikut ini cukup pasang di template Blogger anda, dan anda cukup membua subheading H3 (subheading) dan H4 (minor subheading), dan Blockquote.
Langsung saja ikuti langkah berikut ini:
Cara Memasang Table of Content di Blogger
1. Buka dashboard Blogger kamu.
2. Pilih menu Tema > Edit HTML.
3. Letakkan kode CSS berikut tepat di atas kode ]]></b:skin> atau diantara <style> dan </style>

/* CSS ToC exthemes ID */
.exthemes_TOC {
    line-height: 1.4em;
    padding: 0 30px 20px 10px;
    display: block;
    width: 95%;
    margin: 0 auto;
    background: #eaeaea;
    border: 1px solid #ccc;
    border-radius: 3px/6px
}
.exthemes_TOC ol,
.exthemes_TOC ul {
    margin: 0;
    padding: 0;
}
.exthemes_TOC ul {
    list-style: none;
}
.exthemes_TOC ol li,
.exthemes_TOC ul li {
    padding: 15px 0 0;
    margin: 0 0 0 30px;
    font-size: 15px;
}
.exthemes_TOC a {
 font-weight: 700;
    color: #4f4f4f;
    text-decoration: none;
}
.exthemes_TOC a:hover {
    text-decoration: underline;
}
.exthemes_TOC button {
    background: #eaeaea;
    font-family: oswald, arial;
    font-size: 20px;
    position: relative;
    outline: none;
    cursor: pointer;
    border: none;
    color: #2d2d2d;
    padding: 20px 0 0 20px;
}
:target::before{content:"";display:block;height:50px;margin-top:-50px;visibility:hidden}

4. Setelah itu, Letakkan kode JavaScript berikut diantara kode <head> dan </head>.

<script type='text/javascript'>
    //<![CDATA[                   
    function exthemes_TOC() {
        var exthemes_TOC = 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);
            exthemes_TOC = "<li><a href='#point" + i + "'>" + gethead + "</a></li>";
            document.getElementById("exthemes_TOC").innerHTML += exthemes_TOC;
        }
    }
function mbtToggle() {
    var mbt = document.getElementById('exthemes_TOC');
    if (mbt.style.display === 'none') {
        mbt.style.display = 'block';
    } else {
        mbt.style.display = 'none';
    }
}
//]]>             
</script>

5. Simpan Tema.
Cara Membuat Table of Content Otomatis
Jika kamu suka membuat artikel yang panjang, misalnya sekitar 600 kata lebih, sangat saya sarankan untuk memasang table of content yang otomatis ini.
Karena kamu tidak perlu ribet-ribet memasang table of content seperti biasanya. Namun, kekurangan table of content ini ialah tidak cocok jika diterapkan pada artikel yang pendek.
1. Buka kembali halaman Tema > Edit HTML.
2. Cari kode <data:post.body/>, kemudian ganti dengan kode berikut:

<div id='post-toc'>
<div class='exthemes_TOC'>
    <button onclick='mbtToggle()'>Daftar Isi</button>
    <ol id='exthemes_TOC' />
</div>
<data:post.body/>
<script>
    exthemes_TOC();
</script>
</div>

3. Simpan Tema dan lihat hasilnya.

Cara Membuat Artikel Blog agar TOC Muncul

JavaScript diatas akan secara otomatis membaca tag heading h2 h3 dan h4, yang kemudian akan menjadi Table of Contents untuk artikel tersebut.
Jadi, agar Table of Contents tidak kosong, pastikan anda menggunakan Subheading dan atau Minor Heading saat menulis artikel pada panel Blogger. lebih jelasnya untuk cara merubah sebuah kalimat menjadi Subheading dan Minor heading, lihat gambar di bawah ini

itulah tutorial MedianWP mengenai Cara Membuat Table of Contents Otomatis di Artikel Blogger. Semoga bermanfaat, jika berguna akan sangat berterima kasih jika artikel ini anda bagikan di sosial media.

Cara Membuat Text Resize di Blogger
Themes medianWP UI for WordPress
Ad Area

Reactions

0
0
0
2
0
0
Already reacted for this post.

Reactions

2

Your email address will not be published. Required fields are marked *