Table Of Contents merupakan rangkaian daftar judul yang dibahas pada sebuah artikel, anda dapat mengatur daftar judul yang akan digunakan sebagai daftar isi artikel.
Setelah itu fitur pada Table Of Contents akan secara otomatis mengelompokkan heading-heading tersebut menjadi sebuah daftar isi fungsinya adalah agar artikel lebih terstruktur dan lebih readable (mudah di baca).
Apa Manfaat Menambahkan Table of Contents?
- Google menyukai halaman web yang terstruktur dengan baik, sehingga postingan mu akan terlihat lebih berkarakter.
- Jika beruntung, Google bisa menampilkan cuplikan unggulan serta link langsung di hasil pencarian.
- Pengoptimalan pada SERPs yang dapat membuat peringkat Anda cepat naik.
- Membantu meningkatkan pengalaman pembaca, bahkan menurut penelitian ada sekitar 70% pengunjung hanya memindai poin-poin vital di suatu laman web.
- Mempermudah mereka untuk melihat informasi utama, kemudian menavigasinya.
Cara Membuat Table Of Contents di Postingan Blogspot
1. Seperti biasa, pergi ke halaman Dashboard Blogger – >> Template – >> Edit HTML dan temukan kode ]]></b:skin> atau </style>
2. Salin dan tempel kode CSS tepat di atas ]]></b:skin> atau </style> berikut kode yang kami sediakan di bawah ini.
.mbtTOC{
border:5px solid #f7f0b8;
box-shadow:1px 1px 0 #EDE396;
background-color:#FFFFE0;
color:#707037;
line-height:1.4em;
margin:30px auto;
padding:20px 30px 20px 10px;
font-family:oswald, arial;
display: inline block;
width: auto;
}.mbtTOC ol,.mbtTOC ul {
margin:0;
padding:0;
}
.mbtTOC ul {
list-style:none;
}
.mbtTOC ol li,.mbtTOC ul li {
padding:15px 0 0;
margin:0 0 0 30px;
font-size:15px;
}
.mbtTOC a{
color:#0080ff;
text-decoration:none;
}
.mbtTOC a:hover{
text-decoration:underline;
}
.mbtTOC button{
background:#FFFFE0;
font-family:oswald, arial;
font-size:20px;position:relative;
outline:none;
cursor:pointer;
border:none;
color:#707037;
padding:0 0 0 15px;
}
.mbtTOC button:after{
content: “f0dc”;
font-family:FontAwesome;
position:relative;
left:10px;
font-size:20px;
}
3. Jika sudah cari kode <data:post.body/> lalu anda ganti dengan kode dibawah ini
<div id="post-toc"><data:post.body/></div>
Perhatikan :
Biasanya kode <data:post.body/> terdapat lebih dari satu, silahkan ganti semua dengan kode di atas
4. Lalu silahkan anda klik Simpan.
Pada tahap ini kita sudah selesai untuk menerapkan kode yang ada pada edit Html, langkah yang selanjutnya kita akan membuat artikel.
Cara Memasang Tabel Of Contents di Postingan Blog
Untuk membuat Table Of Contents dalam artikel, kita perlu menambahkan kode lagi agar Table Of Contents dapat muncul pada postingan artikel blog.
1. Buat Postingan yang akan di tambah Table Of Contents
2. Masukan kode HTML berikut pada Postingan Letakkan pada Paragraf pertama ( klik Mode HTML bukan Compose)
<div class="mbtTOC">
<button onclick="mbtToggle()">Daftar Isi</button>
<ol id="mbtTOC"></ol>
</div>3. Tambah kode di bawah ini pada akhir atau paling bawah dari setiap artikel yang ingin anda pasang Table of Contents
<script>mbtTOC();</script>4. Jika sudah silahkan anda Simpan atau bisa juga langsung di Publikasikan
Catatan :
Table of Contents otomatis hanya akan mendeteksi tag h2. Jadi anda usahakan untuk membuat sub judul pembahasan dari tag h2.
Demikian untuk Cara Membuat Table Of Contents di Blogger, semoga bisa menjadi referensi dan bermanfaat untuk semua. Selamat mencoba!