Table of Contents (TOC) atau Bisa disebut juga Jump Link atau Daftar Isi di dalam postingan Blogger adalah daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat pada sebuah artikel di blog.
Table of Contents bisa kita gunakan sebagai rincian dari isi artikel yang berupa link sehingga akan memudahkan pembaca untuk memilih informasi bagian pokok bahasan apa yang akan dibacanya.
Kali ini saya akan berbagi cara membuat Table of Contents (TOC) dengan desain yang hampir mirip seperti Wikipedia, sehingga akan lebih menarik perhatian pembaca blog sobat.
Di sini kita tidak menggunakan kode script untuk mendeteksi header teks atau heading tag yang disimpan pada edit HTML postingan blog, karena kita asumsikan penggunaan Table of Contents (TOC) ini tidak digunakan untuk semua halaman.
Oleh karena itu penggunaan Table of Contents (TOC) ini harus dilakukan secara manual pada postingan yang ingin menggunakan Table of Contents (TOC) ini.
Table of Contents (TOC) di blogger ini hanya menggunakan kode script HTML, di tambah dengan CSS untuk mengatur letak dan desain tampilannya, dan kode JavaScript untuk toggle list Table of Contents (TOC) untuk jump link ke Table of Contents (TOC).
Untuk cara membuat dan memasang atau menggunakanya silakan sobat ikuti langkah-langkah berikut ini.
Cara Membuat Table of Contents di Postingan Blogger
Buka Blogger > Buka Menu Tema > Edit HTML > Kemudian cari kode </head> atau </head><!--<head/>--> lalu letakkan kode berikut diatasnya.
<style type='text/css'>
/* CSS Table of Contents */
#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}
#toc_list{font-weight:700;font-size:23px;cursor:pointer;margin:5px 0 10px 0}
#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
#toc_list svg{vertical-align:middle}
#toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 2em}
#toc ol li:before{left:-2em}
#toc li a{color:#222;}
#toc li a:hover{color:#f24a4a}
#toc{display:grid}
.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#f24a4a;color:#fff;font-size:11px;padding:4px 12px;border-radius:99em;transition:all .3s}
.back_tocontent:hover{background:#2d3436;color:#fff}
:target::before{content:'';display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>Langkah selanjutnya, cari kode </body> atau <!--</body>--></body> Kemudian tambahkan kode di bawah ini diatasnya.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>
</script>Selanjutnya Simpan tema.
Selanjutnya ke bagian postingan, buat postingan di editor post blogger. Tambahkan kode di bawah ini pada tab HTML (bukan Compose)
<div id="light-toc">
<div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="Subheading 1">Heading Bagian 1</a></li>
<li><a href="#toc_2" title="Subheading 2">Heading Bagian 2</a></li>
<li><a href="#toc_3" title="Subheading 3">Heading Bagian 3</a></li>
<li><a href="#toc_4" title="Subheading 4">Heading Bagian 4</a></li>
<li><a href="#toc_5" title="Subheading 5">Heading Bagian 5</a></li>
</ol>
</div>
</div>Edit tulisan yang ditandai dengan tulisan sendiri. Kemudian tambahkan id="toc_1" di setiap heading sesuai dengan ID pada kode di atas. Misalnya seperti ini
<h4>
Cara Membuat Table of Contents (TOC) di Postingan Blogger</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Tambahkan ID pada heading menjadi seperti ini
<h4 id="toc_1">
Cara Membuat Table of Contents (TOC) di Postingan Blogger</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Perhatikan kode yang ditandai, untuk heading selanjutnya sesuaikan dengan urutan ID pada Table of Contents yang sobat buat. Contohnya
<h4 id="toc_1">
Heading Bagian 1</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h4 id="toc_2">
Heading Bagian 2</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h4 id="toc_3">
Heading Bagian 3</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h4 id="toc_4">
Heading Bagian 4</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h4 id="toc_5">
Heading Bagian 5</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Kemudian tambahkan kode ini di setiap akhir paragraf tiap bagian
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>Contoh penggunaanya seperti dibawah ini.
<h4 id="toc_1">
Heading Bagian 1</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>
<h4 id="toc_2">
Heading Bagian 2</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>
<h4 id="toc_3">
Heading Bagian 3</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>
<h4 id="toc_4">
Heading Bagian 4</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>
<h4 id="toc_5">
Heading Bagian 5</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>Setelah selesai, kemudian Publikasikan artikel atau postingan dan lihat hasilnya di blog sobat.
Demikian tutorial Cara Membuat Table of Contents di Postingan Blogger, semoga bermanfaat dan semoga sukses. Terimakasih.
