How to Add Table Of Content In Blogger

Hey Guys

In this article I am gonna tell you that how can you add Table Of Content in your Blog Post. In WordPress there are many plugins avaliable and using that you can easily add Table Of Content but , in Blogger you don’t get any plugins and you have to do it manually. But you don’t need to worry . Just follow some really easy and simple steps and you can easily add Table of Content in your Blogger posts..First we will know what Table Of Content is.

What is Table of Content ?

Table of Content is a list of topic and subtopics you cover in your post. Usually its found in starting of a post. If you will click any topic there , it will take you to that specific topic or sub-topic.

Why Table Of Content is important ?

Table of Content is important because it usually covers the topics used in your Article. If you will use Table of Content , your post can also rank on Google Featured Snippets.

How to add Table of Content ?

1. Go to Blogger Dashboard > Theme > Edit HTML.

2. Press CTRL+F and search for </Head>

3. Then copy the code given below and paste above the </Head> Tag.

4. Press CTRL+F and search for
]]></b:skin> and above this copy the css code given below and paste there.

.avsTOC{border:5px solid #EE5535; box-shadow:1px 1px 0 #EDE396; background-color:#FFFFE0; color:#707037; line-height:1.4em; margin:30px auto; padding:20px 30px 20px 10px; font-family:oswald, arial;display: block; width: 70%;} .avsTOC ol,.avsTOC ul {margin:0;padding:0;} .avsTOC ul {list-style:none;} .avsTOC ol li,.avsTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;} .avsTOC a{color:#EE5535;text-decoration:none;} .avsTOC a:hover{text-decoration:underline; } .avsTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px; position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;} .avsTOC button:after{content: “f0dc”; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

5. Now search for data:post.body and replace with this code given below. Just copy it.

</p> <div><data:post.body/></div> <p>

6. Click on Save Theme.

How to show In a Blog Post ?

Everytime you need to add 2 codes in your each Blog post in which you want to show Table Of Content

Just follow the steps below :-

1. Choose the location where you want to add Table Of Content

Best place for adding TOC is before the first H2 Tag . However yiu can adjust it according where you want.

Just switch from Compose To HTML . Now copy the code from below and add it according to you..

</p> <div> <button >Contents</button> </p> <ol></ol> </p></div> <p>

2. Now last step is to add the below code at the end of your Blog Post HTML.

</div> <p>

Now you are done with adding the Table Of Content in your Blog Post. Just see the magic!!!

Post Views: 20