√ Cara Membuat Table of Content di Blogger (TOC Otomatis) - Teknolalat

Find Us OIn Facebook

Cara Membuat Table of Content di Blogger TOC Otomatis
Cara membuat Table of Content di blogger - Daftar isi atau Table of Content otomatis biasanya ditemukan pada file yang berformat PDF dan Word. Selain itu TOC juga terdapat di artikel sebuah website, nah pada kesempatan kali ini saya akan membagikan cara untuk memasang TOC otomatis atau daftar isi di postingan yang menggunakan platfrom blogger dan tentunya SEO Friendly.

Table of Content memiliki fungsi yang sama di berbagai platform, yaitu berisi link dari inti yang disampaikan pada artikel atau postingan blog. Link anchor text ini akan memudahkan pengunjung untuk merayapi halaman dengan link yang tertuju pada tag header baik itu H2,H3 maupun H4.

Apabila artikel yang menggunakan Table of Content atau TOC otomatis di blogger sudah beberapa waktu di pencarian Google maka Anda dapat melihat tampilan daftar isi yang berisi link yang menuju pembahasan pada artikel tersebut.
Cara Membuat Table of Content (TOC) di Blogger

Cara Membuat Table of Content di Blogger

Berikut adalah tutorial cara membuat daftar isi di postingan blog dengan Table of Content otomatis blogger dan memasang TOC di dalam artikel blog dengan mudah.

1. Silahkan masuk ke blogger.com lalu pilih menu Tema, kemudian pilih Edit HTML.

2. Copy dan pastekan kode CSS berikut tepas di atas tag </style> atau di atas ]]></b:skin>. Setelah itu klik Simpan tema.

.toc {border:1px solid #ccc; padding:10px 12px;border-radius:5px;display:table; line-height:1.6em;}
.toc h3 {display:inline-block; margin:0 10px 0 0;font-size:20px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left}
.toc ul li a {color:#0000ee;margin-left:.5em}
.toc ul li {list-style-type:none;}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0000ee}
:not(:checked) > .toctoggle {display:inline !important; position:absolute;  opacity:0}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'Sembunyikan';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'Tampilkan'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}

3. Nah selanjutnya yaitu memasang dan membuat TOC di dalam artikel atau postingan blogger. Silahkan pilih artikel yang ingin ditambahkan Table of Content lalu pilih mode HTML.

Silahkan paste kode berikut pada posisi yang diinginkan, idealnya sebelum pembahasan yaitu setelah paragraf pertama atau paragraf kedua. Sesuaikan list daftar isi sesuai dengan yang terdapat pada Artikel Anda.

<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h3>Daftar Isi</h3><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
  <li>1<a href="#toc1">Heading 1</a></li>
  <li>2<a href="#toc2">Heading 2</a></li>
  <li>3<a href="#toc3">Heading 3</a>
    <ul>
    <li>3.1<a href="#toc3-1">Sub Heading 3.1</a></li>
    <li>3.2<a href="#toc3-2">Sub Heading 3.2</a></li>
    </ul>
  </li>
  <li>4<a href="#toc4">Heading 4</a></li>
</ul>
</div>
#toc1, #toc2 merupakan id tujuan yang bisa disesuaikan sesuai dengan penulisan nama id pada umumnya.

4. Terakhir yaitu pemberian id Table of Content pada tag di dalam postingan. Masih pada mode HTML, Anda akan melihat tag heading ataupun tag pada artikel dengan struktur seperti berikut:

<h2>Pengertian .... </h2>

Pembahasan ....

<h3>Pengertian .... </h3>

Pembahasan ....

<h4>Pengertian .... </h4>

Pembahasan ....

<b>Pengertian .... </b>

Pembahasan ....

Tambahkan id (sesuai id dafar isi yang dibuat sebelumnya) di dalam tag yang ingin ditambahkan dan hasilnya TOC otomastis yang telah ditambahkan id akan seperti berikut:

<h2 id="toc1">Pengertian .... </h2>

Pembahasan ....

<h3 id="toc2">Pengertian .... </h3>

Pembahasan ....

<h4 id="toc3">Pengertian .... </h4>

Pembahasan ....

<b id="toc4">Pengertian .... </b>

Pembahasan ....

Membuat daftar isi atau Table of Content sebaiknya dilakukan pada akhir pembuatan artikel, karena apabila Anda memiliki pratinjau maka id akan berubah dan Anda perlu untuk menulis ulang id tersebut.

Selesai, dan hasilnya akan seperti berikut....

Table of Content (TOC) di Blogger

Akhir Kata

Nah itulah tutorial cara membuat Table of Content di blogger secara otomatis dan SEO Friendly. Dengan daftar isi dalam postingan atau TOC tentu artikel yang Anda buat akan lebih terstruktur untuk memudahkan pengunjung merayapi postingan Anda. Baiklah sekian saja artikel singkat ini, selmat mencoba dan semoga bermanfaat.
Load Comments
Lebih baru Lebih lama