Jika kamu membaca sebuah buku, entah jenis buku apa saja judulnya dibeberapa halaman kamu akan menemukan yang namanya Table of Contents (TOC). Tujuannya agar pembaca buku tersebut, dapat mengetahui hal-hal pokok, yang akan dibicarakan di buku tersebut. Hal ini juga menambah rasa keingintahuan pembaca, tentang buku tersebut. Namun pada artikel saya kali ini, adalah bagaimana jika Table Of Content (Daftar isi) ini diletakan pada postingan blogger? Tentunya akan menambah nilai mutu dari postingan artikel yang kamu buat.

Apa itu Daftar Isi Postingan Blogger?

Tutorial Memasang Table Of Content di Postingan Blog

Daftar isi di Postingan blogger adalah sebuah daftar yang berisi point-point pokok pembahasan, yang gunanya untuk membatasi topik yang dibahas. Sehingga nantinya, apa yang dibahas di dalam blog akan lebih sistematis dan terurut. Hal ini juga membuat pembaca pada blog kamu, akan lebih mudah memahami secara baik, apa yang sebenarnya sedang kamu jelaskan dalam topik yang ia baca.

Dari point-point pokok yang dibuat itulah, pembaca akan dapat dengan mudah menyimpulkan dari apa yang kamu tulis. Jika kamu pernah membuka situs Wikipedia atau pernah membaca salah satu artikel disana, tentunya kamu akan melihat Table of Content. Dan rata-rata artikel pada wikipedia tersebut dibuat daftar isinya. Sehingga jika kita perhatikan, pembahasan pada artikel Wikipedia semuanya terurut dan benar-benar komplek. Hal ini juga membuat Wikipedia, sangat begitu diperhatikan dengan baik di Mesin pencarian. 


Manfaat Memasang Daftar Isi di Postingan Blogger


Jika kamu ingin meningkatkan dan menambah nilai dari artikel yang kamu buat, maka sangat disarankan untuk membuat daftar isi pada semua postingan blogger kamu. Adapun manfaat yang akan kamu dapatkan, dari memasang Daftar isi ini di postingan blogger ini, diantaranya:

  1. Memberikan hal dasar kepada pembaca secara umum, sehingga pembaca akan lebih muda mencerna terhadap yang kamu tulis itu.
  2. Membuat Artikel kamu menjadi terstruktur, dan sistematis.
  3. Terlihat lebih profesiaonal, meningkatkan kenyaman dari sang pembaca
  4. Menambah Seo dari artikel yang ditulis, saat telah di Indeks di Pencarian.
  5. Pembahasan akan lebih terarah.

Cara Membuat Daftar Isi di Postingan Blogger yang Responsive

Berikut ini cara memasang Table of Content di Postingan artikel yang kamu buat:
1 . Silakan kamu buka Tema blogger, pilih edit with HTML. Silakan kamu kamu copy kode dibawah ini, dan letakan diatas ]]></b:skin> atau sebelum </style> .

/* Table of Contents by Alekpedia */
.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:50px; margin-top:-50px; visibility:hidden}
2. Untuk table of contentnya, dibuat dengan kode berikut. Dan letakan pada setiap postingan artikel blog kamu, dan atur sesuaikan dengan artikel yang kamu tulis. Dan meletakan kodenya, harus di mode  html di postingan blogger bukan compose. Untuk peletakannya, bisa kamu atur sesuai selera. Namun biasanya diletakan pada awal postingan artikel blog.

<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>

3. Selanjutnya pada bagian heading judul pokok pembahasan, di modif menjadi seperti ini. Dan gantikan setiap judulnya, dengan kode berikut. Sama cara peletakannya, harus di mode HTML bukan compose.

<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
5. Setelah selesai silakan Klik Publikasikan.

Nah, sekarang coba lihat artikel yang telah kamu buat tadi. Tentunya sudah memiliki tampilan yang jauh lebih menarik dari sebelumnya.