Cara Menciptakan Table Of Content Di Blogger Keren Work 100%
Cara Membuat Table Of Content di Blogger Keren Work 100% - Hari ini aku akan membahas seputar desain blogger, lebih tepatnya yaitu Table of Content. Table of Content atau Daftar isi, berfungsi untuk mempermudah pembaca supaya sanggup pribadi menemukan bab artikel yang ingin dibaca. Makara pembaca tidak perlu capek menggulir (Scroll) halaman artikel kebawah. Apalagi, jikalau artikel yang kita buat sangatlah panjang. Akan memakan waktu usang bukan?
Lalu tambahkan Id pada Subheading (Judul) yang kau gunakan. Contohnya :
Cara Membuat Table Of Content di Blogger Keren Work 100%
Cara ini aku sanggup dari blog sebelah. Dengan beberapa sedikit modifikasi, Table of Content yang aku buat menjadi terlihat lebih menarik.
Masuk ke Dashboard Blogger > Tema > Edit HTML. Cari tag </head> kemudian letakkan isyarat berikut ini sempurna diatasnya.
Cari tag </body> kemudian letakkan sempurna diatasnya.
Masuk ke Dashboard Blogger > Tema > Edit HTML. Cari tag </head> kemudian letakkan isyarat berikut ini sempurna diatasnya.
<style type='text/css'> /* CSS Table of Contents */ #light-toc{background:#f9f9f9;border:1px solid #aaa;border-radius:3px;padding:10px 20px} #toc_list{font-weight:700;cursor:pointer;margin:10px auto; width:100px; border-bottom:1px solid #f24a4a} #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; font-weight:600;} #toc li:hover {text-decoration:underline;} #toc ol li:before{left:-2em; color:#3f88c5} #toc li a{color:#3f88c5} #toc li a:hover{color:#1e90ff; text-decoration:underline;} #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} /* Responsive */ @media screen and (min-width:500px){ #light-toc{width:50%}} </style>Cari tag </body> kemudian letakkan sempurna diatasnya.
<b:if cond='data:blog.pageType == "index"'> <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> </b:if>Cara Menggunakan
Cara menambahkan Table of Content atau Daftar isi pada Postingan blog:
- Buat Postingan baru.
- Masuk ke mode HTML dengan cara klik Tab HTML yang ada di pojok kanan atas Editor.
- Paste isyarat berikut ini.
<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 Content di Blogger Keren Work 100%">Judul 1</a></li> <li><a href="#toc_2" title="Cara Membuat Table Of Content di Blogger Keren Work 100%">Judul 2</a></li> <li><a href="#toc_3" title="Cara Membuat Table Of Content di Blogger Keren Work 100%">Judul 3</a></li> <li><a href="#toc_4" title="Cara Membuat Table Of Content di Blogger Keren Work 100%">judul 4</a></li> <li><a href="#toc_5" title="Cara Membuat Table Of Content di Blogger Keren Work 100%">judull 5</a></li> </ol> </div></div>Lalu tambahkan Id pada Subheading (Judul) yang kau gunakan. Contohnya :
<h2 id="toc_1">Cara Membuat Table of Contents di Postingan Blogger</h2>
