Table of content atau daftar isi blog menjadi hal yang sering di gunakan oleh para blogger saat ini. Apabila kamu ingin menggunakannya, ikuti panduan cara membuat table of content dalam postingan blog amp, non amp baik pengguna blogger maupun wordpress.
TOC di blog yaitu memberika poin-poin utama yang kita dibahas kepada pengunjung. Visitor pun dipermudah dengan adanya navigasi TOC dalam artikel yang sedang dibahas.
Apa Itu Table OF Content?
Biar tidak pusing, maka saya contohkan artikel kita itu sebagai buku. Biasanya pada buku terdapat daftar isi yang menjelaskan secara ringkas tulisan-tulisan yang didalamnya.
Pada daftar isi tersebut, terdapat bab atau judul-judul yang bisa dimanfaatkan pembaca. Maka kamu pun bisa meloncat ke halaman mana yang kamu sukai dengan adanya daftar isi tersebut.
TOC di blog pada prinsipnya sama dengan daftar isi yang ada di buku. Hanya perbedaannya yaitu daftar isi tersebut menyatu dengan apa yang ada dalam postingan blog.
Sub judul atau dalam blog lebih dikenal dengan heading (H1) dan sub heading (H2,H3, H4 dst), menjadi bagian penentu adanya TOC ini.
Bagi kamu yang mau membuat table of content di blog wordpress maupun blogspot (blogger), silahkan ikuti panduannya dibawah ini.
Cara Membuat Table Of Content Di Blog AMP
Agar valid amp, maka TOC yang dibuat tidak boleh memakai javascript. Karena nantinya akan terjadi error dan tidak akan valid amp.
Untuk menyisipkan TOC ke dalam postingan blog amp, silahkan ikuti panduannya dibawah ini. Disadur dari blog Kompi Ajaib.
1. Masuk pada dashboard blogger kalian,
2. Kemudian pilih tema dan Edit HTML
3. Masukan css dibawah ini pada bagian style amp-custom.
#btn_toc{font-weight:bold;cursor:pointer}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li,.back_toc{cursor:pointer}
#toc{display:grid}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}
4. Simpan.
Untuk membuat TOC pada postingan blog amp, silahkan simak dibawah ini
1. Masukan kode dibawah ini pada postingan blog dalam Mode HTML, sebaiknya sebelum paragraf pertama.
<div id="btn_toc" on="tap:toc.toggleVisibility" role='button' tabindex='0'>Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="Lorem Ipsum">Lorem Ipsum</a></li>
<li><a href="#toc_2" title="Morbi gravida varius fringilla">Morbi gravida varius fringilla</a></li>
<li><a href="#toc_3" title="Mauris consectetur">Mauris consectetur</a></li>
<li><a href="#toc_4" title="Donec facilisis nec sem ac mattis">Donec facilisis nec sem ac mattis</a></li>
<li><a href="#toc_5" title="Donec finibus tellus eget sodales vestibulum">Donec finibus tellus eget sodales vestibulum</a></li>
</ol>
</div>
2. Masukan kode dibawah ini pada header atau sub header artikel.
id="toc_1"
3. Misalnya, menjadi seperti dibawah ini.
<h3 id="toc_1">Lorem Ipsum</h4>
4.Tambahkan kode dibawah ini, di paragraf terakhir, untuk memudahkan pembaca kembali ke awal artikel.
<div class="back_toc" on="tap:toc.scrollTo('position' = 'center')" role="button" tabindex="0">Back to Content ↑</div>
Catatan: Bisa menambahkan menjadi beberapa TOC, misalnya id="toc_4" dan id="toc_5" sesuai kebutuhan anda. Bisa digunakan di header mana saja, contohnya di H3 dan H4. Apabila tidak ingin muncul tulisan Content silahkan ganti sesuai keinginan. Contohnya menjadi Daftar Isi.
Cara Membuat Table Of Content Di Postingan Blog Non AMP Mirip Wikipedia
Untuk blog non amp, bisa menggunakan TOC ala Igniel yang bisa dipasang pada blog kamu. Hebatnya lagi TOC ini mirip dengan Wikipedia. Silahkan lihat panduannya dibawah ini
1. Masuk pada dashboard blogger kalian,
2. Kemudian pilih tema dan Edit HTML
3. Masukan css dibawah ini sebelum kode </style> ATAU ]]></b:skin>
/* Table of Contents by gacerindo.com */
.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:0px; margin-top:0px; visibility:hidden}
4. Simpan.
Saat menulis artikel, silahkan masuk ke Mode HTML.
1. Masukan kode dibawah ini, sebelum paragraf pertama.
<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h2>Daftar isi</h2><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>
<li>5 <a href="#toc5" title="Judul Lima">Judul Lima</a>
<ul>
<li>5.1 <a href="#toc5_1" title="Sub Judul Lima ke Satu">Sub Judul Lima ke Satu</a></li>
<li>5.2 <a href="#toc5_2" title="Sub Judul Lima ke Dua">Sub Judul Lima ke Dua</a></li>
</ul>
</li>
<li>6 <a href="#toc6" title="Judul Enam">Judul Enam</a></li>
</ul>
</div>
2. Kemudian atur Header mana yang akan kamu masukan ke dalam TOC. Contohnya bisa dilihat dibawah ini.
<h2 id="toc1">Judul Satu</h2>
...isi paragraf satu
<h2 id="toc2">Judul Dua</h2>
...isi paragraf dua
<h2 id="toc3">Judul Tiga</h2>
...isi paragraf tiga
<h2 id="toc4">Judul Empat</h2>
...isi paragraf empat
<h2 id="toc5">Judul Lima</h2>
...isi paragraf lima
<h3 id="toc5_1">Sub Judul Lima ke Satu</h3>
...isi paragraf lima part 1
<h3 id="toc5_2">Sub Judul Lima ke Dua</h3>
...isi paragraf lima part 2
Cara Membuat Table Of Content Di Wordpress
Bagi kalian para pengguna wordpress, untuk membuat table of content pada blog wordpress caranya mudah. Salah satu caranya dengan menggunakan plugin yang tersedia.
Ada beberapa plugin TOC yang bisa kamu gunakan. Sebagai contohnya saya menggunakan Easy Table Of Content. Untuk panduannya silahkan lihat dibawah ini.
1. Masuk pada dashboard wordpress kalian, pilih Plugin, kemudian Tambah Baru. Masukan Table Of content pada kolom pencarian.
2. Contohnya saya menggunakan Easy TOC, pilih Pasang Sekarang. Tunggu proses instalasinya.
3. Setelah itu pilih Aktifkan.
4. Pilih kembali Setting untuk pugin Easy TOC.
Untuk settingannya perhatikan poin-poin dibawah ini.
- Enable Support: Pilih Pos dan Halaman
- Auto Insert: Pilih Pos
- Position: Boleh default atau pilih TOP
- Show When: Pilih maksimal 4 Header saja, (Apabila header kurang dari 4, TOC tidak akan tampil)
- Display Header Labe: Centang saja
- Header Laber: biarkan atau ganti menjadi Daftar Isi
- Pilih Save Change.
Untuk setingan yang lainnya, lebih baik dibiarkan atau silahkan edit sesuai dengan keinginan kamu. Kamu tidak perlu menambahkan TOC secara manual lagi di blog wordpress, karena nantinya akan terisi secara otomatis.
Itulah panduan cara membuat table of content dalam postingan blog amp dan non amp baik itu blogger maupun wordpress. Jangan sungkan untuk memberikan komentarnya ya. Semoga bermanfaat.
