Add Automatic Table of Contents in Blogger [ 2 Methods ]

How to add automatic table of contents in Blogger

Want to know How to Add table of contents in Blogger also How to Add automatic table of contents in blogger? So In this article, I will answer your question of How to add automatic table of contents in Google Blogger? in a very simple way. We can easily add Table of Contents (TOC) to the Blogger Website using HTML, CSS, and JS. This article will guide you on the easiest way to Add Automatic Table of Contents to your Blogposts.

How to add automatic table of contents in blogger post
How to add automatic table of contents in blogger post


We all know that it’s very difficult to add a table of contents in Blogger as Blogger does not support plugins like WordPress. Therefore We will provide you with two options like adding it manually or automatically using any of this as per your need.

Before adding a table of contents to your blog you should know some benefits of having a table of content (TOC) in Blogger blog post. So let us first understand its importance as per user and SEO point of view.

Previously we learn very useful way to add FAQ Schema in blogger. So now let's learn something more useful in this article.


What is a TOC in blog posts?

When we write any long blog post with more than a thousand words, and if you don’t have a Table of Contents, then your website visitor will not be going to stay for long. Add automatic Table Of Contents in Blogger blog posts will make posts user-friendly and become easy to read post for the reader.

So basically it has a quick link or a jump link that helps the readers to skip to a specific part or heading with a single click. It highlights the critical section of the article in order to improve the user experience. You can see the below example image for reference.

What is Automatic Table of Contents in blog posts?

It is a table of content but the major difference is that it Automatic Table of Contents allows us to pull together all the different headings and subheadings from your blog posts automatically without manually defining the heading tags and making it into a nice table for your readers to navigate.

Benefits of Using Table of Contents in Blog post

There are many benefits as per user and also SEO point of view. So some of them are listed below.

  • Improve User Experience
  • Increases the Click-Through-Rate or CTR of your website
  • Table of content can help to improve SEO
  • Look Professional blog post
  • No Need To Add Manually Integration Of Code In Post
  • Easy for a reader to understand the content
  • User experience is a very important thing to get a higher ranking in SERP (Search Result Page)
  • Users can directly skip to a particular section of the blog post
  • and many more benefits.

Also, You can see below the google search result image, where displays rich snippets in search results. This is because of the below reasons.

seo benefits of adding table of content in blogger post
seo benefits of adding table of content in blogger post


Table of content links are SEO friendly & can be easily crawled and indexed to search engine pages with the direct jump to the link included, SO TOC will also help you improve your SEO & in addition increase your search engine rankings. Above is an example of how your page looks in search engine results. Note: Links in TOC are Do-follow.

So now finally let's add automatic table of contents in blogger post.

Also, you should check our first time in blogger Keyword Generator PHP Script for free for a lifetime.


Methods to TOC On Blogger

We are sharing both methods so you can use any of them on your website.

  1. Manual Method
  2. Automatic Method

Steps to Add table of contents in Google blogger

First, let us try with manual method. Follow the below steps properly so the final result should not contain any problems.

manually add table of content in blogger post
Example of manually add table of content in blogger post


JavaScript-based automatic table of content that generates a table of content automatically recognizing the heading tag. But, it slows down the loading speed of web pages as it is a JavaScript-based method. It requires multiple resources and increases the webpage size.

So I shared a manual method where we will add a simple table of contents without changing your blogger theme's coding.

  1. Login to Blogger Dashboard and Open Blogger Blog in which you want to add a table of contents in the blog post.
  2. Click on Theme and then click on edit HTML.
  3. Find </head> in the HTML file and paste the below-given Css and JavaScript code just above the </head> tag.
  4. After pasting the below CSS code, now open the blog post to add TOC.
  5. Switch to HTML view and type CTRL+F and search for heading tags like h2, h3, etc.
  6. Add id=“point1”, id=“point2” on the heading tag as shown in the below screenshot.
  7. Switch back to Compose view and copy all heading and paste in plain text as shown below.
  8. Now replace all plain headings with a link like #point1#point2, etc, and save it.
  9. That's it

Manually Add TOC in blogger post CSS & JavaScript Code

Paste the below code in your template and blog post as mentioned in the above steps. Modify it as per your need after preview and save. Check the below images for reference.

manually add table of content in blogger
manually create TOC in blogger


<style>
/* Updated Table of Contents for Blogger CSS Manual Method */

h2[id], h3[id] {
	scroll-margin-top: 40px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion:reduce) {
	html {
		scroll-behaviour: auto;
	}
}

.toc {
	border: 3px solid #A2A9B1;
	border-style: dashed;
	background-color: #F8F9FA;
	display: block;
	line-height: 1.4em;
	width: 70%;
	display: block;
	padding: 20px 30px 10px;
}

.toc ul li {
	list-style-type: none;
}

.toc a {
	text-decoration: none;
}

.toc strong {
	font-size: 20px;
}

.toc a:hover {
	text-decoration: underline;
}
</style>

Now You can manually add a Table of content in a blog post using a blog editor like your right post. The only thing that should be followed is adding an ID to your heading and to TOC, check below image for reference


add table of content in blogger manual method
Create TOC in Blog post manual method


manually add table of content in blogger post
Steps to Create TOC in Blog Post

Else, you can use the below sample Html and change as per your need.


<div class="toc">
<strong>Table of Contents</strong>
	<ul>
		<li> <span>1.</span><a href="#point1">Heading 1</a></li>
		<li> <span>2.</span><a href="#point2">Heading 2</a></li>
		<ul>
		<li><span>2.1.</span><a href="#sub1">first sub heading</a></li>
		<li><span>2.2.</span><a href="#sub2">second sub heading</a></li>
		<li><span>2.3.</span><a href="#sub3">third sub heading</a></li>
		</ul>
		<li><span>3.</span><a href="#point3">Heading 3</a></li>
	</ul>
</div>

We manually created an HTML table of content in the Blogger Blog post. Now customize the table of content heading and you can set the table of content in the Number list or Bulleted list. Like this, you can easily create a table of content on your blogger website for long and detailed articles only.

After publishing the post your “table of content” is ready to use by your user.


Advantages Of Manual Method To Create Table Of Contents in Blogger


  • No need for javascript means you save more than 1.2s to load your page fully.
  • You can use on AMP Template also as per your need.
  • It can include subtopics also on your table of content.

Disadvantage Of Manual Method To Add Table Of Contents in Blogger


  • Lots of time is needed as the process is manual.
  • It needs some HTML skills.
  • Need some extra work to add this.

I recommend the automatic method if you don't have time but if you have then using the manual method will be best. Now, let us know the automatic table of contents in blogger.


Steps to Add Automatic table of contents in blogger

As it is an automatic method, we need to add JavaScript and modify the template file.

Because it is the easiest method to add a stylish TOC but it will slow down your loading speed a little bit. That's why I recommend you to use manual HTML-based Toc.


add automatic table of content in blogger post
Example Add automatic table of content in blogger post


Note: Before proceeding with the steps make sure your theme support jQuery & Font Awesome Icons. Most of the new themes support this. You can check this by searching the word in the HTML section of your theme.

  1. Login to Blogger Dashboard and Open Blogger Blog in which you want to add a table of contents in the blog post.
  2. Click on Theme and then click on edit HTML.
  3. Find </head> in the HTML file and paste the below-given code just above the </head> tag.
  4. Again , Search For  ]]></b:skin> Or ]]></b:template-skin>  And Paste Below Code Before This.
  5. Search For <data:post.body/> And Replace With Below Code. And If Your Theme Has More Than One <data:post.body/>.
  6. Replace All with <div id="post-toc"><data:post.body/> </div> Otherwise Table Of Contents Not Work Properly.
  7. That's it save your template.
Replace Code: 
<div id="post-toc"><data:post.body/> </div>
add table of content to blogger post
Edit Template to add automatic TOC

CSS and JavaScript to Add TOC in Blogger Post

Paste the below code in your blogger template as per mentioned above step or refer to the below image.

<style>
/* Updated Table of Contents for Blogger CSS by Technical Arp*/  
  .arpTOC {
	border: 3px solid #A2A9B1;
	border-style: dashed;
	background-color: #F8F9FA;
	color: #707037;
	line-height: 1.4em;
	margin: 30px auto;
	padding: 20px 10px 20px 10px;
	display: block;
	width: 80%;
}

.arpTOC button {
	background: #ffffe0;
	font-family: oswald,arial;
	font-size: 22px;
	position: relative;
	outline: 0;
	border: 0;
	color: #707037;
	padding: 0 0 0 15px;
}

.arpTOC button a {
	color: #0080ff;
	padding: 0 2px;
	cursor: pointer;
}

.arpTOC button a:hover {
	text-decoration: underline;
}

.arpTOC button span {
	font-size: 15px;
	margin: 0 10px;
}

.arpTOC li {
	margin: 10px 0;
}

.arpTOC li a {
	color: #0080ff;
	text-decoration: none;
	font-size: 18px;
}

.arpTOC li a:hover {
	text-decoration: underline;
}

.arpTOC li li {
	margin: 4px 0;
}

.arpTOC li li a {
	color: #289728;
	font-size: 15px;
}

.arpTOC ol {
	counter-reset: section1;
	list-style: none;
}

.arpTOC ol ol {
	counter-reset: section2;
}

.arpTOC ol ol ol {
	counter-reset: section3;
	margin: 10px 0;
}

.arpTOC ol ol ol ol {
	counter-reset: section4;
}

.arpTOC ol ol ol ol ol {
	counter-reset: section5;
}

.arpTOC li:before {
	content: counter(section1);
	counter-increment: section1;
	position: relative;
	padding: 0 8px 0 0;
	font-size: 18px;
}

.arpTOC li li:before {
	content: counter(section1) "." counter(section2);
	counter-increment: section2;
	font-size: 14px;
}

.arpTOC li li li:before {
	content: counter(section1) "."counter(section2) "." counter(section3);
	counter-increment: section3;
}

.arpTOC li li li li:before {
	content: counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);
	counter-increment: section4;
}

.arpTOC li li li li li:before {
	content: counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);
	counter-increment: section5;
}

h2[id], h3[id] {
	scroll-margin-top: 40px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion:reduce) {
	html {
		scroll-behaviour: auto;
	}
}

</style>

<script type="text/javascript">
	//<![CDATA[
	function arpTOC() {
		var a = 1,
			b = 0,
			c = "";
		document.getElementById("post-toc").innerHTML = document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi, function(d, e, f, g) {
			return e != g ? d : (e > a ? c += new Array(e - a + 1).join("<ol class='point" + a + "'>") : e < a && (c += new Array(a - e + 1).join("</ol></li>")), b += 1, c += '<li><a href="#point' + b + '">' + f + "</a>", a = parseInt(e), "<h" + e + " id='point" + b + "'>" + f + "</h" + g + ">")
		}), a && (c += new Array(a + 1).join("</ol>")), document.getElementById("arpTOC").innerHTML += c
	}

function arpToggle() {
	var a = document.getElementById("arpTOC"),
		b = document.getElementById("Tog");
	"none" === a.style.display ? (a.style.display = "block", b.innerHTML = "hide") : (a.style.display = "none", b.innerHTML = "show")
}
//]]>
</script>

Refer below image for using above code.

add automatic table of contents in google blogger
CSS and JavaScript for TOC in google blogger


Now, Save the Template and follow the below step.

Show TOC in Blogger Post

Final Step: Go to the Post and Switch to HTML Mode and Add the below code at the desired place where you want to display the Table of Contents. I mostly prefer to add a Table of Content after post introduction.


<div class="arpTOC"> <button>Table of Contents <span>[<a id="Tog" onclick="arpToggle()">hide</a>]</span></button> <div id="arpTOC"></div> </div>

<script>arpTOC();</script>

Check the below image for reference.

add table of content in blogger
Show table of content in blogger


table of content in blogger post
Create Automatic TOC in Blogger


Note: Some Themes don’t support the Automatic Table of Contents. Don’t worry, You can Try the below Manual Method which is working on all templates/themes.
 
Update: Instead of adding the above code in blogger post every time we create a blog post we can automate this also in blogger.
 
Go to Settings > Posts, comments & Sharing > Then Paste copied HTML code inside post-template box as it is.> Click on save settings option at top right corner.

add toc in blogger post
Automatically Add Code using post template option

 
Now we can add table of contents in blogger Cool Right!

 
Now, whenever you click on a new post in your blogger blog these TOC codes will automatically get included in the post now put your content in between.

You can choose where you want to show the table of content, before the first heading or after the heading, you have to just paste the script.

More Tutorial: How To Add Responsive Table In Blogger Post

Customize CSS code in Automatic TOC

If you want to change the color of any elements, then you can easily change it in simple steps. Find the default style and color of these all codes and you can change as per your choice. You can Change Font, Font Colour, and Font Style.

  • Change background color #FFFFEO
  • Change border color #f7f0b8
  • Change font color #707037
  • Change Anchor link color #0080FF
  • Change the font size of anchor Links 15px
  • Change the font size of TOC heading text 20px

You make like our: URL Shortener Blogger Template


Frequently Asked Questions related to “How to Table of Contents in Blogger”


Why Table of Content is Important ?

Table of content (TOC) is a great way to show all the Covered topics in the blogpost, which also helps Google to understand your blog and show your content on Google’s Featured Snippets.

Do we need HTML knowledge to add the table of contents ?

No. Even if you don't have HTML Knowledge, you can easily add a table of contents to your posts. But make sure to follow steps properly.

Is it mandatory to add Table of Contents inorder to rank on 1st Page on Google ?

It's not mandatory but Yes, Table of Contents plays a key role in terms of SEO aspects. So, TOC is recommened for the posts which has lengthy content which helps in ranking a post on multiple keywords.

What are the benefits of adding table of content in blog post?

There are many advantages and benefits to add table of content in blogger post and there is no Negative SEO Impact. Instead we Get lot of Positive Benefits. Read mentioned points from article.

What is the use of Adding TOC to a Post ?

Adding a Table of Contents (TOC) will allow your visitors to jump to the important part of a blog post. Which can be a breakthrough for user experience of your site.

Can we manually add Table of Contents to each post ?

Yes, We can also add a table of content manually, but it is a bit time consuming task.

How can I add table of content in blogger post?

You can add TOC in blogger post or any website using two methods by automatically add toc in blog post or by manually adding in blog post. In this article we learned both ways in detail. I hope it was helpful.


In conclusion of Add Automatic Table of Contents in Blogger

So Today you learn how to add Table of contents in blogger post within a few minutes. You should add TOC to your blog post because it will not only make your website look professional but traffic will also increase on your post because of SEO and good user experience.

I hope the above method and all steps helped you with what you were searching for.

We are providing you with many amazing scripts for free, So please follow us on YouTube Channel to get all updates and more useful content.

Thanks for Visiting: Follow by Email and Bookmark Our Technical Arp Website for more such useful scripts.

Read more

    Google Drive direct link Generator script

    YouTube video downloader script free download

    Anti Adblock script for blogger

    Privacy Policy Generator Tool Script

    Previous
    Next Post »

    1 comments:

    Click here for comments
    dawnknight
    admin
    29 November 2021 at 18:35 ×

    Kids love playing games! Before the age of the internet, playing group games inside and out was the norm. Youth group games brought people together and provided children the social skills that they will go on to use as adults. Youth games are vital for schools, the family and places of gathering. Using my 35 years experience working with kids, I have put together my top ten tips to running youth group games for kids. If you are a teacher, Read More youth leader or parent, go ahead Read More and check out my article, then come on a journey to learn more about our epic group games!

    Congrats dawnknight you are first to comment...! hehehehe...
    Reply
    avatar