Cara Membuat TOC (Table of Content) SEO Friendly di Postingan Blog

48 Views
Cara Membuat TOC di Blogger

TOC (Table of Content) adalah daftar isi yang berupa link dan terletak pada suatu artikel yang berfungsi menampilkan poin-poin penting dalam artikel tersebut. Pada umumnya, TOC biasa kita temui di file pdf, doc, maupun situs website (wikipedia contohnya).

Baiklah, tanpa pikir panjang disini saya akan membagikan tutorial cara membuat table of content di blog. Simak baik-baik ya.

Cara Membuat Table of Content di Blogger

Membuat Table Of Content di Blogger

*TOC yang saya bagikan kali ini hanya menggunakan CSS.

  1. Pada dashboard Blogger, pergi ke Template ➜ Edit HTML.
  2. Cari <style> atau /b:skin dan tempelkan kode di bawah ini tepat diatasnya.
    #btn_toc {
     font-weight: 600;
     cursor: pointer;
     border-top: 1px #cfcfcf dotted;
     border-bottom: 1px #cfcfcf dotted;
    }

    #btn_toc:focus,
    #toc li:focus,
    .back_toc:focus {
     outline: none
    }

    #btn_toc svg {
     vertical-align: middle;
    }

    #toc li,
    .back_toc {
     cursor: pointer
    }

    #toc {
     display: grid;
    }

     :target::before {
     content: "
     "
     ;
     display: block;
     visibility: hidden;
    }
  3. Sudah cukup, tekan Simpan.

Cara Memasang Table of Content di Postingan Blog

Cara memasangnya cukup mudah, tempelkan code yang sudah saya siapkan berikut di dalam edit artikel mode HTML. Penempatannya bebas, Anda bisa meletakkan setelah paragraf 1, 2, atau diatas tag H2.


<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
Table of Contents <svg height="18" viewbox="0 0 24 24" width="18"><path d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" fill="#000000"></path></svg></div>
<div id="toc">
<ul>
<li><a href="#1" title="Judul">Poin 1</a></li>
<li><a href="#2" title="Judul">Poin 2</a>
<ol>
<li><a href="#2.1" title="Judul">Subpoin 2</a></li>
<li><a href="#2.2" title="Judul">Subpoin 2</a></li>
</ol>
</li>
<li><a href="#3" title="Judul">Poin 3</a></li>
</ul>
</div>

*Jika masih kurang, silahkan kreasikan sendiri dengan menambahkan tag <ol> atau <ul> dan <li>.
Oh iya, jangan lupa untuk menambahkan id="" di setiap heading yang Anda pakai.
Contoh:

<h2 id="1">Cara Membuat TOC dengan CSS</h2>

OPSIONAL: Yang terakhir, tambahkan kode berikut di akhir paragraf pada setiap heading untuk memudahkan pembaca kembali keatas menuju Table of Content.

<div class="back_toc" onclick="document.getElementById('btn_toc').scrollIntoView(true);" role="button" tabindex="0">Back to Content ↑</div>


Itulah cara membuat TOC SEO friendly di blog. Setelah membaca artikel ini, pasti Anda sadar pentingnya menambahkan table of content di blog yaitu sangat membantu pembaca untuk mencari poin penting dan ternyata cara membuatnya tidak ribet, bukan?

Semoga bermanfaat, terimakasih.

Post Views: 48