Membuat Table Of Content Otomatis

LastYoungBoy - Table Of Content atau Daftar Isi pada artikel yang dibuat secara otomatis ini memang memiliki fungsi sama halnya seperti kalian memlihat daftar isi buku yang kalian miliki, namun Table Of Content atau Daftar isi ini tampil pada setiap artikel postingan pada blog atau situs web yang kalian lihat.

Daftar Isi atau Table Of Conten ini bertujuan untuk mempermudah pembaca untuk melompat ke bagian artikel yang ingin dibawa, ketika pembaca menggunakan TOC ini maka akan langsung mengarah pada bagian yang di klik oleh pembaca.

Karena menurut saya seorang pembaca kebanyak tidak ingin berlama-lama dalam mencari suatu artikel yang terbilang isi artikel itu terlalu panjang walawpun memang sebaiknya membaca harus membaca artikel selengkap-lengkapnya untuk mendapatkan informasi yang lebih jelas.

Cara Memasang TOC Otomatis Pada Setiap Artikel

- Sebelumnya kalian masuk atau login ke akun Blogger kalian.

- Pilih Menu Tema Kemudian Klik Edit HTML.

- Kemudian Copy Kode CSS Dan Javascript berikut ini dan letakan sebelum Kode </head> atau </body>

<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 > 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 itu, agar kalian tidak perlu lagi menambah kode panggil TOC nya, pada postingan secara manual maka kalian perlu mengedit artiekl lawas kalian, maka cari Kode <data:post.body/>,  Jika kode <data:post.body/> sudah ditemukan, biasanya ada lebih dari 2, maka kalian pilih kode tersebut di bagian kedua saja, dan ganti 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>

Setelah semua sudah di masukan kode diatas, kemudian kalian bisa Save setingannya, dan coba lihat setiap artikel yang sudah di posting, maka akan muncul TOS yang tadi kita buat.

Penutup

Table Of Content otomatis ini juga memiliki nilai lebih untuk menjadi blog yang berisi konten yang baik, karena blog yang baik tentu saja memiliki navigasi yang dapat memudahkan pembaca dengan baik dan terlihat profesional, terimakasih atas kunjungannya jangan lupa nantikan artikel-artikel menarik lainnya.