Cara Mengatasi Table of Content Yang Tidak Pas Ketika di Klik


Wahyu Development - Bagaimana cara mengatasi Table of Content (TOC) ketika di klik tidak melebihi subjudul pada sebuah artikel?

Table of Content (TOC) adalah sebuah tata letak dimana membuat daftar isi pada halaman website, yang mempermudah pengunjung dalam melakukan pencarian data yang dibutuhkan, jika menggunakan WordPress sudah terdapat plugin Table of Content, tapi jika menggunakan Blogger perlu menambahkan code Table of Content. Cara menambahkannya baca artikel sebelumnya.



Pada dasarnya code Table of Content hanya seperti itu, akan tetapi jika template anda menggunakan header sticky, maka anda harus menambahkan code padding.

Apa itu header sticky?

Header Sticky adalah sebuah tampilan atas website yang jika di scroll ke bawah atau ke atas, posisi header tersebut tidak akan berubah, sehingga perlu menambahkan code agar ketika pengunjung meng-klik submenu daftar isi, tidak melewati submenu yang telah anda buat.

Bagaimana cara menambahkan code TOC agar sesuai?

Pertama silahkan anda buka dasbor Blogger anda --> Lalu klik Tema --> Kemudian klik Edit HTML. Pada halaman Edit HTML silahkan anda masukan script Table of Content yanga ada di artikel diatas atau tambahkan padding: 50px; pada bagian :target::befor.

Sebelum

Sesudah

[Catatan] padding: 50px disesuaikan dengan ukuran header sticky anda.

Untuk melihat header sticky anda cukup melakukan inspact pada header website anda maka anda akan melihat ukuran panjang dan lebar ukuran header tersebut.

Jika sudah silahkan save tema. Maka script Table of Content anda akan sesuai ketika di klik pada bagian daftar isi.



Itulah cara mengatasi Table of Content yang tidak sesuai, berikan komentar anda jika ada hal yang perlu ditanyakan dan semoga bermanfaat . . .

0 Response to "Cara Mengatasi Table of Content Yang Tidak Pas Ketika di Klik"

Post a Comment

Komentar anda adalah motivasi kami!
Untuk menyisipkan code gunakan
<i rel="code">Tuliskan Code</i>
Untuk menyisipkan gambar gunakan
<i rel="image">URL Gambar</i>
Untuk menyisipkan catatan gunakan
<b rel="quote">Tuliskan Catatan Anda</b>
Centang Notify me untuk mendapatkan notifikasi balasan komentar melalui Email

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel