Cara Membuat Daftar Isi Artikel Otomatis di Blogspot
2/08/2020
14 Comments
Konten [Tampil]

Cara Membuat Table Of Content (TOC) Otomatis di Blogspot
Langkah 1: Backup Template Blog
Apa tujuan dari membackup template?. dibuat jaga-jaga jika template yang sudah diedit error.Langkah 2: Cari kata </head>
Dan copykan kode ini diatas </head>.
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
.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'>
//<![CDATA[
function bwstoc() {
var bwstoc = i = headinglength = getheading = 0;
headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
if (headinglength > 0) {
// Hanya Tampil Jika Ditemukan Minimal 1 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>
Langkah 3: Cari kode <data:post.body/>
Dan ganti semua kode <data:post.body/> menjadi 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>
Langkah 4: Simpan Template
Setelah selesai mengedit template blog tersebut langkah terakhir adalah klik "simpan".
Mengatasi Daftar Isi tidak Muncul
Seperti pengalaman saya sebelumnya, daftar isi artikel sebelumnya diblog ini tidak muncul. Setelah ditelusuri dan diamati teryata blog ini tidak memakai h1, h2, h3 tetapi memakai Normal, Large, Largest.
Manfaat Memasang TOC diblog

Berikut Tutorial Cara Pemasangan TOC
Jangan lupa like, share, subscribe channel admin ya :)
Jika daftar isi diblog anda tidak muncul pasti dikarenakan masalah tersebut.
Baca Juga: Contoh Web Sekolah Dengan Tampilan Keren dan Menarik
Baca Juga: Contoh Web Sekolah Dengan Tampilan Keren dan Menarik
Penutup
Thanks to Bibit.ws atas scriptnya untuk agan-agan yang malas pasang toc manual 🤣.
Work gan, terimakasih..
ReplyDeleteMau tanya gan, kalo setting biar otomatis TOC terbuka saat kita membuka artikel gmn ya?
Karena dr code yg agan share tersebut, saat kita membuka artikel TOC default nya tertutup
Tksh gan
Work gan, terimakasih..
ReplyDeleteMau tanya gan, kalo setting biar otomatis TOC terbuka saat kita membuka artikel gmn ya?
Karena dr code yg agan share tersebut, saat kita membuka artikel TOC default nya tertutup
Tksh gan
Tidak tau gan,, coba di utak atik scriptnya
Deletegan, kalau toc ini ditaruh di seperempat halaman artikel, gimana ngaturnya?
ReplyDeletekurang tau gan, coba aja diutak atik kodenya
DeleteNice min, work it ^^
ReplyDeleteoke gan, mudah kan pasangnya :D
DeleteOm Ansori, itu cara buat header ansoriweb nya gimana? apa format gambarnya? Saya pasang yang vector, tapi tetep aja burik kalo di zoom in. Kok punya lu nggak Om? ini VioMagz kan Om?
ReplyDeleteIya mas, soalnya resolusi nya HD
DeleteMas buatnya pake apa? Adobe Photoshop (raster) atau Illustrator/Corel (Vector)?
DeleteIllustrator mas
DeleteMas, kalo kita buat table of contents yang bukan otomatis, jadi setiap buat artikel kita buat toc sendiri. itu bisa diindex google ga ya? jadi biar bisa ada tulisan jump to blablabla gitu di google search nanti
ReplyDeletebisa gan, silahkan dicoba
DeleteBerhasil . Terima kasih bosku. Biasanya saya membuat TOC manual. Itu lumayan memakan waktu. Untung lihat artikel ini.
ReplyDelete