Cara Membuat Table of Content (ToC) Di Blogger dan WordPress

Cara Membuat Table of Content (ToC) Di Blogger dan WordPress

Pernah melihat sebuah situs web atau blog menggunakan link yang dapat melompat ke konten jika di klik? Jika pernah, itu adalah salah satu kode HTML yang dikemas dalam bentuk Table of Content (ToC) dimana penggunaanya untuk mempermudah pembaca menemukan konten yang diinginkan langsung tanpa harus mencarinya terlebih dahulu.

Table of Content ini juga sering disebut sebagai Daftar Isi yang mengemas semua heading (H2, H3 dan h4) di dalam satu kolom yang dibungkus dengan table.



Penggunaan Table of Content sudah ada sejak dulu dan baru populer sekarang ini karena banyaknya blogger dan webmaster yang membuat konten teks panjang. Dengan menggunakan Table of Content pemilik blog juga jadi lebih mudah untuk menjabarkan isi konten / artikel dan pengunjung pun bisa lebih nyaman membacanya.


Seperti apa sih Table of Content itu?


Kalau kamu sering menjelajah internet, pastilah pernah melihat yang namanya Table of Content ini, tampilannya seperti daftar isi sebuah blog namun lebih sederhana. Berikut penampakannya :


Table of Content


Nah sekarang kalau kamu mau membuat Table of Content di dalam artikel blog atau web, kamu perlu menambahkan beberapa baris kode ke dalam CSS template dan HTML ke dalam artikel yang ingin diberikan Table of Content.

Berikut ini kode CSS yang bisa kamu terapkan pada template blog untuk membuat tampilan table.


CSS ToC



Letakkan kode tersebut pada bagian CSS template kamu. Jika kamu belum paham, letakkan saja tepat diatas kode <*/style> (tanpa tanda bintang) kemudian simpan.




Untuk menggunakannya pada artikel, kamu harus menggunakan HTML standar yang berfungsi untuk membuat heading lompat ke konten. Berikut kodenya :


HTML ToC



Letakkan kode tersebut pada postingan artikel blog kamu (pastikan kamu menulis artikel dalam Mode HTML).




Untuk membuat heading (judul konten) dan isi kontennya cukup dengan menambahkan Tag ID-nya saja. Agar lebih mudah salin kode dibawah ini dan letakkan dibawah kode HTML ToC.


Content ToC



Apabila semuanya sudah kamu sesuaikan, lihatlah preview-nya pada artikel kamu. Apakah Table of Content bekerja dengan sempurna atau mengalami kesalahan. Jika ada kesalahan, silahkan periksa ulang, mungkin ada langkah yang kamu lewati.

Keseluruhan kode Table of Content menggunakan HTML standar dimana dapat bekerja dengan sempurna pada semua halaman web yang dibuat menggunakan HTML seperti Blogger dan WordPress.



INFO : Khusus untuk pengguna WordPress kamu bisa menggunakan plugin Simple Custom CSS untuk menambahkan CSS ToC ke dalam tema tanpa harus merubah tema aslinya.
Sayangnya, kode Table of Content ini tidak valid pada halaman AMP. Jadi buat kamu yang sudah menggunakan Template AMP jangan menggunakan Table of Content karena itu tidak di dukung oleh AMP.

Selamat mencoba dan semoga bermanfaat.

Jika kamu rasa artikel ini bermanfaat dan layak dibaca oleh orang lain, jangan ragu untuk membagikannya kepada teman-teman atau saudara dengan meng-klik tombol sosial media diatas ini.

0 komentar:

Posting Komentar