Table of content in blogger helps visitors to go to the exact point rather than
reading a whole post which may save your visitors' time as well as your
article looks professional. Then how to make a table of content for
bloggers.
{tocify} $title={Table of Contents}
Google is upgrading and time to upgrade bloggers also As compare to WordPress there are a lot of drawbacks to bloggers. In WordPress, you can use different plugins but not on blogger.
{tocify} $title={Table of Contents}
Google is upgrading and time to upgrade bloggers also As compare to WordPress there are a lot of drawbacks to bloggers. In WordPress, you can use different plugins but not on blogger.
How To Create Table Of Content In Blogger
To make a table of content you need to follow my steps and some lecture about the advantages and disadvantages of the table of content in your article.Importance of table of content on blogger.
- Helpful for your visitors.
- Professional look.
- Google rich content. [ Helps on ranking ]
The disadvantage of the table of content
- The automatic method may decrease your loading time.
- The automatic method will fail on AMP sites.
- The manual method is a little bit time-consuming.
- May loss in visitors' engagement time.
Today I am going to share with you two different methods to make a table of contents in the blogger easily.
Two Methods Of Making Table Of Content On Blogger
1.Automatic Method
2.Manual Method
Automatic Method To Make Table Of Content On Blogger.
As by the name automatic, here you need to choose h2 or h3 or h4 as your
content and by default, it is set at H2. That means whatever you put on H2 the heading is automatically set as a table of content.
By default, the design isn't attractive but I modified by my own choice. You can make yourself as your own.
Advantage of Automatic Method To Make Table Of Content On Blogger
- It is automatic that all H2 Heading goes automatic to Table of content.
- Automatic table of content for blogger saves a lot of time than manual method.
Disadvantages of Automatic Method To Make Table Of Content On Blogger
- Automatic table of content use javascript that will affect your page loading speed.
- Cannot include subtopic like H3.
- It cannot use on the AMP template.
Manual Method To Make Table Of Content On Blogger
On the manual method, you can create a table of content manually means you can include anything in your table of content as well as you can include subtopic also.
Advantages Of Manual Method To Make Table Of Content On Blogger
- No need of javascript means you save more than 1.2s to load your page fully.
- You can use on AMP Template also.
- It can include subtopics also on your table of content.
Disadvantage Of Manual Method To Make Table Of Content On Blogger
- Lots of time needed as the process is manual.
- It needs some HTML skills.
I recommend the automatic method if you don't have time but if you have then using the manual method will be best.
Let's start with Automatic Method To Make Table Of Content On Blogger
Video Tutorial of Automatic table of contents in blogger
Step-Wise Process of How To add Automatic Table Of Contents In Google Blogger
Follow each and every step.
Note: I am using the old Blogger Dashboard.
Step1: Go to your blogger dashboard then point your mouse towards the theme option.
Step1: Go to your blogger dashboard then point your mouse towards the theme option.
<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>{codeBox}
Step4: Then return back to your blogger and press "CTRL + F" and find " <head> then place that code and press Enter.
![]() |
Step 1 |
![]() |
Step 2 |
Step 5: Now, on the HTML section of the blogger again search on the theme using "CTRL+F" for " ]]></b:skin> " and again copy the code below and paste code above " ]]></b:skin> ".
Code:
/*####Automatic TOC Plugin by MyBloggerTricks designed by Saroj-Tech####*/ .mbtTOC { border: 3px solid #A2A9B1; box-shadow: 1px 1px 0 #EDE396; background-color: #F8F9FA; color: #830000; line-height: 1.4em; margin: 30px auto; padding: 20px 30px 20px 10px; font-family: Open Sans, arial; display: block; width: 70%; border-radius: 5px; } .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: none; font-family: Open Sans, arial; font-size: 20px; position: relative; outline: none; cursor: pointer; border: none; color: #707037; padding: 0 0 0 15px; } .mbtTOC button:after { content: "\f022"; font-family: FontAwesome; position: relative; left: 10px; font-size: 20px; } {codeBox}
![]() |
Step 1 |
![]() |
Step 2 |
Step6: Now again press " CTRL + F " and Search for " <data:post.body/> " and replace code with
"
<div id="post-toc"><data:post.body/></div> " then hit on "save theme" .![]() |
Step 1 |
![]() |
Step 2 |
![]() |
Step 3 |
Step7: Now go to the post where you want to show a table of content and click on HTML view at the top and paste the below code.
Code:
<div class="mbtTOC"> <button onclick="mbtToggle()">Contents</button> <ol id="mbtTOC"></ol> </div>{codeBox}
![]() |
Paste Code |
Step8: Place the code at the end of all HTML.
Code:
<script>mbtTOC();</script>{codeBox}
Update your post now you will see the working table of contents for the blog post.
![]() |
Works Perfectly |
![]() |
Awesome |
Comment below if you like my updated design.
Step-Wise Process for Manual Method To Make Table Of Content On Blogger
As the manual method is a little bit time consuming as well as you need to familiar with some HTML.
Let's start the step-wise method of adding a table of contents in the blogger.
Step1: Go to your blogger dashboard then point your mouse towards the theme option.
![]() |
Blogger Dashboard >Theme |
Step2: Now click on edit HTML.
![]() |
Edit HTML |
Step 3: Now, on the HTML section of the blogger again search on the theme using "CTRL+F" for " ]]></b:skin> " and again copy the code below and paste code above " ]]></b:skin> ".
Code:
/*Created by https://www.pkbaniya.com.np/ [Saroj-Tech ] */ .toc {border: 3px solid #A2A9B1;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;}{codeBox}
![]() |
Step 2 |
Step4: Now return to the post section and click on HTML to goto HTML section then paste the code below to make it work well.
Code:
<div class="toc"> <strong>Contents [ hide ] </strong> <ul> <li> <span>1.</span><a href="#point1">Heading </a></li> <ul> <li><span>1.1.</span><a href="#sub1">Sub-Heading 1</a></li> <li><span>1.2.</span><a href="#sub2">Sub-Heading 2</a></li> <li><span>1.3.</span><a href="#sub3">Sub-Heading 3</a></li> </ul> <li><span>2.</span><a href="#point2">Heading 2 </a></li> <li><span>3.</span><a href="#point3">Heading 3 </a></li> <li><span>4.</span><a href="#point4">Heading 2 </a></li> <li><span>5.</span><a href="#point5">Heading 3 </a></li> </ul> </div>{codeBox}
![]() |
Place Where You Want Table Of Contents |
Step5: Now give id to your headings that you want to include in your table of contents on blogger post.
Example: [ id="post1" ] for my first heading.
![]() |
Give Id |
Step6: Give id to your sub-headings if there are any Sub-Headings in your post.
Example: [ id="sub1" ] for first sub-heading.
![]() |
Give Id to Sub-Headings |
Step7: Now, Change your "Headings" and "Sub-Headings" according to your id and headings.
![]() |
Change Heading1 to your first heading |
![]() |
Worked :) |
Test Auto table of content vs Manual Table of content in Blogspot site.
![]() |
Normal Pagespeed |
![]() |
Automatic Table of contents |
![]() |
Manual Table of Content |
Manual Table of content is best but it has lots of disadvantages as well as the whole process is time-consuming.
FAQs
How do you add a table of contents to Blogger's post?
Answer: You can add a table of contents to the blogger by using some HTML CSS and javascript in your blogger theme.
How to add a table of contents widget for blogger?
Answer: To add a table of contents widget for blogger follow my instructions to add codes in your post.
How can I add a table of content in Blogger?
Answer: Table of content helps in SEO so you can add table of content in blogger by adding a few codes.
Does the table of contents help in ranking on Google?
Answer: Yes, table of contents helps in google ranking as you see "Jump To " snippets in google.
Conclusion
Follow each and every instruction then you can easily add a table of contents in blogger. The manual method of making a table of content is best for page speed. I suggest using the automatic table of content if you don't have a lot of time and a manual method of making a table of content if you have time.
Tapai le use gare jasto table of content chai kasai use garnu ?
ReplyDelete