How To Add Automatic Table of Contents in Blogger Post - TOC Plugin For Blogger

Table of content plugin is a special SEO optimization tool for bloggers and site owners, which will help the visitors to give a quick look at your post or article and it also helps you with a high ranking in Google Search engine for your post or article as Table of Contents highlight your whole post.
As a demo, you can look at the Table of Contents shown in this post.

If your blog post is too long, it is necessary to add a Table of Contents in it. If you don't add a table of Content, then visitors who newly Visit your blog impressed by the title of your post shown in the search Engine result will skip your post instead of going through lengthy post. And will search for a related post on the Internet. Therefore, to increase SEO performance, it is necessary to add a table of content to your blogger blog.

What is the Table of Contents?

The Table of Contents is the list of Headers used in a post or article that is automatically generated by a script. It gives readers an overview of a post or article that about what your article or post is. Table of content also helps readers to jump to the particular point of a post or article by clicking on the highlighted text in the table of contents.

How TOC Plugin Works?

TOC automatically generates a unique identity for every heading used under a post or article and gathers them to a paragraph in the form of a Table. When a reader reads your post or article he / she can easily go through with all the headings or subheadings under your long post or article and will easily move towards headings he or she wants to read instead of the full Article.

Table of Contents helps to improve SEO of your blog

At very long posts TOC just does not help only the users or readers of your blog, but it also helps in increasing the ranking and improves CTR (Click-Through Rates) and by this, you will get dramatic improvements in SEO of your blog.

Where should Table of Contents appear in the blog post?

You should place the Table of Contents after the first paragraph of your post or after the introduction your post which helps the readers to navigate easily to the particular point of your post.

Process to Install TOC Plugin and Activate it in Blogger Post

This automatic TOC plugin has two processes to add an automatic Table of Contents in your blogger post. The first process is to install TOC plugin into your blogger them html and in the second process you will learn how to activate this plugin on your blogger desired post where you want to show Table of Content in the post.

How to Install TOC Plugin In Blogger Theme

Step1: Edit Blogger Theme HTML

Login to your blogger and go to the Dash-board of your blogger and then click on the Themes. It will open a new page. At the right corner of this page, you will see three dots, click on these dots and then Edit HTML.

Step2: Paste TOC Plugin Code Above </head> Tag

Now in theme HTML press Ctrl + F button of your keyboard and type </head> in the search box to find closing head tag </head> and copy and paste the code given below above the closing head tag </head>. Same as the screenshot given below:

<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[           
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>

Note:

Above code will work for h2 headings, if your post contains h3 headings then replace h2 with h3 where h2 is highlighted in above code.

In blogger h2 stands for headings and h3 stands for subheadings.

Step3: Paste TOC CSS Code Above ]]></b:skin> Tag

Now again type ]]></b:skin> in the search box and copy the code give below and paste it above ]]></b:skin> to add TOC CSS in Blogger theme and click save.

.mbtTOC{border:5px solid #f7f0b8;   
 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%;}    
 .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{background:#FFFFE0;    
 font-family:oswald, arial; font-size:20px;   
 position:relative;    
 outline:none;cursor:pointer; border:none;    
 color:#707037;padding:0 0 0 15px;}      
 .mbtTOC button:after{content: "\f0dc";    
 font-family:FontAwesome; position:relative;    
 left:10px; font-size:20px;}

how to install toc plugin in blogger theme

Step4: Replace <data:post.body/> tag

Now again press CTRL+F button and find <data:post.body/> tag and replace with the given code below. If you find <data:post.body/> code more then 1 time then replace all with the give code below:

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

After adding these codes, save your theme. If theme saving show update fail then reload page and do all steps carefully and save after every step.

How To Add Table of Contents in a Particular Post

Now go to the post in which you want to add Table of Contents. Edit your post as HTML and Copy the code given below and paste it in the post after first paragraph or where you want to show Table of Contents.

Code:

<div class="mbtTOC">
    <button onclick="mbtToggle()">Table of Contents</button>
    <ol id="mbtTOC"></ol>
    </div>

If your headings has already numbered then replace 'ol' with 'ul' in the above script. You can also change the word 'Table of Contents' with any word you like.

Activate TOC Plugin

It is final step. In this step we are going to activate TOC plugin in our post. To activate TOC plugin copy the give code below and paste it at end of your post HTML. Now hit enter button and check out, How your Table of Contents Look.

<script>mbtTOC();</script>

Look at the screenshot.

How To customize Your TOC Plugin

You can customize TOC Plugin according to your wish with the help of CCS code (Step3 of this post). To customize TOC Plugin Look the steps given below.

To change the background color of the TOC edit #ffffe0 at line no. 3.
To change the boarder color of the TOC box edit #f7f0b8 at line no. 1.
To change the border thickness of TOC box edit 5px at line no. 1.
To change the font color of the TOC headline text edit #707037 at line no. 20.
To change the anchor link color edit #0080ff at line no. 14
To change the font size of anchor link edit 15 px at line no. 20.
To change the font size of the TOC headline text edit 20 px at line no. 23.
To change the size of the TOC box change width edit 70% inline 9.

Features of TOC Plugin

There are many features of TOC plugin Like:

SEO Friendly
Mobile and Desktop Responsive
Do not increase page loading time
Fast Loading
Toggle button
Show in the Location you choose
Add unique id in each heading

And many other feature like this.

I hope you will appreciate this topic and will enjoy benefits of TOC.

If you have any problem or question or suggestion, comment us now. We are always here to help you. Sorry for bad English.

Your Feedback's are important for us. Thanks

1 comment

Unknown September 20, 2021 at 12:08 PM

Our site giving you information about health and fitness and gives you better reading material for competing for the advancement of society. Please visit our site nawazpanda.com. This site also gives information about crypto crypto currency.

To insert a code use <i rel="pre">code_here</i>
To insert a quote use <b rel="quote">your_qoute</b>
No Negative Comments.