Cara Membuat Table Of Content di Blogger Keren Work 100%

Cara Membuat Table Of Content di Blogger Keren Work 100% - Hari ini saya akan membahas seputar desain  blogger, lebih tepatnya adalah Table of Content. Table of Content atau Daftar isi, berfungsi untuk mempermudah pembaca agar bisa langsung menemukan bagian artikel yang ingin dibaca. Jadi pembaca tidak perlu capek menggulir (Scroll) halaman artikel kebawah. Apalagi, jika artikel yang kita buat sangatlah panjang. Akan memakan waktu lama bukan?

Cara Membuat Table Of Content di Blogger Keren Work 100%

Cara ini saya dapat dari blog sebelah. Dengan beberapa sedikit modifikasi, Table of Content yang saya buat menjadi terlihat lebih menarik.

Masuk ke Dashboard Blogger > Tema > Edit HTML. Cari tag </head> lalu letakkan kode berikut ini tepat 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:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
/* Responsive */
@media screen and (min-width:500px){
  #light-toc{width:50%}}
</style>

Cari tag </body> lalu letakkan tepat diatasnya.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<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 kode 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="Subheading 1">Judul 1</a></li> 
<li><a href="#toc_2" title="Subheading 2">Judul 2</a></li> 
<li><a href="#toc_3" title="Subheading 3">Judul 3</a></li> 
<li><a href="#toc_4" title="Subheading 4">judul 4</a></li> 
<li><a href="#toc_5" title="Subheading 5">judull 5</a></li> 
</ol>
</div></div>

Lalu tambahkan Id  pada Subheading (Judul) yang kamu gunakan. Contohnya :

<h2 id="toc_1">Cara Membuat Table of Contents di Postingan Blogger</h2>