Skip to main content

Cara Membuat Tabel Of Content ( TOC ) di Postingan Blogspot

Cara Membuat Tabel Of Contents di Blogger - Hai sobat Blogger , bagaimana perkembangan blog anda ? Oke pada artikel kali ini kita akan membahas cara membuat daftar isi tabel of Contents di postingan blogger atau biasa disebut daftar isi didalam postingan blogspot.

TOC atau daftar isi postingan pada dasarnya yaitu membaca id pada Heading yang ada pada struktur html , ini berfungsi untuk langsung loncat ke heading yang dipilih . Bisanya TOC sering digunakan pada Microsoft Word yang berfungsi untuk menampilkan daftar isi dari sebuah dokumen .

Tabel of contents Blogger

Tidak hanya digunakan pada aplikasi Microsoft Word , situs seperti Wikipedia juga menggunakan TOC atau daftar isi pada postingannya , agar lebih menarik para pengunjung. TOC yang digunakan Wikipedia tidak hanya sekedar untuk memudahkan pengunjung untuk membuat tampilannya lebih menarik , akan tetapi TOC juga berfungsi dan berpengaruh terhadap SEO . Menu pada TOC akan terindeks dan tampil pada hasil mensintesis pencari , itulah yang disebut TOC ( jump link ).

Untuk menerapkannya atau membuat TOC di blogger , sobat hanya perlu menambahkan CSS dan kode script html pada artikel yang dibuat . Anda tidak perlu menambahkan kode javascript yang akan membuat loadingnya lama.

Cara Membuat Tabel Of Contents ( TOC ) di dalam postingan blogspot

Berikut cara penerapan html pada demo dibawah , agar sobat tidak Bingung pada saat membuatnya pada artikel blog anda.

1. Masuk ke dashboard blogger
2. Pilih menu Tema > Edit HTML
3. Selanjutnya salin kode dibawah ini dan tempelkan (Paste)  tepat diatas kode </style> .

/* Table of Contents */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {display:inline-block; margin-right:10px}
.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 {list-style-type:none;}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0645ad}
: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}

Coba sobat perhatikan kode terakhir :target::before . Catatan jika anda memakai Sticky header / widget navigasi , ubahlah height dan margin-top sesuai ukuran navigasi yang sobat gunakan. Contoh jika menggunakan ukuran 40px , maka penerapan height:40px dan margin-top:40px

4. Lalu save atau simpan
5. Berikutnya kita masuk ke tahap penerapan membuat daftar isi tabel of contents di dalam postingan blogspot. Buatlah post baru atau edit postingan lama dan pastikan sobat memilih mode HTML ingat bukan compose ! Lalu tambahkan kode dibawah pada artikel sobat.

<div class="toc">
  <input type="checkbox" role="button" id="toctoggle" class="toctoggle">
  <div class="toctitle">
    <h2>Daftar isi</h2>
    <span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span>
  </div>
  <ul>
    <li>1 <a href="#toc1" title="Judul Satu">Judul Satu</a></li>
    <li>2 <a href="#toc2" title="Judul Dua">Judul Dua</a></li>
    <li>3 <a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>
    <li>4 <a href="#toc4" title="Judul Empat">Judul Empat</a></li>
    <li>5 <a href="#toc5" title="Judul Lima">Judul Lima</a>
      <ul>
      <li>5.1 <a href="#toc5_1" title="Sub Judul Lima ke Satu">Sub Judul Lima ke Satu</a></li>
      <li>5.2 <a href="#toc5_2" title="Sub Judul Lima ke Dua">Sub Judul Lima ke Dua</a></li>
      </ul>
    </li>
    <li>6 <a href="#toc6" title="Judul Enam">Judul Enam</a></li>
  </ul>
</div>

Kemudian penerapan untuk setiap paragraf menggunakan kode berikut.

<h2 id="toc1">SubJudul Satu</h2>
...isi paragraf satu

<h2 id="toc2">SubJudul Dua</h2>
...isi paragraf dua

<h2 id="toc3">SubJudul Tiga</h2>
...isi paragraf tiga

<h2 id="toc4">SubJudul Empat</h2>
...isi paragraf empat

<h2 id="toc5">SubJudul Lima</h2>
...isi paragraf lima

<h3 id="toc5_1">Sub Judul Lima ke Satu</h3>
...isi paragraf lima part 1

<h3 id="toc5_2">Sub Judul Lima ke Dua</h3>
...isi paragraf lima part 2

<h2 id="toc6">SubJudul Enam</h2>
...isi paragraf enam

Editlah tulisan Judul Satu - Enam dan Isi Paragraf sesuai dengan kebutuhan artikel sobat. Anda juga bisa menghapus dan menambahkan Sub Judul tersebut.

Untuk demo Daftar Isi Tabel Of Contents diatas sobat bisa melihatnya di akun codepen saya .


Demikianlah artikel tentang cara membuat daftar isi tabel of contents didalam postingan blogger , semoga bermanfaat selamat mencoba.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar