 |
| Gambar preview Tabel of content. |
Table of contents atau daftar isi di dalam postingan blog ini sangat bermanfaat sekali untuk pengunjung blog kita, manfaatnya saat pengunjung ingin meloncat ke menu yang ingin di baca, dengan sekali klik pada daftar isi yang sudah kita buat, maka akan langsung menuju ke Heading yang dituju.
Untuk itu, jangan anda pasangkan pada artikel pendek. Sebab, akan mengganggu pembaca saja. Pada umumnya table of contents ini di pasang pada artikel panjang. Sangat lucu jika dipasang pada artikel pendek yang cuma untuk bergaya-gaya.
Tutorial membuat table of content ini mungkin sedikit sulit bagi yang belum terbiasa otak atik kode di blog. Tetapi tidak ada salahnya kita orang awam ikut mencoba. Lagi pula tutorial ini gratis.
Sebaiknya langsung anda praktikkan saja. Silahkan perhatikan dan ikuti langkah demi langkah agar berhasil.
CARA MEMBUAT TABEL OF KONTEN BLOGGER DI TEMPLATE VIOMAGZ
1. Masukkan Kode CSS Di Dalam Template
- Masuk Dashboard Blogger > Tema 🎨 > Edit HTML
- Setelah Itu Cari Kode ]]></b:skin>
- Tempatkan kode CSS dibawah ini persis di atasnya kode ]]></b:skin>
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {display:inline-block; margin-right:10px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left}
.toc ul li {list-style-type:none;}
.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:48px; margin-top:24px; visibility:hidden}
.toctitle h2 {display: inline-block !important}Lebih jelasnya saya berikan contoh gambar bi bawah ini:
2. Masukkan Kode HTML Pada HTML Artikel
- Pada laman penulisan / pembuatan artikel yang ingin anda berikan tabel of konten, yang biasanya Tampilan Menulis ubahlah ke mode Tampilan HTML
- Lalu letakkan Kode HTML di bawah ini pada bagian atas artikel, biasanya diatas paragraf awal.
<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h3>Daftar Isi</h3><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
<li>1 <a href="#toc1" title="Judul Satu">Judul Satu</a></li>
<li>2 <a href="#toc2" title="Judul Dua">Judul Dua</a></li>
<li>3 <a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>
<li>4 <a href="#toc4" title="Judul Empat">Judul Empat</a></li>
</ul>
</div>Di atas adalah untuk postingan tanpa subjudul.
Perhatikan setiap baris, toc1 - toc2 dan toc lainnya bisa Anda sesuaikan mau dibuat berapa toc. Pada Contoh di atas saya hanya membuat 4 tabel of konten, Anda bisa menambahkannya berapapun.
Judul Satu - Judul Dua dan seterusnya yang saya blok adalah judul setiap menu yang akan dijadikan judul heading. Silahkan anda ubah sesuai dengan judul heading Anda sendiri.
Bagaimana untuk menambahkan "subjudul" jika postingan ada subjudulnya? Kodenya seperti ini:
<div class="toc"><input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h3>Daftar Isi</h3><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div><ul><li>1 <a href="#toc1" title="Judul Satu">Judul Satu</a></li><li>2 <a href="#toc2" title="Judul Dua">Judul Dua</a></li><li>3 <a href="#toc3" title="Judul Tiga">Judul Tiga</a></li><li>4 <a href="#toc4" title="Judul Empat">Judul Empat</a><ul> <li>4.1 <a href="#toc5_1" title="Sub Judul Empat ke Satu">Sub Judul Empat ke Satu</a></li> <li>4.2 <a href="#toc5_2" title="Sub Judul Empat ke Dua">Sub Judul Empat ke Dua</a></li> </ul></li></ul> </div>
3. Berikan id Pemanggil Di Setiap Judul Heading
Masih di dalam mode HTML artikel.
Disini anda harus memberikan id pemanggil pada setiap heading di artikel Anda, biasanya ditandai dengan <h2 judul heading</h2> atau untuk subjudul biasanya <h3 judul heading</h3>. Tergantung bagaimana anda menyesuaikannya.
- Sisipkan "id=toc1" setelah <h2 heading1.
CONTOH :
<h2 id="toc1" style="text-align: left;">1. Melatih Kepercayaan Diri Di Depan Umum</h2>
- Masukkan sesuai urutan heading, jangan "id=toc1" anda masukkan di <h2 heading 3, atau sebaliknya.
- Kemudian jika sudah semua silahkan save dan lihat hasilnya.
4. Selesai
Apakah cara ini bisa diterapkan pada template lain?
Tentu saja bisa. jika saat anda menempatkan kode CSS di atas ]]></b:skin> tetapi tidak work, coba tempatkan di atas</style>.
Kenapa di saya tidak muncul tombol sembunyikan?
Pastikan saat anda menempatkan kode di dalam html artikel, anda tidak memberi baris Enter di bagian kode header TOC. Dari kode <input sampai dengan </div> itu satu baris. Jadi yang benar langsung menyambung, tidak ada enter atau line break.
Silahkan jika ada yang masih bingung jangan ragu untuk bertanya di komentar
Terimakasih