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.
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.
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 |
Step3: Copy the code below:
Code Below
<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}
 |
| 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> “.
/*####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 |
" <div id=”post-toc”><data:post.body/></div> ” then hit on “save theme” . |
| Step 1 |
 |
| Step 2 |
 |
| Step 3 |
<div class=”mbtTOC”>
<button onclick=”mbtToggle()”>Contents</button>
<ol id=”mbtTOC”></ol>
</div>{codeBox}
 |
| Paste Code |
Note: You can use bullets on the list by replacing “ul” to “ol”.
<script>mbtTOC();</script>{codeBox}
 |
| Paste Code At End |
 |
| Works Perfectly |
 |
| Awesome |
Step-Wise Process for Manual Method To Make Table Of Content On Blogger
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 |
/*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 1 |
 |
| Step 2 |
<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 |
Example: [ id=”post1″ ] for my first heading.
 |
| Give Id |
Example: [ id=”sub1″ ] for first sub-heading.
 |
| Give Id to Sub-Headings |
 |
| Change Heading1 to your first heading |
Update your post now you will see the working table of contents for the blog post.
 |
| Worked 🙂 |
Test Auto table of content vs Manual Table of content in Blogspot site.
 |
| Normal Pagespeed |
 |
| Automatic Table of contents |
 |
| Manual Table of Content |
FAQs
How to add a table of contents widget for blogger?
How can I add a table of content in Blogger?
Does the table of contents help in ranking on Google?
Tapai le use gare jasto table of content chai kasai use garnu ?