.comment-form #url{ display:none; }

Add fancy automated Table of Content (TOC) in Blog post

Add table of content in Blogger

Dear  Learnmore trick viewers today I am going to teach you how to add a fancy automated table of content (TOC ) in a blog post in an easy manner. You can add your table of contents on your each post for this you should code on your blogger template. Table of contents is important for those who are writing their articles professionally with headings and subheadings. Today I am going to teach you how to add a table of contents for Headings, and Sub headings titles.


What is table of Content (TOC) ?

Table of contents (TOC) is a list of the titles of your articles which gives an idea about which topics are introduced by the author in an article. The table of content carries breif descriptions of titles/chapters which means when viewers want read specific content from your article/post at that time it will be very effective because it jumps on that topic with out scrolling your page.  It is generally put on the top of the articles but there is no restriction, You can use where ever you want.

Why we  need table of Content  ?

  • High chance of Rank your Post: Table of contents is that plugins that are very helpful for bloggers and will get a higher rank in the Google search engine for your entire post. 
  •  Quick Look: It is also helpful for your Blog readers to find out specific topics quickly that they want to read with out scrolling the entire post.
  • Highligh Spectific topic: Table of content Highligh the entire post in listed form.
  • Gives attractive looks for your article.

For which titles we can make table of content ?

There are diffrent types of table of content exist for blogger and website . Like for Headings, Sub headings, and minor headings. In the case of Blogspot blog we can find <h1>,<h2>,<h3>,<h4> tags for post titles, Headings, Sub heading, Minor headings.
Now today I am going to teach you to create a table of content for Headings and Sub headings titles only.

Note:If you coding your  templates for TOC which use Headings only under  TOC then you must make your post titles under headings .Where as if you use sub heading TOC then make sure your titles are under sub headings .

Method-1: Automated table of content using Java Script

  • Edit HTML: Coding under Blogger template Theme

If you want to add a table of contents on your blog, Then you must follow these steps:

Step 1: Go to your Blogger Dash board and choose your Blog
Step 2: Then go to Theme 
Step 3: Then click  on the template HTML

Step 4: Find </head> tag and paste codes
  1. Press CTRL+F for search box,then search for </head> tag
  2.  Paste below any one code  just above </head >


Codes for TOC that show headings

href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'
type='text/css'/> <script type='text/javascript'>             
 //<![CDATA[           //*************TOC plugin by
learnmoretrick.com           function
mbtTOC() {var mbtTOC=i=headlength=gethead=0;           headlength =
(i = 0; i < headlength; i++)
{gethead = 
"point"+i);mbtTOC = "<li><a
+= mbtTOC;}}function mbtToggle() {var mbt =
document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt
.style.display = 'block';} else {mbt .style.display = 'none';}}           //]]>              </script>


(Note: Ifyour Post title is under h3 tag then change h2 to h3    )

Codes for TOC that shows Sub headings

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


//*************Table of Content (TOC) plugin by learnmoretrick.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’;}}




Step 5: Find ]]></b:skin> tag and paste codes
  1.  Press CTRL+F for search box,then search for]]> </b:skin> tag
  2.  Paste  any one code below codes  just above ]]> </b:skin>

Codes for TOC that show Headings 

/*####Automatic TOC Plugin by MyBloggerTricks####*/          
.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 but ton:after{content: “f0dc”; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

Codes for TOC that show Subheadings

.avsTOC{border:5px solid #EE5535;

box-shadow:1px 1px 0 #EDE396;




margin:30px auto;

padding:20px 30px 20px 10px;

arial;display: block;

width: 70%;}

.avsTOC ol,.avsTOC ul

.avsTOC ul {list-style:none;}

.avsTOC ol li,.avsTOC ul li
{padding:15px 0 0;

margin:0 0 0


a:hover{text-decoration:underline; }


font-family:oswald, arial;



color:#707037;padding:0 0 0

.avsTOC button:after{content:



left:10px; font-size:20px;}  

Step 6:  Search <data:post.body/>  on templates and replace all with below codes

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


Step 7: Now save your templates and go to Blog Post.

  • Coding under each post :

Note: This is the coding that you must done for your all post where you want to display TOC  for this you must make sure where you want to display your table of content on your post .And find it under your HTML editor


Step 8: Go to HTML editor on your post  where you want to add TOC  , then paste below Code in between heading tags like <h3>,<h2> or paste above your title.

(Note: If you already gives nubering on your titles then change ol to ul.)


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



Step 9: At last paste below code at the end of your Post in HTML editor


Step 10: Now go to Compose mode and publish /Upgrade your post to see your Table of Content.


Method-2: Automated table of content using CSS

This is also simple method to add table of content on your Blogger ,which is quick method but might not be work for all templates.

Step 1:Go to Blogger dash board
Step 2: Go to Layout
Step 3: Theme Designer
Step 4: Advance > Add CSS
Step 5:Paste Code under CSS
(Note: You need to paste this HTML code for each post when you want to display TOC on your each Post)
<div id="toc" class="mb-toc">
 <h2>Table Of Contents</h2>
        <li><a href="#headingid1">1. Your heading text </a></li>
        <li><a href="#headingid2">2. Your heading text</a></li>
        <li><a href="#headingid3">3. Your heading text</a></li>
 <li><a href="#headingid4">4. Your heading text</a></li>
        <li><a href="#headingid5">5. Your heading text</a></li>
Step 6:Now add a unique ID to your headings tag on your Post
Step 7: After adding the unique id to your heading tags replace the Id in Html codes and change the Support (anchor) text.



Leave a Comment