Cara membuat Table Of Content blogger otomatis
Table of content (TOC) atau kerap disebut daftar isi merupakan salah satu komponen penting dalam sebuah postingan, khususnya untuk postingan yang isinya cukup panjang. Table of content ini merupakan kumpulan link dari subjudul-subjudul yang ada dalam sebuah postingan. Link dalam TOC inii bisa di klik dan kita akan langsung diarahkan menuju ke lokasi subjudul tersebut berada.
Buat saya pribadi, keberadaan Table of content di dalam sebuah artikel atau postingan sangat membantu kita dalam memahami secara cepat tentang apa saja isi yang dibahas dalam artikel tersebut. Apalagi, jika konten yang disajikan cukup panjang dan lengkap, table of content dapat membantu saya dalam mensortir mana pembahasan yang ingin di tuju lebih dahulu.
Tentu saja, pengalaman serupa juga ingin saya bagikan kepada pembaca blog ini. Saya ingin pembaca blog ini merasakan kemudahan dalam menelusuri konten serta memilih mana konten yang lebih penting bagi mereka. Oleh karenanya, menambahkan fitur table of content didalam postingan blog menjadi salah satu harapan yang kini sudah terwujud.
Yang mana sih table of contents blogger yang ada dalam postingan ?
Coba perhatikan pada bagian yang ada tulisan Daftar Isi dalam postingan di blog ini (letaknya tepat ada diatas subjudul pertama ini). Jika kita klik tulisan "Lihat", maka seluruh subjudul dalam postingan ini akan muncul. Dan ketika diklik, maka kita akan diarahkan menuju subjudul tersebut. Jadi lebih mudah kan saat kita ingin menuju isi konten yang kita butuhkan?
Nah, untuk membuat table of content ini ada banyak caranya. Mulai dari yang dibuat secara manual satu persatu (yang dimasukkan kedalam postingan),ada pula yang cukup melalui edit html template dan table of content sudah jadi secara otomatis, bahkan untuk seluruh postingan.
Nah, dari hasil pencarian saya di internet tentang cara membuat table of content ini, saya menemukan satu blog yang memberikan tutorial pembuatan TOC ini secara mudah dan cepat, yaitu dari blognya Bibit ws (link blog untuk sumber kode ada didalam scriptnya, selain itu saya letakkan juga di akhir artikel sebagai apresiasi saya pada blog tersebut).
Jadi, script atau kode daftar isi yang ada di blog ini, bukanlah buatan saya, melainkan hasil salinan dari blog bibit ws tadi. Poin utama disini adalah kode ini sudah saya coba, saya pasang, dan syukurnya berhasil. Yuk, yang mau coba pasang Table of content blogger otomatis, silahkan di ikuti langkah-langkahnya dibawah ini.
Cara membuat Table Of Content Blogger otomatis di postingan
Ok, kini saatnya kita memasang script TOC di blog, berikut langkah-langkah pemasangannya.
1. Masuk ke akun Blogger anda. Pilih menu Tema. Klik tombol Edit HTML
2. Copy semua kode TOC dibawah ini, lalu paste di atas </head> atau paste di bawah <body>. Pilih salah satu lokasi saja.
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
/*
* Blogspot TOC
* https://bibit.ws/toc-di-blogspot.php
*/
.bwstoc {
margin: 10px 0;
background: #F0F0F0;
border: 1px solid #ddd;
}
.bwstoc ol,
.bwstoc ul {
margin: 0 0 15px 20px;
padding: 0;
}
.bwstoc ul {
list-style: disc;
}
.bwstoc ol li,
.bwstoc ul li {
font-size: 95%;
padding: 5px 10px 0 0;
margin: 0 0 0 30px;
}
.bwstoc a {
text-decoration: none;
}
.bwstoc a:hover {
text-decoration: underline;
}
.bwstoc .bwstocHeader {
font-weight: bold;
font-size: 100%;
position: relative;
outline: none;
border: none;
padding: 5px 15px 5px 5px;
margin: 5px 10px;
}
.bwstoc .bwstocHeader a {
text-decoration: none;
cursor: pointer;
}
.bwstoc .bwstocHeader a:hover {
text-decoration: underline;
}
</style>
<!-- Blogger TOC -->
<script type='text/javascript'>
/*
* SEO Friendly Blogspot Table Of Contents
* https://bibit.ws/toc-di-blogspot.php
*/
//
< ![CDATA[function bwstoc() {
var bwstoc = i = headinglength = getheading = 0;
headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
if (headinglength > 1) {
// Hanya Tampil Jika Ditemukan Minimal 2 Heading
for (i = 0; i < headinglength; i++) {
getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
var bws_1 = getheading.replace(/[^a-z0-9]/gi, " ");
var bws_2 = bws_1.trim();
var getHeadUri = bws_2.replace(/s/g, "_");
document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
document.getElementById("bwstoc").innerHTML += bwstoc;
}
} else {
document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>");
}
}
function bwstocShow() {
var bwstocBtn = document.getElementById('bwstoc');
var bwstocWrapID = document.getElementById('bwstocwrap');
var bwstocLink = document.getElementById('bwstocLink');
if (bwstocBtn.style.display === 'none') {
bwstocBtn.style.display = 'block';
bwstocWrapID.style.display = 'block';
bwstocLink.innerHTML = 'Tutup';
} else {
bwstocBtn.style.display = 'none';
bwstocWrapID.style.display = 'inline-block';
bwstocLink.innerHTML = 'Tampil';
}
}
//]]>
</script>
<noscript>
<style media='all' type='text/css'>
#bwstocwrap,
.bwstoc {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
}
</style>
</noscript>
</b:if>
3. Cari kode <data:post.body/> -gunakan tombol ctrl+F pada keyboard untuk memudahkan pencarian.
4. Ganti kode diatas dengan script dibawah berikut
<div id='post-toc'> <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]</div><ul id='bwstoc' style='display:none'/></div> <data:post.body/> <script>bwstoc();</script> </div><!-- end TOC -->
Catatan:
Kode <data:post.body/> ini biasanya lebih dari satu tergantung template
yang digunakan. Kalau di blog saya, kode yang diganti ini ada di urutan ke-2
saat pencarian . Kalau Anda ragu, silahkan ganti semua kode tadi atau bisa
juga ganti satu persatu sambil dilihat hasilnya.
5. Klik tombol Simpan Tema dan cek kembali hasilnya.
Baca juga:
- Cara membuat halaman statis di blogspot beserta penjelasannya
- Cara mudah membuat menu horizontal responsive sederhana dengan CSS
- Cara pasang sitemap di halaman statis
Kenapa akhirnya memilih untuk memakai script TOC dari blog Bibit ws?
Ada beberapa alasan kenapa saya menggunakan script dari bibit ws ini diantaranya adalah:
- Script TOCnya bisa bekerja di blog saya
- Script TOCnya juga terbilang ringan untuk blog sehingga tidak teralu mempengaruhi kecepatan loading.
- Lebih mudah karena sekali pasang artikel-artikel saya sudah otomatis memiliki TOC.
- Script TOC ini juga cukup SEO friendly (terutama pada tahun 2020-2021) karena sebagian besar postingan saya yang menggunakan subjudul bisa tampil di bagian atas SERP melalui featured snippet).
Oiya, komponen TOC dalam blog ini sudah lama saya pasang (mungkin sudah lebih dari satu atau dua tahun yang lalu), jadi saya sudah pernah melihat dan merasakan hasil dari penggunaan Script TOC blogger otomatis ini yang buat saya sangat memuaskan.
Namun begitu, ada kelebihan pasti ada kekurangan. Begitu pula dengan script TOC dari bibit ws ini. Satu kekurangan adalah script TOCnya tidak menggunakan hirarki heading tag sehingga terasa kurang rapi saja.
Jadi, jika kita pakai heading tag h2, h3, atau h4, maka tampilannya tetap sama dan sejajar. Posisinya tidak berurutan sesuai dengan hirarki heading tag yang seharusnya. Namun, buat saya pribadi, hal tersebut bukanlah masalah penting.
Kesimpulan
Penggunaan table of content blogger otomatis di postingan ini cukup banyak membantu baik dari sisi kemudahan pengguna, SEO friendly, serta kemudahan kita dalam pemasangannya. Selain itu, script Table Of Content yang dibuat dari blog bibit ws ini bisa bekerja dengan baik di template blog saya sehingga kita tidak repot edit-edit postingan hanya untuk menambah table of content blogger.
Demikianlah artikel tentang cara membuat Table Of Content Blogger otomatis yang bisa saya sampaikan. Semoga artikel ini bisa bermanfaat.
Sumber referensi dan kode : https://bibit.ws/toc-di-blogspot.php
Supaya TOC nya berada dibawah gambar gimana ya bang? Soalnya, artikel gw diawali dengan gambar. Nah biar TOC nya berada dibawah gambar tersebut gimana?
BalasHapusMesti cek dulu kode script gambarnya apa, nanti kode TOC nya taruh dibawah kode gambar itu.
Hapus