Cara membuat TOC ( Table Of Content ), Daftar Isi di artikel Blog

https://bocahkomputer.com - Sebelum kita membahas tentang TOC atau Table Of Content atau yang kita kenal dengan daftar isi, jangan lupa sahabat terus kunjungin blog penulis ini dan berlangganan untuk selalu mendapatkan artikel terbaru dari penulis di sini. dan pada kesempatan kali ini saya akan berbagi script yang sudah sedikit di modif dan penulis share di sini. Oke Langsung saja...

Pengertian TOC ( Table Of Content ).

Table Of Content adalah pembuatan sebuah daftar isi secara otomatis dan dinamis. pada halaman sebuah blog atau website tertentu penggunaan daftar isi sudah di buat secara otomatis artinya apabila kita menggunakan heading pada artikel kita maka secara otomatis heading tersebut akan menjadi judul dari daftar isi konten yang kita buat.

Pasang TOC / Daftar Isi di Blogger.

pasti kita akan bertanya dan mencari tau bisa tidak kita buat daftar isi di blogger kita?? nah karena di sini saya sudah menerapkannya dan sudah melewati fase tanda tanya tersebut maka di sini penulis jawab bisa... hanya saja penerapan TOC pada blogger tidak lah semudah jika kita menggunakan wordpress. karena di blogger kita harus memasukkan script secara manual. setelah saya mencari dan bertanya di mbah google, ternyata penerapan TOC di blogger ada 2 cara yaitu secara manual dan otomatis perbedaannya jika kita menggunakan manual maka kita harus menandai heading yang akan kita jadikan sebegai judul dari daftar isi tersebut, beda halnya kalau kita menggunakan yang otomatis,. karena di sini penulis tidak mau yang repot dan harus nandai di beberapa heading maka saya memutuskan untuk menggunakan  yang otomatis saja....

untuk hasinya bisa sahabat cek paling atas pada posting ini atau juga bisa di gambar berikut.

Script TOC / Daftar Isi Untuk Blogger.

sebelum sahabat bocah komputer terapkan script ini jangan lupa untuk membackup tema sahabat terlebih dahulu untuk menghindari terjadinya hal-hal yang tidak di inginkan. tapi jangan kawatir jika sahabat bocah komputer mengikuti step by step  yang penulis ulas di sini pasti akan berhasil.

yuk langsung saja berikut script nya. dan caranyanya...

Langkah awal yang perlu Sahabat Bocah Komputer Lakukan yaitu masuk ke akun blogger sahabat. pilih menu Tema. dan klik tombol Edit HTML.

Copy semua Script di bawah ini dan pastekan tepat di atas kode </head>. ( untuk mempercepat silahkan gunakan pencarian dengan cara tekan CTRL + F di keyboard sobat dan ketik </head> di pencarian tersebut ).

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>

.bktoc {
 margin: 10px 0;
 background: #F0F0F0;
 border: 1px solid #ddd;
}
.bktoc ol, .bktoc ul {
 margin: 0 0 15px 20px;
 padding: 0;
}
.bktoc ul {
 list-style: disc;
}
.bktoc ol li, .bktoc ul li {
 font-size: 95%;
 padding: 5px 10px 0 0;
 margin: 0 0 0 30px;
}
.bktoc a {
 text-decoration: none;
}
.bktoc a:hover {
 text-decoration: underline;
}
.bktoc .bktocHeader {
 font-weight: bold;
 font-size: 100%;
 position: relative;
 outline: none;
 border: none;
 padding: 5px 15px 5px 5px;
 margin: 5px 10px;
}
.bktoc .bktocHeader a {
 text-decoration: none;
 cursor: pointer;
}
.bktoc .bktocHeader a:hover {
 text-decoration: underline;
}
</style>
<!-- Blogger TOC -->
<script type='text/javascript'>

//<![CDATA[
function bktoc() {
 var bktoc = 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 bk_1 = getheading.replace(/[^a-z0-9]/gi," ");
 var bk_2 = bk_1.trim();
 var getHeadUri = bk_2.replace(/\s/g, "_");
 document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
 bktoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
 document.getElementById("bktoc").innerHTML += bktoc;
 }
 } else { document.write("<style>.bktoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function bktocShow() {
    var bktocBtn = document.getElementById('bktoc');
 var bktocWrapID = document.getElementById('bktocwrap');
 var bktocLink = document.getElementById('bktocLink');
    if (bktocBtn.style.display === 'none') {
        bktocBtn.style.display = 'block';
 bktocWrapID.style.display = 'block';
 bktocLink.innerHTML = 'Tutup';
 
    } else {
        bktocBtn.style.display = 'none';
 bktocWrapID.style.display = 'inline-block';
 bktocLink.innerHTML = 'Tampil';
    }
}
//]]>
</script>
<noscript><style media='all' type='text/css'>#bktocwrap,.bktoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>

jika sudah maka langkah selanjutnya agar sahabat tidak perlu lagi memberi tanda atau memanggil di postingan sahabat maka tambah kan script berikut.

masih tetap di halaman tema blogger sahabat. kemudian cari kode <data:post.body/> dengan cara sama seperti sebelumnya, jika sudah ketemu silahkan ganti script tersebut dengan script di bawah ini.

<div id='post-toc'>
<div id='bktocwrap' class='bktoc'><div class='bktocHeader'>Konten [<a id='bktocLink' onclick='bktocShow()'>Tutup</a>]</div><ul id='bktoc' style='display:block'/></div>
<data:post.body/>
<script>bktoc();</script>
</div><!-- end TOC -->

kode <data:post.body/> ini bisa 2-3 kode di tema sahabat, silahkan ganti semuanya. jika sudah bisa sahabat cek hasilnya di postingan sahabat yang sudah menggunakan heading maka akan otomatis terdapat daftar isi. jika di postingan sahabat tidak menggunakan heading maka TOC ini tidak akan berfungsi.....

Demikian artikel yang dapat penulis bagi, semoga bermanfaat dan jangan lupa terus dukung Penulis untuk selalu update artikel di blog ini dengan cara sering mengunjungi blog Dunia IT Indonesia ini...