Cara Membuat TOC (Table of Content) Sederhana di Blogger

  • Whatsapp
Cara Membuat TOC (Table of Content) Sederhana di Blogger
Cara Membuat TOC (Table of Content) Sederhana di Blogger

Lapaklama.com | Hallo sobat blogger, di postingan kali ini kami akan membagikan sebuah tips sederhana yang bisa membuat postingan kamu lebih menarik, Apa itu? Yaitu Membuat TOC (Table of Content) di setiap postingan blogger kamu.

Dengan adanya TOC (Table of Content) selain membuat postingan lebih menarik di mata mesin pencari, Juga sangat berguna untuk memudahkan pengunjung dalam membaca inti konten yang ada di postingan tersebut. Buat kamu yang mungkin belum mengetahui seperti apa itu TOC (Table of Content) silahkan lihat conton dibawah ini.

Membuat TOC (Table of Content) di Blogger

Daftar isi di postingan atau yang biasa di sebut TOC sudah sangat banyak di gunakan para blogger ternama di indonesia seperti wikipedia, blog niagahoster. Saya sendiri menggunakan TOC demi memberikan kenyamanan kepada pengunjung untuk langsung melihat topik utama yang saya bahas di setiap artikelnya. dengan fitur ini pengunjung tidak perlu membaca dari awal artikel hingga ahir untuk menemukan inti dari pembahasan tersebut.

Panduan ini kami rekomendasikan untuk kalian para pengguna platform blogger, sedangkan untuk pengguna wordpress, Kami sudah pernah membagikan cara membuat TOC (Table of Content) di wordpress dengan menggunakan plugin.

Table Of Content yang kami berikan ini hanya menggunakan CSS yang sangat sedikit sehingga tidak membebani loading blog kalian, serta tampilannya yang juga sangat sederhana. Langsung saja simak panduanya berikut ini.

Panduan Membuat TOC (Table of Content) Sederhana di Blogger

1. Silahkan masuk kehalaman dasboard blogger kamu, kemudian pilih menu Tema dan klik Edit HTML

2. Dihalaman edit HTML silahkan cari kode ]]></b:skin> (Gunakan kombinasi tombol CTRLF untuk memudahkan dalam mencari kode tersebut).

3. Jika kode sudah anda temukan, Tambahkan CSS berikut ini tepat dibawah kode tersebut.

.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. dan Jangan lupa klik Simpan Perubahan setelah semuanya sudah kamu lakukan.

5. Beralih kemenu Postingan, Silahkan buat postingan baru atau edit Postingan lama dan Copy kode dibawah ini pada mode HTML bukan Compose.

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

6. Silahkan Edit Title dan Sub Title sesuai dengan kebutuhan anda. dan jangan lupa untuk menempatkan id=”toc1″ dan seterusnya dibagian H1 H2 dan seterusnya pada postingan tersebut.

7. Jika sudah, silahkan Publikasikan / Perbarui postingan tersebut.

Hasil Jadi Tampilan TOC:

Note: Tampilan diatas mungkin akan berbeda, Hal ini dikarenakan faktor template yang kamu gunakan.

Baca:

Demikian informasi kali ini, dan terimakasih telah membaca postingan Cara Membuat TOC (Table of Content) Sederhana di Blogger.

Nilai

Pos terkait

Loading...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *