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.
Donasi Via Paypal : Bantu berikan donasi melalui Paypal jika dirasa artikel yang berada di blog ini bermanfaat. Donasi akan digunakan untuk perpanjang domain www.samiedkode.com Klik Disini Untuk Donasi Terimakasih.

Berlangganan update artikel terbaru via email:

6 Responses to "Cara Membuat Tabel Of Content ( TOC ) di Postingan Blogspot"

  1. terima kasih gan...bermanfaat sekali...

    ReplyDelete
  2. Mantab gan artikelnya,,,patut dicoba ni....mampir gan www.nyampling .com

    ReplyDelete
  3. seleain edit menggunakan HTML, adakah cara lain?

    ReplyDelete
  4. Nice. Sy juga pernah gunakan yg macam ini...

    ReplyDelete

Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel