How to Add Table of Content in Blogger (Blogspot), and Script Code?

 Are you wondering in search of the question: How to add table of content in (blogspot) blogger? or the Script for Table of Content in Blogger. You have come to right spot. Here we have provided with the best of the script codes for bloggers, blogspot guide, templates, wordpress premium themes, wp plugins and mod apps. You can find all of this material totally in free.   

Table of Content In Blogger (Script)

Table of Content in your (Blogspot) blogger help you to stand out from the other competitors. Although, many of the experts don't recommend blogspot blogger for building up the site. But what could be done, when you don't have enough expenditures for a secure and fast loading hosting. Normally you get hosting's in cheap prices, but there could issues in up time, loading time and others. 

In such a case, I recommend you to use blogspot blogger instead of WordPress or other CMS. At least, with blogger, you can find the fastest loading speed and light weight site. 

You are having a question, that there are no enough plugins for SEO in blogger. Don't worry, there are adds on, which could be added as a script to increase your site functionality.

The site you are visiting is an example to you. Although, we have used a lot of personal adds on script, premium theme and much more on this site. But we have tried to provide you guys, who are beginner in blogging with these script and codes. We have also provided with the premium blogger templates which are free to download from our site.

Now get back to topic and seek, 

What is Table of Content?

Table of content is a quick access to the topic headings and main points, by adding anchor points, leads to jump to the required heading or paragraph. In, simple it is the jumping anchor for fast access across the content. 

Hopefully, you get the definition. But still confused, let's have a look at the picture given below;

Blogger Example

It is the example from an article on FilmoraGo Pro, representing the main headings of the topic. When you click on each of the topic, you will jump to that topic.

How Table of Content Help in SEO?

The basic purpose for adding the TOC in your post or article is SEO (Search Engine Optimization). It help's to stand out from the other competitors and websites. Moreover, it help in providing with the best UI practice. The chances to rank in featured snippet also increase with it.

But the question is, that how it help in SEO? The answer is too simple and easy.

You have come to the principle that helper get the help. If you help the search engines with the best content, and help him to recognize the content. The search engine will also help you in ranking. 

When you have provided a map of your headings, the search engines finds the content friendly and useful. Moreover, the crawlers or spiders can easily reach out to the content with fast speed. And that's all, the spiders take the content and put it to the first page.

How to Add Table of Content in Blogger?

To add the table of content in blogspot is a bit technical but not the difficult. Instead of plugin, just like in the WordPress, here you do manually by adding codes or script. Follow the steps one after one for best results.

There are the following steps to add TOC in (Blogspot) blogger; 

Step One 1, Opening the Blogger Dashboard and Theme Edit:

The first step while going to add the table of the content is to open your blogger dashboard and going to the theme options.

Click on the theme edit option, and you will see the whole code of your site theme.

If confused, follow the picture;

1st Step, Opening the Edit HTML option

 Now move to the next step, that is 

Step 2, Addition of functional Html code:

In this step, press control+F and find the tag </head>. Now paste the code given below just above the </head> tag, 

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><script type='text/javascript'>
//<![CDATA[
//*************Plugin by TechyNoobs.com
function avsTOC() {var avsTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);avsTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("avsTOC").innerHTML += avsTOC;}}function avsToggle() {var avs = document.getElementById('avsTOC');if (avs .style.display === 'none') {avs .style.display = 'block';} else {avs .style.display = 'none';}}
//]]>
</script>

Step 3, Add styling by adding CSS code:

The next step is the addition of the style for best show up. The styling with simple color's is give, you can use any live code editor and change the color's according to your color scheme.

Now search for the code ]]<></b:skin>, and code the given below code just after the code ]]<></b:skin>. 

.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;}

Step 4, assign the post body with the the script id:

In this step, you assign the script Id to your post body of your template. 

Just find the the code, <data:post.body/> and replace with the code given below;

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

Note: If your site template contain more than one <data:post.body/>, replace the last one with the tag

Step 5:

The no 5 step is to save the template and you are all done with adding the script in your blogspot blogger template. 

Now, the next step involves to show that script in your post. In simple, in this step, you take the action to for showing up the TOC.

Showing up the Table of Content in a Blogspot Post:

In this step, you have to put some of the code in a sober way to show the TOC headings for a specific post or page. In simple, you have to turn on the script, added in your template.

Open up the Html Editor of your blog post, and 

Copy the given below code and add it just above the first heading of your post. 

<div class="avsTOC"> <button onclick="avsToggle()">Contents</button> <ol id="avsTOC"></ol> </div>

and 

add the given below code in the end of your post html.

<script>avsTOC();</script></div>

and you will see the TOC in your post, just like seeing in this post.

Video on How to add table of content in Blogger?

Here is the video in Hindi Language by Techno Vedant Youtube Channel, explaining to add the script in the template.

What are featured snippets?

Featured snippets are the snippets, or rich results of the web pages that are shown on the top of search engines for a specific keyword. They help to attract and drive more traffic from search to your site. When you have enough SEO settings for your website pages and posts, you rank first on the Google page, and your results are shown as featured snippets.

Still confuse, don't worry here is the picture for featured snippets.

Here is the picture for the featured snippet of a random website on internet. It increases the trust rate, and thus the click bate. 

Problem in showing headings in blogger TOC:

You can face many of the minor problems, while showing up the jumping headings. 

Here is the list for the most common issues, you could face while showing up the table of content.

• Script is not added in a correct way in your template.
• Styling is not so beautiful, as you make some mistake in adding the CSS.
• Script is not working, as you have not triggered it by putting in the post html

Conclusion:

We are now moving toward the conclusion of the article by saying, that we have tried our best, to provide with the best of knowledge regarding, how to add table of content in blogger? However, if you are confused about any of the term used in the article, just say it in the comment box. 

We often keep on providing with the best of content regarding to blogging, blogger, wordpress, themes, templates and plugins. So keep visiting us. 

In the end, if you find this article helpful in any way, share it with your friends and other bloggers.