How to add a Automatic New Table of Content (TOC) in Blogger Post

If you are a blogger, then you must have heard about the Table of Contents. The table of content is also beneficial for SEO.

By using the Table of Content (TOC) in blogger post, there are also chances of our post getting into the Featured Snippets. If our content is good and informal.

So stay with us in this article. In which you will know what is TOC. Why should it be used and what are its benefits?

And how you can use a table of content in your blogger post. So let's start.

 

(TOC) What is Table of Contents?

The table of contents is a summarized overview of any post. In which there is an overview of those important topics. Which we have written in our blog post as a heading.

Understand TOC in easy language. So it writes the headings and sub-headings of your blog post on the list. Which links to our headings.

And whenever the visitor clicks on these headings. So he goes directly to the heading, about which he has to get information.

With this, the visitor of your blog post already gets to know. What kind of information is there in your blog post.

TOC serves as the visitor's navigation, which navigates our posts.

Advantages of Table of Contents (TOC)?

Tables of content are also used by very famous bloggers in their blog posts. That is why you should also use TOC in your blog posts.

You can find out by reading the following benefits. How beneficial it will be for you.

1. Visitors coming to your post can navigate your post better.
2. This is also good in the SEO of your blog.
3. The visitor gets to know the starring of the post itself. What information is there in your content
4. The reader gets a good experience.
5. This links to the heading of your post. From which the reader can click and go directly to the paragraph of that heading.
6. You can agree to has TOC smart navigation.

How to Add a table of content in blogger post

#Step1: First of all, log in to your Blogger account.

(Then Blogger Dashboard will open in front of you)

#Step2: After that, you click on the Theme

#Step3: After clicking on the theme, you click on the Drop-Down menu.

#Step4: Then the menu show in front of you. Click on Edit Html in them.

#Step5: After this, the  Html code editor will open in front of you. Click inside this editor.

#Step6: Now press CTRL + F from your keyboard.

#Step7: The search box will open in front of you. In which you search ]]> </ b: skin>

#Step8: And paste the code below ]]> </b: skin>

.mbtTOC {

   border: 5px solid #eaeaea;

    box-shadow: 1px 1px 0 # c5c3c3;

    background-color: #ffffff;

    color: # 000000;

    line-height: 1.4em;

    margin: 30px auto;

    padding: 20px 30px 20px 10px;

    font-family: oswald, arial;

    display: block;

    width: 100%;

}

.mbtTOC ol, .mbtTOC ul {

        margin: 0;

        padding: 0;

}

.mbtTOC ul {

        list-style: none;

}

.mbtTOC ol li, .mbtTOC ul li {

padding: 15px 0 0;

margin: 0 0 0 30px;

font-size: 15px;

}

.mbtTOC a {

color: # 0080ff;

text-decoration: none;

}

.mbtTOC a: hover {

text-decoration: underline;

}

.mbtTOC button {

font-family: oswald, arial;

font-size: 20px; position: relative;

outline: none;

cursor: pointer;

border: none;

color: black;

padding: 0 0 0 15px;

}

.mbtTOC button: after {

content: "\ f0dc";

font-family: FontAwesome;

position: relative;

left: 10px;

font-size: 20px;

}

#Step9: Now press CTRL + F from your keyboard.  And search </head>

#Step10: Then you paste the below-given code over </head>.

 

<link href = 'http: //fonts.googleapis.com/css? family = Oswald' rel = 'stylesheet' type = 'text / css' />

<script type = 'text / javascript'>

// <! [CDATA [

function mbtTOC () {var mbtTOC = i = headlength = gethead = 0;

headlength = document.getElementById ("post-toc"). getElementsByTagName ("h2"). length; for (i = 0; i <headlength; i ++)

{gethead = document.getElementById ("post-toc"). getElementsByTagName ("h2") [i] .textContent; document.getElementById ("post-toc"). getElementsByTagName ("h2") [i] .setAttribute (" id "," point "+ i); mbtTOC =" <li> <a href='#point"+i+"'> "+ gethead +" </a> </li> "; document.getElementById (" mbtTOC " ) .innerHTML + = mbtTOC;}} function mbtToggle () {var mbt = document.getElementById ('mbtTOC'); if (mbt .style.display === 'none') {mbt .style.display = 'block' ;} else {mbt .style.display = 'none';}}

//]]>

</script>

#Step11: Now press CTRL + F from your keyboard and find <data: post.body />.

#Step12: Wherever <data: post.body /> is written. Replace it with the code given below.

<div id = "post-toc"> <data: post.body /> </div>

 

#Step13: Now click save.

The backend code of your TOC is installed. You have to do this process only once.

Add TOC in the Blog Post Article

Whenever you want to use a table of content in your post.

#Step1: Now open your blog post.

#Step2: Go to the Html view of your blog post.

#Step3: And wherever you have to show your table of content paste the code below.

 

<div class = "mbtTOC">

    <button onclick = "mbtToggle ()"> Contents </button>

    <ol id = "mbtTOC"> </ol>

</div>

#Step4: And paste the given code below the Html code of your post.

 

<script> mbtTOC (); </script>

 

Now your table of content is ready for your blogger post. You can check your table of content by preview the page.

At what time should the table of content not be used?

We have learned how useful TOC is for our blogger posts. And this gives a good impression of our post. But TOC is not used all the time.

So know at what time you should not use TOC (Table of Content).

• When your blog post is short.
• If there is no heading used in your post.
• When you feel that the reader needs navigation in the post.

Where should you put the table of content in your blog?

It becomes necessary to put TOC. When your post length is above 2000. Because the reader takes a lot of time to read them.

So you want the reader to read your entire article, then you should put your table of contents below the starting 1-2 paragraphs of your blog post.

Or you can place it on the first heading of the post.

If you have used thumbnail in your post, then you should not put TOC on it. 

Recommend: How to Add Stylish Download Button in Blogger Post Easily

Recommend: How to Add Responsive & Stylish Table in Blogger Post