How To Add Table Of Contents In Blogger Posts [2 Methods] With Pictures

Add a Table Of Content In Blogger and your blog post to simplify your post structure and seo-friendy. Table of Content in Blogger blog post makes it easy to read the posts for the reader and it improves the organic traffic. The basic function of Table of content is that it allows the user to jump on specific topic which he/she likes and in that way it increases engagement of our website. 

Hello, welcome to Affizoo, in this article I will show you how to Add a table of content in Blogger With Pictures. Adding a table of content in WordPress is very easy using some plugin. But it’s very difficult to add a table of content in Blogger as Blogger does not support Plugin but we are here to help you build a plugin for blogger also.

Here, In Todays article I will guide you step by step to add a table of content in Blogger. Before adding this to your blog you should know some benefits of having a table of content (TOC) in Blogger blog post that can help you understand it well.

Also Read: How To Add Reading Progress Bar In Blogger[100% Working] Fully Optimized

1. SEO Benefits Of Table Of Content.

As you Know, Google always loves well detailed and well-structured blog posts and pages so that it can crawl well and user finds best result on google. And by adding a table of content in Blogger blog posts, you make your blog post well structured and user-friendly. Learn with Affizoo for How To Add a table of content in blogger to get a better result.

And if you want to add a TOC in your blog post, it will be structured and reader-friendly and can help you gain more traffic as well. Google may display jump to links in the Search Result Page, it’s very beneficial for webmasters and it can increase your CTR.

Also Read: Make big money💰 online with less time: Try This 3 Ways

2. Improve User Experience.

According to research by NN Group more than 79% of total web readers are scanners who only read the important points of a webpage. We also love to read well-detailed articles so, adding a table of content will be helpful.

User experience is a very important thing to get higher ranking in SERP (Search Engine Result Page). User experience is a very important part of a blog to rank faster and looks better. And a table of content will help you to improve the user experience of your blog even your viewers will increase.

Adding a TOC in Blogger will allow the readers to jump to the important parts of a blog post. It will be easy for a reader to understand the content much better and simple.

Also Read: Ranking a BlogSpot Easily on Google | Apply SEO

Method 1 - To Add Table Of Contents In Blogger[Automatic]

I will guide you step by step to add a table of contents in Blogger which works automatically. I have explained this process in 6 simple steps and are given below. 

Step 1-: First login to your Blogger Blog in which you want to add a table of contents (TOC). Click on Theme and then click on edit HTML to implement.

Step 2:- Find </head> in the HTML file of your blogger blog and paste the below-given code just above the </head> tag as shown on screenshot.

copy and paste this script just before the </head> tag on your Blogger template.

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

Step 3:– Find ]]></b:skin> code in your Blogger template and paste the below-given CSS code just above this ]]></b:skin> tag.

.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;}

Step 4:– It’s a very easy step. Find <data:post.body/> code in your theme and replace with a new code given below. If your theme has this code more than one time then you have to replace all of them with this new code. So, to avoid errors read it carefully and then if find problem then comment me.

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

Step 5:– Click on HTML view and paste the below given code where you want to show table of content in Blogger post editor and this need to be done everytime whenever you write a post.

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

And add this code below text, as you can see in the screenshot.

<script>mbtTOC();</script>

Yeah, Now you can see a Table of Content in Blogger post. Just you have to add these two code on every pages or posts where you want to show table of contents in Blogger website. 

You can choose where you want to show the table of content, before first heading or after heading, you have to just paste the script that is 100% working[Guaranteed].

If you want to change the colour of any elements of Table Of Content, then you can easily change it in simple steps. Find the default style and colour of these all code and you can change as per your choice. You can Change Font, Font Colour and Font Style.

Tutorial for how to change is given below and any help needed then comment me. 

• Change background color #FFFFEO
• Change font
• Change border color #f7f0b8
• Change font color #707037
• Change Anchor link color #0080FF
• Change the font size of anchor Links 15px
• Change the font size of TOC heading text 20px

Check if you followed all the steps correctly. You can preview your blog post, Either the table of contents in Blogger if it is showing or not.

Also Read: Try These Ultra Fast AMP Enable Blogger Template For Free

Method 2 - Add Table Of Content Manually In Blogger.

You can also add a table of content in Blogger post manually without using any script. Adding a table of contents in Blogger manually is a very easy task and I will share a step by step guide here.

Just follow this simple method to add a normal table of content in Blogger post & page. But please remember if you add a TOC in Blogger manually you can’t change the style of that TOC in Blogger. To add table of content in blogger manually you don’t need to add any script to your Theme, And if you change the theme of your Blogger blog it will not affect your TOC in blogger (it will remain unchanged).

Advantages Of Manual Method To Make Table Of Content On Blogger

• No need of Javascript means you save 1.2s pagespeed.

• You can use on amp template also. 

• Manually Table Of Content subtopics also.

Disadvantage Of Manual Method To Make Table Of Content On Blogger

• Lots of time needed for manual method. 

• It need some html skill. 

Step1:- Go to your blogger dashboard then point your mouse towards the theme option.

Step2:- Now click on 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> ".

.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;}

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.

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

Step5:- Now give id to your headings that you want to include in your table of contents on blogger post.

Example: [ id="Article1" ] for my first heading.

Step6:- Give id to your sub-headings if there are any Sub-Headings in your post.

Example: [ id="Post1" ] for my first heading.

Step7:- Now, Change your "Headings" and "Sub-Headings" according to your id and headings.

Update your post now you will see the working table of contents for the blog post and drive more traffic. 

Manual Table of content is best but it has lots of disadvantages as well as the whole process is time-consuming.

So, I recommend you to use Automated Table Of Content which is fast and less time consuming.

Also Read: 7 Best Tips & Tricks to get successful in affiliate marketing

Conclusion

Congrats! Today you learned more about How To Add Table Of Contents In Blogger Posts [2 Methods] With Pictures so always be the first to comment us and tell how helpful is this article.

Thanking you! For giving your precious time to us. 

Please visit us again...