How to add a stylish table of content on blogger

Techno Mania - How to add a stylish table of content on blogger. In this post, I going to show you how to add a stylish table of content on blogger. So let's talk about some benefits of the table of content.

Table Of Contents

1. SEO Benefits of Table of content
2. Improved User Experience
3. Add a Table of Content in Blogger with HTML and CSS

SEO Benefits of the table of content

There is so much SEO advantage of the table of content. If you use a table of content on your post then you get a jump link from google.

Improved User Experience

After adding the table of content on the post then when any user reads your post he can able to directly jump any section which section he wants to read. Imagine you're a visitor of my post now if you see on the top you will see a table of content on you can jump any section by click on the table of content.

Add a Table of Content in Blogger with HTML and CSS

Fast go to your blogger dashboard then theme section and go to edit HTML mode. Now search for ]]></b:skin> tag

. Add the below css code after ]]></b:skin> tag.

/* CSS Table of Contents */
#light-toc{background:#F7F7F9;border:1px solid #ddd;border-radius:3px;padding:.8em 1em;margin:0.5em 0;}
#toc_list{font-weight:500;cursor:pointer;margin:0;padding:0;font-size:14px;text-align:left;}
#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:#f24a4a;font-size:85%;}
#toc li a:hover{text-decoration:underline;}
#toc{display:grid}

Now save the theme. Now if you want to add the table of content on your post then follow all the below steps. After writing your post simply goto HTML mode and paste the below code on edit with your content.

<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">
Daftar Isi <svg height="18" viewbox="0 0 24 24" width="18"><path 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" fill="#000000"></path></svg></div>
<div id="toc">
<ol>
<li><a href="#Pengertian_Jump_link" title="Pengertian Jump link">Pengertian Jump link</a></li>
<li><a href="#Manfaat_Jump_link" title="Manfaat Jumplink">Manfaat Jumplink</a></li>
<li><a href="#Membuat_Jump_link_di_Postingan_Blog" title="Membuat Jumplink di PostinganBlog">Membuat Jumplink di Postingan Blog</a></li>
</ol>
</div>
</div>
<br /></div>

Now see on code you see here href="#engertian_Jump_link" it's called id now where you get the id. It's easy to make id just on your heading text you will see <h2>Hi i am sayem miaji</h2> like this on adding your own id with a name like this <h2 id="My_Name">Hi i am sayem miaji</h2> now reply the old id with this id and change the title with you heading title and done.
Now 1 more tip when you add the main table of content code on HTML tab don't click on Compose tab just publish it and see the result.

Thanks for reading how to add a stylish table of content on the blogger. I hope it's helpful.