Daftar isi
Untuk pengguna wordpress jika ingin menambahkan daftar isi di dalam postingan bisa dilakukan dengan cara otomatis dan sangat mudah, yaitu kalian tinggal menginstal Plugin semacam "Table Of Contents Plus", dan kalian tinggal melakukan penyetingan di dalamnya.
Berbeda dengan Wordpress, Sayangnya untuk pengguna blogger setiap kali ingin membuat daftar isi di dalam postinganya harus di lakukan secara manual dengan menambahkan kode-kode HTML tertentu di setiap kali kalian membuat artikel. Perhatikan bagian atas artikel ini, sebaga contoh daftar isi untuk pengguna blogger.
Jika kalian berminat untuk membuatnya seperti di atas artikel saya ini, ikuti tiap langkah untuk membuatnya
Cara Membuat Daftar Isi di Dalam Postingan Blogger
Setiap kali ingin mengikuti sebuah panduan atau totorial pastikan di lakukan dengan benar agar tidak terjadi kesalahan.
Langkah 1 : Menambahkan Kode CSS di Template
Kode CSS di bawah ini akan membuat tampilan daftar isi dapat di hide atau non hide nantinya, Copy kode di bawah ini dan pastekan sebelum kode ]]></b:skin> atau </Style>.
/* Daftar isi */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc p {display:inline; 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-left:0px; margin-bottom:0px; padding:0px; text-align:left}
.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}
Langkah 2 : Membuat ID Pada Elemen Judul
Biasanya setiap judul atau pun sub-judul di dalam potingan akan terdapat di dalam kode h1,h2,h3,h4,h5,h6. Ketika kalian ingin membuat daftar isi yang mengarah ke judul-judul tertentu kalian perlu menambahkan atribut ID di dalam tag judul, lihat contoh di bawah ini.
<h2 id="isi1">Judul di Dalam Postingan</h2>
- Untuk menambahkan atribut ID lakukan ketika kalian membuat artikel dalam mode HTML di di blogger.
Langkah 3 : Menambah Kotak Daftar Isi di Dalam Potingan
Untuk langkah ke 3 bisa kalian lakukan sebelum atau sesudah membuat artikel, jika kalian sudah memiliki konsep untuk artikel yang kalian buat dalam tahap ini akan menjadi lebih mudah.
Tambahkan kode di bawah ini di bagian dimana kalian ingin menampilkan daftar isi artikel kalian.
<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle">
<div class="toctitle">
<p>Daftar isi</p>
<span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span>
</div>
<ul>
<li>1 <a href="#isi1" title="Daftar isi 1">Judul Daftar isi 1</a></li>
<li>2 <a href="#isi2" title="Daftar isi 2">Judul Daftar isi 2</a></li>
<li>3 <a href="#isi3" title="Daftar isi 3">Judul Daftar isi 3</a></li>
<li>4 <a href="#isi4" title="Daftar isi 4">Judul Daftar isi 4</a>
<ul>
<li>5.1 <a href="#isi4.1" title="Sub Judul Daftar isi 4.1">Sub Judul Daftar isi 4.1</a></li>
<li>5.2 <a href="#isi4.2" title="Sub Judul Daftar isi 4.2">Sub Judul Daftar isi 4.2</a></li>
</ul>
</li>
<li>6 <a href="#isi5" title="Judul Enam">Judul Enam</a></li>
</ul>
</div>
- #isi merupakan id judul kalian, silahkan ganti sesuai id yang kalian buat untuk tiap judul di dalam potingan kalian.
- Bagian Title kalian ganti sesuai judul-judul di dalam postingan kalian.
- Ketika menambahkan kotak daftar isi ini pastikan kalian pulikasikan ketika kalian di mode HTML.
Sebagai contoh lihat gambar di bawah ini :
Penutup
Dalam membuat artikel yang harus kita utamakan kualitas dan juga informasi yang mudah untuk pengunjung blog, dengan menambahkan daftar isi di dalamnya artinya kita akan membantu pembaca menemukan apa yang akan mereka cari di dalam isi artikel.
Semoga ini dapat membatu, gunakanlah secara optimal agar dapat memperbaiki kualitas setiap konten yang kalian posting dan lakukan cara lain seupaya pengunjung blog kalian betah dan puas dengan koten yang kalian sajikan.