How to Add Table of Contents in Blogger Post 2020

Hello Friends, My Name is "Sajjad Shaikh" and Welcome to my Website "Bloginger". Here I provide Blogging, Tutorial, Template, SEO and Make Money Article/Blog to our readers. Here you can learn more and more....

How to Add Table of Contents in Blogger Post 2020

Lets, get Started....

Here I will provide A Tutorial on How to Add Table of Contents in Blogger/Blogspot Blog Post 2020, or commonly called a List of Content or Table of Content.

The purpose of making this Table of Contents Blogger is so that blog visitors can read articles at dead-end points, the concept is the same as a Table of Contents in a book, the difference is that in a book you have to look for a page first, so that you can read a certain chapter, while the Table of Contents is in the book. This website, all you have to do is click on the title/section of the article you want to read. Now that's more or less the purpose of this Table of Contents Blog Post.

 #  How to Add Table of Contents in Blogger Blog Post 2020

 #  How to Add Table of Contents in Blogger/Blogspot 2020

Instead of further add, just go to the Blogger.

 STEP:1  Login to your Blogger Blog.

Select Template > Edit HTML

and add the CSS below in the CSS Section.

/* CSS Table of Contents */

#myar-dftrisi{background:#FFFFE0;border:5px solid #f7f0b8;padding:10px 20px}

#myar-dftr{font-weight:700;cursor:pointer;margin:10px 0}

#myar-dftr:focus,#myardftr li:focus,.kembalikedaftar:focus{outline:none}

#myardftr li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}

#myardftr ol li:before{left:-2em}

#myardftr li a{color:#222}

#myardftr li a:hover{color:#1e90ff}

#myardftr{display:grid}

.kembalikedaftar{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;font-size:11px;padding:2px 12px;transition:all .3s}

.kembalikedaftar:hover{text-decoration: underline;}

:target::before{content:'';display:block;height:40px;margin-top:-40px;visibility:hidden}{codeBox}

Save Template.

 STEP:2  Now, Please Create A New Post and Go to the HTML Tab

then use the HTML Tag below to use it.

<div id="myar-dftrisi">

<div id="myar-dftr" onclick="if (document.getElementById('myardftr').style.display === 'none') { document.getElementById('myardftr').style.display = 'block'; } else { document.getElementById('myardftr').style.display = 'none'; }" role="button" tabindex="0">CONTENTS :</div>

<div id="myardftr">

<ol>

<li><a href="#myardftr_1" title="Part 1">Part 1</a></li>

<li><a href="#myardftr_2" title="Part 2">Part 2</a></li>

<li><a href="#myardftr_3" title="Part 3">Part 3</a></li>

<li><a href="#myardftr_4" title="Part 4">Part 4</a></li>

<li><a href="#myardftr_5" title="Part 5">Part 5</a></li>

</ol>

</div>

</div>

<h2 id="myardftr_1">Part 1</h2>

---- CONTENTS OF THE ARTICLE ----

<h2 id="myardftr_2">Part 2</h2>

---- CONTENTS OF THE ARTICLE ----

<h2 id="myardftr_3">Part 3</h2>

---- CONTENTS OF THE ARTICLE ----

<h2 id="myardftr_4">Part 4</h2>

---- CONTENTS OF THE ARTICLE ----

<h2 id="myardftr_5">Part 5</h2>

---- CONTENTS OF THE ARTICLE ----{codeBox}

 Conclusion: 

That's How to Create A Table of Contents in Blogger/Blogspot 2020 to the Blog Post, copy the script and paste.

So many articles this time, if there are still questions, please stay in the comments below.

Thank You & Happy Learning!

 Tags:  table of contents blogger

table of contents blog post

table of contents blog

table of contents blogspot

table of contents widget for blogger

table of content in blogger

table of content in wordpress

table of content in kaise banaye

table of content in hindi

blogger table of contents

table of contents in blog post