How to Create Table of Contents (TOC) in Blogger?
How to add Table of Contents (TOC) in blogger website. By reading How to Create Table of Contents (TOC) on Blogger, you can put Table of Contents in your blogger’s blog. Before proceeding further, it is very important to know what is TOC i.e. Table of Contents and what is the benefit of putting Table of Contents in the post. And whatever post contains the table of contents, that post is also liked by Google and Google ranks that post considering it very good.
What is Table of Contents (TOC) in Blogger?
If you are a blogger, then you should also know about Table of Contents. Today we will know what is the table of contents? We will learn how to put Table of Contents in our blogger post. If we add table of contents to our article, then our blog gets a lot of benefit from it. And also the visitors coming to our blog also get a lot of help. If we put a table of contents at the beginning of all our articles, then the readers get to know which topics have been covered in the post.
How to Add Table of Contents (TOC) in Blog Post on Blogger
As it is very easy to make Table of Contents in WordPress, but the same thing becomes difficult in Blogger. Because to create Table Of Contents in Blogger, you need to create it only with the help of html coding. You need to add some code by edit your blogger html code. This is helpful for both users and search engines, as it allows users to quickly navigate to the information they are looking for, and it helps search engines understand website structure.
Step 1: Login to Blogger Dashboard
Step 2: Go to Theme Section & click on Small Down Arrow beside Customize Option
Step 3: Click on Edit HTML Option
Step 4: Search </head> tag and Paste TOC code above </head> Section
(Now in the fourth step, where you have to paste the code given below just one line above the </head> of the HTML part of your website and save it)
Code to Add TOC in Blogger:
<script type=’text/javascript’>
//<![CDATA[
//*************TOC plugin
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 5: Search for ]]></b:skin> Code
(now paste the CSS code just above ]]></b:skin> and save it.)
CSS Code to Add
.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 6: Search for <data:post.body/>
(here you have to replace the already existing code with the code given below and save it.)
CSS Code to Add Replace
<div id=”post-toc”><data:post.body/></div>
How to Show Table of Content in Blogger?
Now start writing your post and go into coding mode by clicking on HTML view. Now wherever you want to put TOC, paste the code given below.
<div class=”mbtTOC”>
<button onclick=”mbtToggle()”>Table Of Contents</button>
<ul id=”mbtTOC”></ul> </div>
If its not working then try this code
<div class=”mbtTOC”>
<button onclick=”mbtToggle()”>Table Of Contents</button>
<ol id=”mbtTOC”></ol>
</div>
Add the last code in the blog post
Now you have to paste this code at the very bottom of the post, where your post is ending, add this code below it and publish the post after all is completed.
<script>mbtTOC();</script>
Your post Table of Contents (TOC) has been added. As soon as you add this code and refresh your web page, you will get a table of content.
What are the Benefits of Table of Contents?
When you write a post, you use a lot of Heading and Subheading in it, due to which whenever a user comes to that post of your website, he cannot easily understand the structure of that post.
Because of which that user leaves that post of your website. Due to which the bounce rate of your website increases and there is a bad effect on your website, due to which the ranking of your website is down.
Therefore, you should use the Table of Contents in your website, which will help the user to understand the structure of the website post and the information that the user has come to your website to get, will be easily available to him.
Using Table of Contents also gives SEO benefits to your website as it helps search engine bot to understand the post structure of your website.
Another advantage of using Score is that your website looks professional.
Table of Contents is very important for the website and you must use it in your website.
FAQ:
Can Table of Contents be added to Blogger?
Yes, if you have a website on Google’s free platform Blogger, then you can create your website for free, as well as add a table of contents, for that you have to add some code to the html section of your theme.
Is there a plugin for creating table of contents in blogger?
No, there are no plugins like WordPress, but you will easily find the codes in this post of mine, with the help of which you can make TOC.
Conclusion: I hope you got the knowledge about how to create Table of Contents (TOC) in Blogger? Read this post again carefully and after understanding it, paste the coding step by step carefully. If you liked the post, please share this post with all your friends on social media. If you have any question or suggestion, then you can ask us by commenting.