Cara membuat daftar isi di postingan blog

Dalam postingan blog ini, saya akan menunjukkan bagaimana anda bisa membuat Daftar Isi dalam postingan blog blogger Anda. Seperti yang Anda ketahui, Blogger tidak mendukung Plugin seperti WordPress, Namun, jika Anda memiliki sedikit pengetahuan teknologi, Anda dapat dengan mudah membuat toc ringan yang dirancang khusus untuk blog Anda.

Jadi postingan kali ini saya akan menunjukkan metode langkah demi langkah cara membuat TOC untuk postingan blog  dan halaman anda.

Daftar isi

• 1. Manfaat SEO dari TOC
• 2. peningkatan pengalaman pengguna.

cara membuat daftar isi.

A.Langkah 1 : Menambahkan Kode CSS di Template.

B.Langkah 2 : Membuat ID Pada Elemen Judul

• C.Langkah 3 : Menambah Kotak Daftar Isi di Dalam Postingan

Tetapi sebelum kita mulai, mari kita bahas beberapa manfaat memiliki TOC di postingan blog Anda.

1. Manfaat SEO dari TOC

Seperti yang Anda tahu Google menyukai postingan blog dan halaman web yang sangat rinci dan terstruktur dengan baik . Dan dengan menambahkan toc di postingan blog Anda, Anda dapat membuat postingan blog Anda lebih terstruktur. 

Dan Jika postingan blog Anda terstruktur dengan baik maka google dapat menampilkan Langsung ke tautan dalam deskripsi meta di Halaman Hasil Pencarian. 

Yang merupakan manfaat besar SEO Blogspot! 

Sekarang, Ini adalah contoh Google Jump to links.

 

2.Peningkatan Pengalaman Pengguna

Pengalaman pengguna adalah bagian lain yang sangat penting dari sebuah blog yang tidak diperhatikan oleh banyak Blogger. Tapi hal ini adalah poin pentingnya, 

menurut sebuah studi, pengalaman pengguna adalah kunci untuk mendapatkan peringkat yang lebih tinggi di SERP. 

Dan Daftar Isi akan membantu Anda, meningkatkan pengalaman pengguna situs web Anda. 

Menurut sebuah penelitian oleh NN Group, lebih dari 79% dari total pembaca web adalah pemindai yang hanya membaca poin-poin penting dari suatu halaman web.

Dan menambahkan TOC akan memungkinkan pembaca Anda untuk melompat ke bagian penting dari postingan blog. Yang bisa menjadi terobosan pengalaman bagi pengguna situs web Anda.

Sekarang, mari kita bahas terlebih dahulu bagaimana anda bisa membuat daftar isi otomatis di postingan blogger google.

Langkah 1 : Menambahkan Kode CSS di Template

Kode CSS di bawah ini akan membuat tampilan daftar isi dapat di hide atau non hide nantinya.Buka dasbor blog anda, kemudian pilih tem, edit Html, kemudian Copy kode di bawah ini dan pastekan sebelum kode ]]></b:skin> atau </Style>( Biasanya di paling bawah )

/* Daftar isi */ .toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;} .tocp {display:inline; margin-right:10px}.toc a {text-decoration:none} .toca: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 postingan 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>

Contoh :

 

Keterangan :

• Untuk menambahkan atribut ID lakukan ketika kalian membuat artikel dalam mode HTML di di blogger.

Langkah 3 : Menambah Kotak Daftar Isi di Dalam Postingan

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"> <inputtype="checkbox" role="button"id="toctoggle" class="toctoggle"> <divclass="toctitle"> <p>Daftar isi</p><span class="toctogglespan"><labelclass="toctogglelabel" for="toctoggle"></label></span> </div> <ul> <li>1 <ahref="#isi1" title="Daftar isi 1">Judul Daftar isi 1</a></li> <li>2 <ahref="#isi2" title="Daftar isi 2">Judul Daftar isi 2</a></li> <li>3 <ahref="#isi3" title="Daftar isi 3">Judul Daftar isi 3</a></li> <li>4 <ahref="#isi4" title="Daftar isi 4">Judul Daftar isi 4</a> <ul> <li>5.1 <ahref="#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>

Keterangan :

• #isi merupakan id judul kalian, silahkan ganti sesuai id yang kalian buat untuk tiap judul di dalam postingan kalian.

• Bagian Title kalian ganti sesuai judul-judul di dalam postingan kalian.

• Ketika menambahkan kotak daftar isi ini pastikan kalian publikasikan 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.

Artikel Terkait