Cara Membuat TOC SEO Friendly di Postingan Blog Secara Manual

Cara Membuat TOC SEO Friendly di Postingan Blog Secara Manual
Daftar Isi Artikel
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

Cara Memasang TOC di Blogger
*TOC yang saya bagikan kali ini hanya menggunakan CSS. Untuk DEMO ada di postingan ini.
  1. Pada dashboard Blogger, pergi ke TemplateEdit 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.
Back to Content ↑

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>
Back to Content ↑

Itulah cara membuat table of content SEO friendly di blog. Setelah membaca artikel ini, pasti Anda sadar untuk membuat dan menambahkan TOC di postingan blog ternyata tidak ribet, bukan?

Semoga bermanfaat, terimakasih.
Nando
By Nando

Anda di sini hanya untuk persinggahan yang singkat. Jangan terburu, jangan khawatir. Yakinlah bahwa Anda menghirup wangi bunga sepanjang perjalanan.

Subscribe

  1. Untuk membuat judul komentar, gunakan <i rel="h2">Judul Komentar</i>
  2. Untuk membuat kotak catatan, <i rel="quote">catatan</i>
  3. Untuk membuat teks stabilo, <i rel="mark">mark</i>
  4. Untuk membuat teks mono, <i rel="kbd">kbd</i>
  5. Untuk membuat kode singkat, <i rel="code">shorcode</i>
  6. Untuk membuat kode panjang, <i rel="pre"><i rel="code">potongan kode</i></i>
  7. Untuk membuat teks tebal, <strong>tebal</strong> atau <b>tebal</b>
  8. Untuk membuat teks miring, <em>miring</em> atau <i>miring</i>

Konten Unggulan