Table of content atau yang sering disebut daftar isi adalah poin-poin pembahasan yang terdapat pada sebuah artikel. Table of content biasanya dipasang pada sebuah artikel yang panjang.Table of content bisa kamu temui pada situs Wikipedia, JalanTikus, dan pada situs-situs lainnya. Tujuan memasang table of content di blogger adalah untuk mempermudah pembaca artikel mengerti artikel yang sedang dibahas dan tentunya berpengaruh pada SEO.
Jadi, langsung saja kamu memasang table of content pada artikel blog kamu.
Cara Memasang Table of Content di Blogger
1. Buka dashboard Blogger kamu.2. Pilih menu Tema > Edit HTML.
3. Letakkan kode CSS berikut tepat di atas kode ]]></b:skin> atau diantara <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. Setelah itu, Letakkan kode JavaScript berikut diantara 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 Table of Content Otomatis
Jika kamu suka membuat artikel yang panjang, misalnya sekitar 600 kata lebih, sangat saya sarankan untuk memasang table of content yang otomatis ini.Karena kamu tidak perlu ribet-ribet memasang table of content seperti biasanya. Namun, kekurangan table of content ini ialah tidak cocok jika diterapkan pada artikel yang pendek.
1. Buka kembali halaman Tema > Edit HTML.
2. Cari kode <data:post.body/>, kemudian ganti dengan kode berikut:
<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 lihat hasilnya.
Cara Membuat Table of Content Semi-otomatis
Berbeda dari table of content otomatis, table of content semi-otomatis ini tidak memiliki kekurangan, karena kamu bisa mengatur muncul atau tidaknya table of content pada artikel kamu.Jadi, jika ada beberapa artikel kamu yang pendek, lebih baik kamu memilih table of content yang satu ini.
1. Buka halaman Posting, kemudian pilih artikel yang ingin dipasangkan table of content.
2. Letakkan kode berikut di awal postingan (jika bingung, silakan melihat gambar di bawah).
<div id='post-toc'>
<div class='TOCopit'>
<button onclick='mbtToggle()'>Daftar Isi</button>
<ol id='TOCopit' />
</div>|
|
| Jangan lupa ubah mode Compose ke HTML. |
3. Kemudian, Letakkan kode berikut di akhir postingan (jika bingung, silakan melihat gambar di atas).
<script>
TOCopit();
</script>
</div>4. Setelah selesai mengedit postingan, klik Publikasikan dan lihat hasilnya.
