Cara Memasang ToC di Template Median Plus UI Versi2.6.2

Daftar Isi [Tampil]

Halo Sahabat Kang Rizky, berjumpa lagi ya di Blog yang sama ya, dalam kesempatan kali ini mimin akan berbagi Cara Memasang ToC di Template Median Plus UI Versi2.6.2.

Sahabat ToC di template Plus UI Versi 2.6.2 ini secara bawaan memang sudah terpasang di sebelah kanan postingan. Tetapi, bagi sahabat sebagian blogger, kadang mereka membutuhkan ToC yang berada di dalam artikelnya. Bagaimana cara membuatnya? Simak penjelasan berikut ini ya.

Pengertian ToC

ToC adalah singkatan dari Tabel of Content yang jika diterjemahkan ke bahasa Indonesia artinya adalah Daftar isi.

Fungsi ToC

Ada beberapa fungsi ToC, diantanya:

1. Rangkuman Materi

Dari melihat ToCnya saja, pembaca akan lebih mudah memahami topik apa saja yang dibahas dalam artikel yang sahabatbuat. Karena, ToC berisi kumpulan judul dan subjudul yang menggambarkan kerangka pembahasannya.

2. Mempermudah Navigasi

Pembaca akan lebih mudah lagi untuk melompat ke bagian yang ingin dibaca tanpa harus scroll layar. Tentu saja hal ini sangat membantu apalagi jika blog sahabat artikelnya sangat panjang dan detail pembahasannya.

Posisi Ideal Penempatan ToC

ToC akan lebih fungsional dan berguna jika di letakkan:

1. Di Samping

ToC bisa juga ditempatkan di sisi kiri maupun sisi kanan blog sahabat. Tujuannya sama seperti penanda buku yang bisa di raih atau di akses kapan saja ya. Sehingga blog lebih efisien saat dibutuhkan.

2. Paruh Atas Artikel

Namanya juga daftar isi (ToC), baik di dalam makalah maupun dunia blogger sama saja. Sahabat pada ToC akan jauh lebih baik ditempatkan di bagian atas artikel dibanding di tengah atau di paruh bawah. mimin sendiri menempatkan ToC setelah paragraf pertama, lihat contohnya di blog mimin.

Jenis ToC Plus UI

Ada 3 macam jenis ToC di template Blogger Plus UI versi 2.6.2 ini, yaitu:

1. ToC Manual

ToC ini juga terbilang lumayan jadul karena harus ketik satu persatu, ribetkan!

2. ToC Semi Otomatis

ToC Semi Otomatis merupakan codenya tidak tertanam langsung di dalam artikelnya, tapi kalau kita pasang, artikel secara otomatis menyesuaikan Heading (Judul dan Subjudulnya) yang sudah sahabat tulis. Tapi tenang saja, nanti mimin kasih tipsnya agar ToC jenis ini dibuat Full Otomatis juga ya di bloh sahabat.

3. ToC Full Otomatis

Berbeda dengan sebelumnya, ToC ini berada di luar artikel. Saat ini pemasangan, sahabat tidak perlu ngapa-ngapain lagi karena ToC secara otomatis akan aktif saat kita menggunakan Heading H1, H2, H3, H4

Cara Membuat ToC Template Plus UI

Berdasarkan penjelasan di atas, maka saya akan membuat ketiga jenis ToC tersebut di sini. Simak baik-baik ya.

1. Cara Membuat ToC Manual

Masuk Dashboard Blogger
Tekan + Postingan Baru
Tulis artikel yang berisi Judul dan Subjudul
Klik icon 🖉 Pensil dan pilih < > Edit HTML
Tambahkan ID heading dan subheading
Sebelum

h2>Judul</h2>
<h3>Sub-Sudul</h3>

Sesudah

<h2 id='heading'>Judul</h2>
<h3 id='subHeading'>Sub-Judul</h3>

Untuk mengaktifkan codenya, letakkan code ini di atas code tadi ya

<details class='sp toc' open=''>
<summary data-show='Show all' data-hide='Hide all'>Contents</summary>
<div class='toC'>

<ol>
<li><a href='#heading'>Judul</a></li>
...
</ol>

<ol>
<li><a href='#heading'>Judul</a>
<ol>
<li><a href='#subHeading'>Sub-Judul</a></li>
...
</ol>
</li>
</ol>
</div>
</details>

Ganti tulisan warna kuning sesuai dengan yang diinginkan
Hapus tulisan open='' jika ingin menutup otomatis ToC saat pertama kali memuat.
Jangan lupa tekan Pratinjau sebelum klik Publikasikan supaya bisa melihat kodenya berfungsi dengan baik atau tidak.

Cara Membuat ToC Semi Otomatis

Masuk Dashboard Blogger
Tekan + Postingan Baru
Tulis artikel yang berisi Judul dan Subjudul
Klik icon 🖉 Pensil dan pilih < > Edit HTML
Letakkan kode ini setelah paragraf pertama

<details class='sp toc'>
<summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>
<div class='toC' id='autoToc'></div>
</details>

Publikasikan

Cara Membuat ToC Otomatis

Masuk Dashboard Blogger
Tekan + Postingan Baru
Tulis artikel yang berisi Judul dan Subjudul
Publikasikan

4. Cara Membuat ToC Semi Otomatis Menjadi Full Otomatis di dalam Semua Artikel Yang Pernah di Posting

Tunggu update artikel terbaru dari saya

Demikian Cara Pasang ToC di Template Blogger Plus UI, di postingan berikutnya mimin akan bagikan cara modifikasi ToC Semi Otomatis menjadi Full Otomatis agar tampil di dalam semua artikel yang pernah sahabat posting ya.

Jika informasi ini bermanfaat, Jangan lupa Share ya teman-teman, Terima Kasih.

Donasi

Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.