Cara Menciptakan Table Of Contents (Toc) Di Postingan Blogger
Table of Contents (TOC) atau Bisa disebut juga Jump Link atau Daftar Isi di dalam postingan Blogger ialah daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat pada sebuah artikel di blog.
Table of Contents sanggup kita gunakan sebagai rincian dari isi artikel yang berupa link sehingga akan memudahkan pembaca untuk menentukan gosip pecahan pokok bahasan apa yang akan dibacanya.
Kali ini saya akan menyebarkan cara menciptakan Table of Contents (TOC) dengan desain yang hampir menyerupai mirip Wikipedia, sehingga akan lebih menarik perhatian pembaca blog sobat.
Di sini kita tidak memakai instruksi script untuk mendeteksi header teks atau heading tag yang disimpan pada edit HTML postingan blog, sebab kita asumsikan penggunaan Table of Contents (TOC) ini tidak dipakai untuk semua halaman.
Oleh sebab itu penggunaan Table of Contents (TOC) ini harus dilakukan secara manual pada postingan yang ingin memakai Table of Contents (TOC) ini.
Table of Contents (TOC) di blogger ini hanya memakai instruksi script HTML, di tambah dengan CSS untuk mengatur letak dan desain tampilannya, dan instruksi JavaScript untuk toggle list Table of Contents (TOC) untuk jump link ke Table of Contents (TOC).
Untuk cara menciptakan dan memasang atau menggunakanya silakan teman ikuti langkah-langkah berikut ini.
Cara Membuat Table of Contents di Postingan Blogger
Buka Blogger > Buka Menu Tema > Edit HTML > Kemudian cari instruksi </head> atau </head><!--<head/>--> kemudian letakkan instruksi 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 instruksi </body> atau <!--</body>--></body> Kemudian tambahkan instruksi 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 pecahan postingan, buat postingan di editor post blogger. Tambahkan instruksi 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="Cara Membuat Table of Contents (TOC) di Postingan Blogger">Heading Bagian 1</a></li> <li><a href="#toc_2" title="Cara Membuat Table of Contents (TOC) di Postingan Blogger">Heading Bagian 2</a></li> <li><a href="#toc_3" title="Cara Membuat Table of Contents (TOC) di Postingan Blogger">Heading Bagian 3</a></li> <li><a href="#toc_4" title="Cara Membuat Table of Contents (TOC) di Postingan Blogger">Heading Bagian 4</a></li> <li><a href="#toc_5" title="Cara Membuat Table of Contents (TOC) di Postingan Blogger">Heading Bagian 5</a></li> </ol> </div> </div>Edit goresan pena yang ditandai dengan goresan pena sendiri. Kemudian tambahkan id="toc_1" di setiap heading sesuai dengan ID pada instruksi di atas. Misalnya menyerupai 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 menyerupai 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 instruksi yang ditandai, untuk heading selanjutnya sesuaikan dengan urutan ID pada Table of Contents yang teman 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 instruksi ini di setiap selesai paragraf tiap bagian
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0"> Back to Content</div>Contoh penggunaanya menyerupai 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 akibatnya di blog sobat.
Demikian tutorial Cara Membuat Table of Contents di Postingan Blogger, biar bermanfaat dan biar sukses. Terimakasih. Sumber https://www.denylistianto.com/