Cara Membuat Table of Content di Blogspot

Contoh : Table of conten

Daftar isi

• 1 Judul Satu
• 2 Judul Dua
• 3 Judul Tiga
• 4 Judul Empat
• 5 Judul Lima
  • 5.1 Sub Judul Lima ke Satu
  • 5.2 Sub Judul Lima ke Dua
• 6 Judul Enam

Daftar isi atau table of content (TOC) adalah sebuah daftar link yang biasa seorang blogger letakan di awal atau di tengah postingan.

Pada dasarnya menu daftar isi dalam postingan blog hanya untuk memudahkan para pembaca mengetahui apa saja yang ada di dalam blog tersebut.

Dengan demikian, para pengunjung yang datang ke blog kita bisa melihat dan mengklik langsung apa yang di carinya.

Tidak hanya itu saja, dengan adanya daftar isi tidak hanya memudahkan para pengunjung tetapi dapat merapikan tulisan artikel.

Cara mudah membuat Table of Content di postingan blogger

1. Masuk ke akun Blogger Anda

2. Klik >Settings >Tema >Edit Html

3. Cari kode ]]></b:skin> atau </style>

4. Letakkan kode CCS di bawah ini sebelum kode ]]></b:skin> atau </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;

5. Klik >Simpan

Cara Membuat Daftar Isi Di Dalam Postingan Blogger

1. Masuk ke akun blogger anda.

2. Buat entri atau tulis artikel baru dan masuk ke mode Html bukan compose dan masuk an kode di bawah ini :

<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="#Link1" title="Judul Satu">Judul Satu</a></li><li>2 <a href="#Link2" title="Judul Dua">Judul Dua</a></li><li>3 <a href="#Link3" title="Judul Tiga">Judul Tiga</a></li><li>4 <a href="#Link4" title="Judul Empat">Judul Empat</a></li><li>5 <a href="#Link5" title="Judul Lima">Judul Lima</a> <ul> <li>5.1 <a href="#Link5_1" title="Sub Judul Lima ke Satu">Sub Judul Lima ke Satu</a></li><li>5.2 <a href="#Link5_2" title="Sub Judul Lima ke Dua">Sub Judul Lima ke Dua</a></li></ul></li><li>6 <a href="#Link6" title="Judul Enam">Judul Enam</a></li></ul></div>

Note : #Link1 sampai dengan #Link6 merupakan Link pemanggil (Anda bisa menambah atau menguranginya)

3. Selanjutnya Anda tinggal mengatur penulisan H1 (heading) dan H2 (subheading)

Caranya seperti di bawah ini :

<h2 id="toc1">Judul Satu</h2>

( Isi paragraf satu ....)

<h2 id="toc2">Judul Dua</h2>

( Isi paragraf dua ....)

<h2 id="toc3">Judul Tiga</h2>

( Isi paragraf tiga ....)

<h2 id="toc4">Judul Empat</h2>

( Isi paragraf empat ....)

<h2 id="toc5">Judul 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">Judul Enam</h2>

 ( Isi paragraf enam ....)

Jika sudah selesai anda mengisinya postingan pun siap di publikasikan

Sekian ulasan mengenai cara membuat Table of Content di Blogspot, silahkan mencobanya dan jangan sungkan untuk berkomentar ...

semoga bermanfaat !!!