Mudah! Cara Membuat Table of Content / Daftar Isi di Artikel Blog

Cara Membuat dan Memasang Table of Content di Artikel Blog – Table of content selain menjadi sebagai pelengkap dan mempermudah pengunjung dalam mengetahui isi yang dibahas dalam suatu artikel, juga dapat meningkatkan kualitas SEO terhadap suatu artikel atau blog tersebut.

Table of content adalah struktur poin-poin pembahasan dari topik yang terdapat pada sebuah artikel blog, atau sering di sebut juga dengan daftar isi. dan biasa digunakan pada sebuah artikel yang panjang

Penggunaan table of content atau daftar isi ini sebenarnya juga diperlukan untuk membuat kenyamanan pengunjung yang membaca artikel kita dan membuat situs atau blog kita sendiri terlihat lebih professional.

Contoh penggunaan dari table of content ini bisa dilihat pada situs Wikipedia, Jalan tikus dan banyak lagi situs lain yang menggunakan table of content ini.

Penerapan dan bagaimana cara membuat table of content ini pada blog kita sendiri sebenarnya terbilang mudah, kita hanya perlu menerapkan beberapa kode script pada template blog dan menggunakan kode panggilan pada saat kita menulis artikel baru bisa juga dengan cara otomatis.

Baiklah langsung saja kita mulai eksekusi langkah demi langkah cara membuat daftar isi atau table of content di blog secara otomatis dan manual.

Cara Membuat Table of Content di Blog

1. Buka dashboard blogger.

2. Buka Tema > Edit HTML.

3. Tempelkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau diantara kode <style> dan </style>.

/* CSS ToC BangOpit ID */
.TOCopit {
line-height: 1.4em;
padding: 0 30px 20px 10px;
display: block;
width: 95%;
margin: 0 auto;
background: #eaeaea;
border: 1px solid #ccc;
border-radius: 3px/6px
}
.TOCopit ol,
.TOCopit ul {
margin: 0;
padding: 0;
}
.TOCopit ul {
list-style: none;
}
.TOCopit ol li,
.TOCopit ul li {
padding: 15px 0 0;
margin: 0 0 0 30px;
font-size: 15px;
}
.TOCopit a {
font-weight: 700;
color: #4f4f4f;
text-decoration: none;
}
.TOCopit a:hover {
text-decoration: underline;
}
.TOCopit button {
background: #eaeaea;
font-family: oswald, arial;
font-size: 20px;
position: relative;
outline: none;
cursor: pointer;
border: none;
color: #2d2d2d;
padding: 20px 0 0 20px;
}
:target::before{content:"";display:block;height:50px;margin-top:-50px;visibility:hidden}

4. Kemudian tempelkan kode Javascript berikut antara kode <head> dan </head>.

<script type='text/javascript'>
//<![CDATA[
function TOCopit() {
var TOCopit = i = headlength = gethead = 0;
headlength = document.getElementById("post-toc").querySelectorAll("h3, h4").length;
for (i = 0; i < headlength; i++) {
gethead = document.getElementById("post-toc").querySelectorAll("h3, h4")[i].textContent;
document.getElementById("post-toc").querySelectorAll("h3, h4")[i].setAttribute("id", "point" + i);
TOCopit = "<li><a href='#point" + i + "'>" + gethead + "</a></li>";
document.getElementById("TOCopit").innerHTML += TOCopit;
}
}

function mbtToggle() {
var mbt = document.getElementById('TOCopit');
if (mbt.style.display === 'none') {
mbt.style.display = 'block';
} else {
mbt.style.display = 'none';
}
}
//]]>
</script>

5. Simpan tema.

Cara Membuat dan Memasang Table of Content di Artikel Blog Secara Manual

Setelah kamu menempatkan bebarapa kode script css dan javascript diatas selanjutnya adalah melakukan penerapan table of content nya secara manual pada setiap ingin membuat artikel atau postingan baru.

Dengan cara penerapan table of content secara manual kamu akan bebas menentukan konten artikel mana yang ingin dipasang table of content dan mana yang tidak ingin dipasang.

1. Buka Entri baru blogger, atau buka postingan mana yang ingin diterapkan table of content.

2. Tempelkan kode berikut pada awal postingan, bagian tab HTML.

<div id='post-toc'>
<div class='TOCopit'>
<button onclick='mbtToggle()'>Daftar Isi</button>
<ol id='TOCopit' />
</div>

dan kode ini pada akhir postingan.

<script>
TOCopit();
</script>
</div>

3. Contoh penerapannya adalah seperti gambar dibawah ini.

Cara Membuat dan Memasang Table of content di Artikel Blog Otomatis

Jika sebelumnya kita menerapkan kode manual untuk memunculkan table of content pada artikel, maka cara berikut ini adalah penerapan table of content yang akan muncul otomatis pada setiap artikel yang di publish tanpa harus memasang secara manual.

Namun cara otomatis ini hanya disarankan bagi kamu yang selalu menulis artikel panjang atau memiliki jumlah kata 600 lebih. karena table of content otomatis tidak cocok untuk artikel yang pendek.

1. Buka Tema > Edit HTML.

2. Cari kode <data:post.body/>, kemudian ganti dengan kode dibawah ini.

<div id='post-toc'>
<div class='TOCopit'>
<button onclick='mbtToggle()'>Daftar Isi</button>
<ol id='TOCopit' />
</div>
<data:post.body/>
<script>
TOCopit();
</script>
</div>

3. Simpan tema, dan selesai.

Nah, cukup mudah bukan bagaimana cara membuat table of content secara otomatis maupun secara manual diterapkan pada artikel blog kita. kamu tinggal pilih sendiri cara penerapan mana yang sesuai dengan blogmu dan cocok dengan artikel yang kamu buat. Semoga bermanfaat.

Leave a Reply

Your email address will not be published. Required fields are marked *