Cara Membuat Daftar Isi Artikel Otomatis di Blogspot
26 April 2022
26 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.
ReplyDeleteterima kasih turotialnya sangat bermanfaat.
ReplyDeleteAlhamdulillah, semoga bermanfaat 😁
Deletesudah bisa mas, kendalanya daftar isi konten masih tertutup
ReplyDeleteoke gan sip :D
Deletesudah berhasil tampil default daftar isi kontennya gan, bisa dilihat disini https://www.sapujagad.org/2021/03/rencana-keselamatan-konstruksi-rkk-2020.html#top
Deletemantab gan :D
DeleteAssalamu`alaikum, kak.
ReplyDeleteMohon maaf. Saya ingin bertanya, "Saya sudah nyoba beberapa kali tapi TOCnya kok belum muncul di halaman postingan ya kak? Kira2 permasalahnnya apa? Terima kasih.
Alhamdulillah Berhasill Terimakasih kak jadi bagus tampailannya. otomatis gak ribet tanpa edit tiap postingan. makasih banget, kunjungi blog saya di tipsbaru.com ya kak
ReplyDeletemantab
DeleteSukses dipasang. Terimakasih ilmunya
ReplyDeletesiap gan
DeleteKonten yang sangat bermanfaat. Izin memakai kodenya bang. Btw salam kenal ya jangan lupa mampir blogku juga. Hehe
ReplyDelete