How to add Automatic Table of Contents in Blogger post

table of contents

Hello! friends, welcome to EducationGalaxies.com. Today in this article, I am going to show you how to add Automatic Table Of Contents plugin in your blogger post.


Also Read: 

Best Blogger Templates | Premium Download for Free


What is the automatic table of contents?

Friends, many of you may have a question that what is automatic table of contents? So the simple answer is automatic table of contents is an advanced tool which helps your blog to showcase all the contents of your blog to your blog visitors in a short, simple and user friendly summary. You can say that it is just like the table of contents of a book but believe me, it is more advanced than that. You must be thinking that in the table of contents of a book, there are headings of the related topics along with their page numbers and you need to turn out the page number of the book to read about a particular topic. So how is the automatic table of contents different from that? In automatic table of contents, we don't need to turn out the page number to read about the particular topic. Infact, we can directly read the particular topic by clicking on the particular heading of the table of contents. So let's checkout some examples of table of contents. You can see the automatic table of contents given below. You need to click once on it to see the contents of the automatic table of contents.


Also Read:

How to create a free virtual credit card


{tocify} $title={Table of Contents}


How does the automatic table of contents work?

From the table of contents example given above, you must have understood that to make the automatic table of contents functional, you need to add headings, sub-headings and minor headings in your blogger post. Because the automatic table of contents summarizes headings, sub-headings and minor headings to give a sweet and simple table of contents design. To see the contents of the automatic table of contents, you simply need to click once on it. And to read about the particular topic, you simply need to click once on the given headings, sub-headings or minor headings.


Also Read: 

How to add Math Equations in Blogger post





What is the advantage of using automatic table of contents?

Friends, the automatic table of contents not only summarizes all the contents of your blog but it also helps your blog to do search engine optimization (SEO). It helps your blog visitors to save their time and effort to search about a particular topic in your blogger post which will give a user friendly experience to your blog visitors. It will helps your blog to get appeared in the Search Engine Result Page (SERP). That will ultimately helps your blog to rank faster in the search engines like Google, Yahoo, Bing, Yandex, etc. As a result, your blog will definitely get a large volume of traffics.


Also Read: 

How does SEO work on Google


How to add automatic table of contents in blogger post?

Friends, now let's talk about how to add automatic table of contents plugin in blogger post. Consider that I am talking about plugin. You must be thinking that it's impossible because plugins are only available in WordPress not in Blogger. Yes, I accept your statement. But I am calling it automatic table of contents plugin because I am going to show you to add automatic table of contents in your blogger post just like the automatic table of contents plugin in WordPress. Friends, just like installing plugin, you need to follow some steps to add automatic table of contents but believe me you only need to do it once. After that you can use that feature for lifetime without doing any type of coding while writing any type of blogger post. Believe me, you will be able to add automatic table of contents in all of your blogger post within a few seconds.


Also Read:

How to create HTML sitemap page in blogger





Steps to install automatic table of contents plugin in blogger theme

1. Go to Blogger Dashboard

2. Click on 'Theme' section.

3. Click of 'Edit Theme' option.

4. In the 'Edit Theme' section, press Ctrl+F from your computer keyboard to get a search box.


Note: 

If you are using mobile, you can use NextApp Technical Keyboard to get computer keyboard feature.{alertInfo}


{getButton} $text={Download NextApp Keyboard} $icon={download} $color={#2980b9}


5. In search box, search <head> or &lt;head&gt; and copy the first code and paste it after <head> or &lt;head&gt;


{getButton} $text={Download All Codes} $icon={download} $color={#2980b9}


table of contents


6. Again search post-body post-content

or

post-body entry-content

or

<data:post.body/>

or

<div class='post-body post-content'> 

or 

<div class='post-body entry-content>

to find <div class='post-body post-content'> 

or

<div class='post-body entry-content>

and replace all

<div class='post-body post-content'>

with the second code.

table of contents

table of contents


or replace all

<div class='post-body entry-content>

or

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>

or

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

with the third code.

table of contents



table of contents


7. Search ]]></b:skin> and copy the fourth code and paste it before ]]></b:skin>


{getButton} $text={Download All Codes} $icon={download} $color={#2980b9}


table of contents


Note 1:

You can replace the following color code in the fourth code to edit the design of the table of contents according to your desire.


Background color of Table of Contents:

#F4F4F4

Color of Table of Contents:

#2F353B

Border Color of Table of Contents:

#B1B1B1

Title and Icon color of Table of Contents:

#23282C

Border color of Table of Contents when expanded:

#ADADAD

Heading, Sub-Heading, Minor Heading color of Table of Contents:

#1087FF

Heading, Sub-Heading, Minor Heading hover color of Table of Contents:

#2292FF{alertInfo}


Note 2: 

You can get html code of 250+ different types of colours by using our HTML color code tool.{alertInfo}


Note 3:

To change Width of Table of Contents, 

replace 350px in @media (max-width:350px) with your desired size in the fourth code.{alertInfo}


8. Again search </body> or &lt;/body&gt; and copy the fifth code and paste it before </body> or &lt;/body&gt;


{getButton} $text={Download All Codes} $icon={download} $color={#2980b9}


table of contents


9. After that, click on 'Save Theme' button.


Note:

After installing table of contents plugin, if any function of your theme is not working properly, then delete the fifth code in the theme. After that search main theme script which must be situated before </body> between <body> and </body> and paste the fifth code before main theme script and save theme.{alertInfo}


table of contents


Also Read:

How to add swipe up link on facebook story





Steps to add automatic table of contents in blogger post

1. Copy the following code

{tocify} $title={Table of Contents}{codeBox}

2. Paste the code in the desired section of your blogger post in the compose mode.

3. Select the code and make it bold.

table of contents

4. Click on 'Update' or 'Publish' post button.


Watch Video Tutorial to learn visually


Download All Codes (YouTube Video)


Conclusion

Friends, I hope you have understood how to add automatic table of contents in your blogger post. If you want to give us any kind of feedback, please don't forget to leave a comment. And if this article was helpful for you, don't forget to share with others. Okay! then we will meet again in the next article. 


Also Read:

How to start a blog and earn money

Best Web Hosting and Domain Registrar

Search Engine Optimization (SEO)

How to get large volume of visitors

How to create a payoneer account

Affiliate Marketing

Email Marketing

*

Post a Comment (0)
Previous Post Next Post