masbejo.com – Cara Membuat Daftar Isi Dalam Artikel Blog ( Table Of Content – TOC ) pada blogger Yang Sederhana, Responsif dan Keren dan paling mudah . Sudah lama masbejo mau nulis tentang membuat daftar isi dalam blog atau bahasa kerenya ” Table Of Content ” – TOC. TOC ini sangat khas di gunakan oleh website besar seperti wikipedia. Tujuanya apa, supaya pembaca lebih mudah dalam menjelajahi isi konten, dan kadang tidak dipungkiri pembaca itu langsung mencari ke intinya pembahasan didalam konten…jadi dengan TOC atau daftar isi dalam konten tersebut mereka akan cepat dalam mencarinya..
 |
| Cara Membuat Daftar Isi Dalam Artikel Blog |
A. Tutorial Cara Membuat Daftar Isi di Postingan Blog
Sebelumnya masbejo jelaskan proses pembuatan Table Of Conten itu, dilakukan setelah postingan sobat selesai dibuat, jadi dibuat paling akhir..
Begini langkah – langkah membuat tabel of content sederhana yang bisa diterapkan di blogger :
ilmu dan scrip ini masbejo dapatkan dari mas bibit di blognya..
Langkah – Langkah Pembuatan Toc
# Buka akun blogger sobat –>>Buka Tema — >> Edit HTML
# Selanjutnya untuk mempercepat pencarian lakukan ” Ctrl + F ” dan cari <body> atau </head>
# Nanti sobat copy kode dibawah ini dan pastekan ke :
( pilih salah satu aja )
Diatas </head> atau
Dibawah <body>
<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>
# Setelah kode tersebut sobat pastekan di bawah <body> atau di atas </head> langkah selanjutnya yaitu
ketik ” ctrl+f” cari kode ini –>> <data:post.body/>
Ganti Kode Tersebut dengan kode dibawah ini
<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 -->
Setiap template blogger kadang ada 2 -3 kode <data:post.body/> jangan lupa sobat ganti semua…
#Terahir ” Save Tema ”
# Lihat Hasilnya –>> Disini
Oya sob catatan : Untuk Template Viomagz bebarpa kasus masih terjadi eror, dan tidak bekerja scripnya…
dah itu saja sob, cara mudah membuat Tab
