Cara Membuat TOC (Table of Content) Sederhana pada Postingan Blog

KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini saya bagikan informasi mengenai Cara Membuat TOC Sederhana pada Postingan Blog. Tampilan dari TOC kali ini tidak menampilkan tombol show hide seperti yang saya bahas pada artikel : Cara Membuat TOC Seperti Kurazone. Namun, hanya tampilan sederhana saja dengan sedikit bumbu CSS supaya lebih menarik. Tampilan dari TOC sederhana ini akan nampak seperti dibawah ini :


Jika sahabat Kurazer tertarik ingin membuatnya, maka berikut adalah Cara Membuat TOC (Table of Content) Sederhana pada Postingan Blog
1. Buka akun Blogger
2. Pilih Menu Tema >> Pilih Edit HTML
3. Copy kode CSS dibawah ini, lalu letakkan (paste) diatas kode ]]></b:skin>
.kurabox1 {background: #ddd; border: 1px dashed #007bfd;}
.kurabox2 {background: #ccc; border-bottom: 2px solid #007bfd;}
.kuradaftar {padding-left: 10px;font-size:19px}
.kuratoctabel {border-bottom: #007bfd dashed 1px; margin-left: -15px;padding:3px}
a.alink {text-decoration:none;font-weight:bold}
4. Simpan Template

Selanjutnya pindah ke menu Postingan

1. Buat Postingan Baru atau Edit postingan yang sudah ada
2. Copy kode HTML dibawah ini
<div class="kurabox1">
<div class="kurabox2">
<span class="kuradaftar"><b><i class="fa fa-book"></i> Daftar isi</b></span></div>
<ol>
<li class="kuratoctabel"><a class="alink" href="#toc1">Title 1</a>
<ul>
<li><a class="alink" href="#toc2">Sub Title 1.1</a></li>
<li><a class="alink" href="#toc3">Sub Title 1.2</a></li>
</ul>
</li>
<li class="kuratoctabel"><a class="alink" href="#toc4">Title 2</a></li>
<li class="kuratoctabel"><a class="alink" href="#toc5">Title 3</a></li>
<li class="kuratoctabel"><a class="alink" href="#toc6">Title 4</a>
<ul>
<li><a class="alink" href="#toc7">Sub Title 4.1</a></li>
<li><a class="alink" href="#toc8">Sub Title 4.2</a></li>
</ul>
</li>
</ol>
</div>
3. Letakkan (paste) kedalam postingan dalam bentuk mode HTML (bukan Compose)
4. Edit Title dan Sub Title sesuai kebutuhan
5. Jangan lupa untuk menempatkan id="toc1" dan seterusnya pada bagian H1 nya postingan (sudah pernah dijelaskan di artikel Cara Membuat TOC Seperti Kurazone)
6. Update / Publikasi Artikel
7. Sisanya bisa kalian kembangkan sendiri

Contoh hasil jadi :

Tampilan diatas mungkin sedikit berbeda karena faktor template yang kalian gunakan, khususnya pengaturan ul, ol dan li pada template kalian.
Itulah informasi mengenai "Cara Membuat TOC (Table of Content) Sederhana pada Postingan Blog", selamat mencoba dan semoga bermanfaat. Goodluck!






Lebih baru Lebih lama