How to add automatic table of contents in Blogger?In 5 easy Steps.

Benefits of adding Automatic table of contents in blogger?

Adding table of contents in blogger will give you many benefits in terms of SEO, user friendliness using proper navigation etc, Best example of Adding TOC is Wikipedia. They add TOC to help readers to jump from one section to another section. Below is TOC screenshot from my Blogger blog about Adswiki: Ad networks Review. take example below – if in lengthy article if user just want to check CPM rates of Propellerads then he will click on navigation number 10 then he will be navigated to that page directly skipping all other content.

best example of Automatic table of contents in blogger
best example of Automatic table of contents in blogger

SEO Benefits of Table of contents.

Adding Automatic table of contents in blogger will provide summary of your blog posts what its all about, Also TOC links are SEO friendly & can be easily crawled and indexed to search engine pages with direct jump to link included, SO TOC will also help you improve your SEO & in addition increase your search engine rankings. Below is example of how your page look in search engine results. Note: Links in TOC are Do-follow.

EO benefits of automatic table of contents in blogger TOC
SEO benefits of automatic table of contents in blogger TOC

Automatic TOC setup for blogger/blogspot.

Today i will explain easy way on how to add automatic table of contents in blogger? website, There are 3 ways available to add table of contents in blogger blog, The first one is editing your post html & adding anchor tag for jumping to content. But this method is too much time consuming as you have to edit HTML for every post so bloggers don’t afford this way as there are lots of other things to do.

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

The second way is installing widgets from third party websites, but i suggest you not to use this method as sometime the third party websites closes their business and then the widget gets broken and again we need to start from beginning.

The last method & Best method to add automatic TOC in blogger is by adding some CSS and JavaScript codes in theme template of your blogger blog. by implementing this method you need not do too much HTML editing so will save lots of time here, So lets see how we gonna do it step by step.I also made video on Adding Auto TOC in blogspot/blogger Check it below for easy understanding.

How to add automatic table of contents in blogger? Hindi audio with English subtitles.

How to Add automatic table of contents in blogger?

Step 1: Go to blogger>Theme>Edit HTML.

Step 2 : Add below CSS code before ]]></b:skin>

After clicking Edit html > press CTRL+F & find this code ]]></b:skin> & Paste below CSS code just before it as shown in image after this code.

<!-- Table of contents CSS start -->

.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;}
<!-- Table of contents CSS end-->
Adding automatic TOC in blogger
Adding automatic TOC in blogger

Step 3: Add below JavaScript code before closing head tag = </head>

Refer image after this code for better understanding.

<!-- Table of contents Javascript start-->

 <script type='text/javascript'>              
//<![CDATA[           
//*************TOC plugin by MyBloggerTricks.com           
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>
<!-- Table of contents Javascript end -->
How to add automatic table of contents in google blogger?
How to add automatic table of contents in google blogger?

Step 3: Now Find <data:post.body/> Replace this code with below code.

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

You will find this code 2 or 3 times in your blogger html replace each with above code as shown in below image.

Table of contents in blogger blog posts
Table of contents in blogger blog posts

That’s all done with Blogger HTML editor Now next work is with Post html editor you need to add these 2 short codes one at top and another at bottom of post.

How to add TOC in Blogger Post?

Step-4 – Adding 2 short codes in Blogger Post HTML.

Add Below Code at the top of post page before 1st heading.

<div class="mbtTOC">
<button onclick="mbtToggle()">Contents</button>
    <br />
<ol id="mbtTOC"></ol>
</div>
google blogger automatic table of contents widget
google blogger automatic table of contents widget

& Below code at the End of post.

<script>mbtTOC();</script>
Automatic TOC for blogger blogspot.com
Automatic table of contents in blogger blogspot.com

Thats All done > Publish post and you can see Table of contents at top of your page the user will get hide option also for TOC.

Instead of adding short codes every time in Post, i will tell you simple trick. Lets see step by step.

Every time adding these codes in every post is hecticso I will suggest to
add these 2 codes in blog post template so whenever you click on create
a new post it will automatically generate TOC.

If you create blogger Template and save it in settings every time when you create a new posts these two codes automatically get included without manual innervation just create your post without deleting them by mistake.

How to create Pre-formatted Post template for blogger.com?

While previous steps just shown method adding automatic table of contents in blogger , to further simplify adding automatic table of contents in blogger follow below steps.

Post templates pre-format the post editor with text or code that will appear each time you create a new post. It will help you to save your time that you can utilize for some other tasks.

Step 1 – Click on New post in Blogger.com

Create your custom blog post template in blogger.
Create your custom blog post template in blogger.

Step 2 – Types some sample text where you will start your post every time, So that short codes should not get deleted mistakenly.

How to add google jump to in Blogger?
How to add google jump to in Blogger?

Step 3 -Add codes as shown in the previous tutorial, one at top and another at the end of the post, Then copy all content. (by pressing Ctrl+A).

How to create Post template for blogger/blogspot?
How to create Post template for blogger/blogspot?

Step 4 – 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.

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

That’s all done!!! now whenever you click on a new post in your blogger blog these TOC codes will automatically get included in post now put your content in between.

Here we have completed our post How to add automatic table of contents in blogger? If you have any question or help required to complete TOC task then please comment below will revert back ASAP.

You may Also Like – How to claim your website on pinterest?

Credits to all codes required here goes to MyBloggerTricks

ketanblogger

I am mechanical engineer doing blogging as a passion & Also making decent income. I love travelling & inventing. Currently blogging part time and working full time as welding Application engineer at Fronius - Austria based company.

View all posts by ketanblogger →

One thought on “How to add automatic table of contents in Blogger?In 5 easy Steps.

Comments are most welcome and appreciated.

%d bloggers like this: