Cara Membuat Table Of Content – Postingan ini menjelaskan cara membuat Table Of Content blogspot (TOC) pada Artikel Blogger. Merekam konten di web menggunakan WordPress sangat mudah dengan plugin boost yang dapat menghasilkan TOC secara otomatis.

Saya juga sering menggunakan cara ini di beberapa website saya, tetapi setelah menggunakan template LinkMagz, saya tidak lagi menggunakannya karena template saat ini memiliki fitur Table Of Content otomatis.

Pengertian Table Of Content (TOC) Pada Blogger

Table Of Content adalah bentuk pencatatan konten poin dari konten posting yang dibuat di Blogger atau web, dan Kamu biasanya melihat tag judul yang Kamu buat di posting Laman Kamu.

Mengklik salah satu catatan akan membawa Kamu langsung ke bagian deskripsi yang ingin Kamu baca. Jadi jika posting Kamu sangat panjang, ucapkan 5000 kata dan Kamu tidak memiliki TOC, Kamu tidak perlu membaca posting dari awal sampai akhir. Ini akan membuat wisatawan bosan dan memungkinkan mereka untuk menavigasi ke situs web lain. Memudahkan wisatawan.

Apa Pengaruh TOC Untuk SEO?

TOC yang diterapkan pada blogger tidak secara langsung mempengaruhi SEO atau peringkat web, tetapi TOC memiliki dampak yang lebih besar pada pengalaman pengguna situs web.

Dan pengalaman pengguna saat ini adalah salah satu aspek peringkat Google untuk menentukan peringkat web.

Baca juga cara membuat sitemap di blogspot dan wordpress

Cara Menggunakan Table Of Content Blogspot?

Tidak semua Postingan artikel yang kami dibuat membutuhkan Table Of Content atau Table Of Content ini. Ketika saya menulis postingan berupa review singkat dengan 300-500 kata, saya merasa tidak membutuhkan Table Of Content.

Namun, jika Kamu membuat konten dengan ulasan yang cukup panjang, misalnya lebih dari 1000 kata, masuk akal untuk menyediakan Table Of Content di postingan artikel. Karena tidak semua pengunjung yang dapat ke blog kami suka membaca posting yang cukup panjang. Mereka umumnya suka membaca apa yang penting dan apa yang mereka cari.

Tanpa catatan konten ini, pengguna akan kesulitan menggulir untuk membaca posting yang tidak diinginkan atau membaca secara total, sehingga mereka akan segera meninggalkan situs web. Ini meningkatkan rasio pentalan di web dan mengurangi pengalaman pengguna di mata Google.

Cara Membuat Table Of Content Otomatis (TOC) Blogspot

Langsung ke pembahasan pada inti dan biarkan Blogger secara otomatis membuat Table Of Content

Pertama masuk ke akun Blogger, lalu pilih menu Tema > Setelah itu klik Edit HTML

Copy semua kode table of content blogspot di bawah ini, dan letakkan di Atas </head> atau bisa juga dibawah <body>, pilih salah satu saja
<b:if cond=’data:blog.pageType == “item” or data:blog.pageType == “static_page”‘>
<style media=’all’ type=’text/css’>
/*
* Blogspot TOC
* https://influenzive.com
*/
.bmstoc {
margin: 10px 0;
background: #F0F0F0;
border: 1px solid #ddd;
}
.bmstoc ol, .bmstoc ul {
margin: 0 0 15px 20px;
padding: 0;
}
.bmstoc ul {
list-style: disc;
}
.bmstoc ol li, .bmstoc ul li {
font-size: 95%;
padding: 5px 10px 0 0;
margin: 0 0 0 30px;
}
.bmstoc a {
text-decoration: none;
}
.bmstoc a:hover {
text-decoration: underline;
}
.bmstoc .bmstocHeader {
font-weight: bold;
font-size: 100%;
position: relative;
outline: none;
border: none;
padding: 5px 15px 5px 5px;
margin: 5px 10px;
}
.bmstoc .bmstocHeader a {
text-decoration: none;
cursor: pointer;
}
.bmstoc .bmstocHeader a:hover {
text-decoration: underline;
}
</style>
<!– Blogger TOC –>
<script type=’text/javascript’>
/*

* SEO Friendly Blogspot Table Of Contents

* https://influenzive.com
*/
//<![CDATA[
function bmstoc() {
var bmstoc = 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 bms_1 = getheading.replace(/[^a-z0-9]/gi,” “);
var bms_2 = bms_1.trim();
var getHeadUri = bms_2.replace(/\s/g, “_”);
document.getElementById(“post-toc”).querySelectorAll(“h2, h3, h4”)[i].setAttribute(“id”, getHeadUri);
bmstoc = “<li><a href=’#” + getHeadUri + “‘>” + getheading + “</a></li>”;
document.getElementById(“bmstoc”).innerHTML += bmstoc;
}
} else { document.write(“<style>.bmstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>”); }
}
function bmstocShow() {
var bmstocBtn = document.getElementById(‘bmstoc’);
var bmstocWrapID = document.getElementById(‘bmstocwrap’);
var bmstocLink = document.getElementById(‘bmstocLink’);
if (bmstocBtn.style.display === ‘none’) {
bmstocBtn.style.display = ‘block’;
bmstocWrapID.style.display = ‘block’;
bmstocLink.innerHTML = ‘Tutup’;

} else {
bmstocBtn.style.display = ‘none’;
bmstocWrapID.style.display = ‘inline-block’;
bmstocLink.innerHTML = ‘Tampil’;
}
}
//]]>
</script>
<noscript><style media=’all’ type=’text/css’>#bmstocwrap,.bmstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>

Kemudian tambahkan kode berikut agar Kamu tidak perlu menambahkan kode panggilan table of content blogspot pada artikel di blogger Kamu. Ini menghilangkan kebutuhan untuk mengedit posting yang diposting.

baca juga cara submit sitemap blogger ke google webmaster tools

Ada dua cara untuk menampilkan TOC. Salah satunya adalah TOC tertutup, Kamu perlu mengklik Open untuk melihat TOC. Cara kedua adalah sebaliknya, membuka website dari awal. Silahkan pilih sesuai selera anda

1. TOC Tampilan Tertutup

Cari kode <data:post.body/> kemudian ganti dengan kode di bawah ini :
<div id=’post-toc’>
<div id=’bmstocwrap’ class=’bmstoc’ style=’display:inline-block;’><div class=’bmstocHeader’>Konten [<a id=’bmstocLink’ onclick=’bmstocShow()’>Tampil</a>]</div><ul id=’bmstoc’ style=’display:none’/></div>
<data:post.body/>
<script>bmstoc();</script>
</div><!– end TOC –>
Terdapat beberapa (2 atau 3) kode <data:post.body/> di dalam HTML Tema Blogspot, jadi silahkan ganti semua.
Biasanya yang saya gunakan hanya di salah satunya sudah bisa bekerja, jika tidak muncul di <data:post.body/> yang pertama maka ganti di kode yang kedua atau ketiga. Silakan dicoba-coba 😉
2. TOC Tampilan Terbuka
Caranya sama dengan tampilan pertama yaitu Cari kode <data:post.body/> kemudian ganti dengan kode di bawah ini :
<div id=’post-toc’>
<div id=’bmstocwrap’ class=’bmstoc’ style=’display:inline-block;’><div class=’bmstocHeader’>Konten [<a id=’bmstocLink’ onclick=’bmstocShow()’>Tutup</a>]</div><ul id=’bmstoc’ style=’display:block’/></div>
<data:post.body/>
<script>bmstoc();</script>
</div><!– end TOC –>

Penutup

Berikut cara membuat Table of content blogspot (TOC) di artikel Blogger Kamu. Ini tidak hanya memudahkan pengguna untuk menemukan konten yang mereka butuhkan, tetapi juga menambahkan permalink URL ke situs web Anda untuk menambah nilai. Ini juga lebih SEO friendly.

Table of content blogspot yang kami buat juga lebih ringan karena tidak memerlukan jQuery, tidak memiliki Google Font, dan tidak memiliki font yang keren, sehingga tidak memperlambat loading. Jangan lupa untuk submit dan share postingan ini agar bisa membantu banyak orang. Terima kasih banyak.

Share:

Leave a Reply

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