Table of Contents yaitu daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat pada sebuah artikel. Table of Contents sanggup kita gunakan sebagai rincian dari isi artikel yang berupa link sehingga akan memudahkan pembaca untuk menentukan info bab pokok bahasan apa yang akan dibacanya. Table of Contents ini sering kita temui pada situs Wikipedia, Ensiklopedia, dan juga file PDF dari E-Book yang biasanya diletakkan sehabis goresan pena kata pengantar atau inspirasi pokok dari sebuah artikel.
Baiklah, di sini akan menawarkan tips perihal bagaimana Cara Membuat Table of Contents di Postingan Blogger dengan mudah.
Cara Membuat Table of Contents di Postingan Blogger
Untuk membuatnya silakan sahabat ikuti langkah-langkah berikut ini.
Bagi sahabat yang ingin mempunyai Kode Promo Hosting Terbaru, silakan kunjungi Promo Hosting
Buka Blogger > Klik sajian Tema > Klik tombol Edit HTML > Kemudian tambahkan instruksi CSS ini sebelum </head> atau </head><!--<head/>-->
<style type='text/css'> /* CSS Table of Contents */ #light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px} #toc_list{font-weight:700;cursor:pointer;margin: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 1em} #toc ol li:before{left:-2em} #toc li a{color:#222} #toc li a:hover{color:#1e90ff} #toc{display:grid} .back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 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, tambahkan instruksi di bawah ini sebelum </body> atau <!--</body>--></body>
<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>Klik tombol Simpan tema.
Selanjutnya ke bab 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 di Postingan Blogger">Bagian Subheading 1</a></li> <li><a href="#toc_2" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 2</a></li> <li><a href="#toc_3" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 3</a></li> <li><a href="#toc_4" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 4</a></li> <li><a href="#toc_5" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 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 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 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 sahabat 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>Maka akibatnya menjadi menyerupai 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>Setelah selesai, silakan klik tombol Publikasikan post dan lihat akibatnya di blog sobat.
Dan ini rujukan Table of Contents yang sudah aku tambahkan pada template blog
Demikian tips Cara Membuat Table of Contents di Postingan Blogger, agar bermanfaat dan wassalam.