Last Updated on January 17, 2024 by Justin Su
Table of Content is one of the vital factors that can affect your ranking in Google. It also helps viewers to get landed on the specific content area. If you are a blogger or want to become a blogger then you should add a Table Of Content to your website.
If your article is not longer than 500 words then I would not suggest adding a table of contents. Or, if you are writing an article that doesn’t contain lots of titles.
Table Of Contents is also called TOC.
Another benefit of a Table of contents in a blogger is that it tells Google about specific content. It allows showing specific titled topics in Google directly. For example, if there are two titles in one article like “List of Best Web Hosting For BLogger” and “Benefits of Web Hosting”. By adding TOC, Google will show both in Google for their keywords.
How To Add Automatic Table Of Contents On Your Blogger HTML
Here is the simple method to add an automatic Table Of Contents to your blogger post. Just follow the below steps to add it. You can comment down in case this method is not working anymore.
Also Read: Maru Springboard America Review: Legit or Scam Survey Panel
- Log in to Blogger and go to the dashboard
- Go to Theme and click on Edit HTML
- Find </head> and add code above it.
<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[ //*************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>
- Now search for “]]></b:skin>”
- and add above “]]></b:skin>”
.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;}
- Now again search for “<data:post.body/>”
- and replace it with below given code
<div id=”post-toc”><data:post.body/></div>
Also Read: Blogger Guide – How TO Change Profile, Add Buttons, And Much More
Also Read: How To Remove Powered By Weebly & Delete Weebly Account
How To Add Table Of Contents On Blogger Post
Here are the steps to add TOC on blogger posts. It is the simplest method to add TOC.
- Login to blogger
- Go to the post in which you want to add TOC
- Edit that post as HTML
- And copy & post the below code where you want to show TOC.
<div class=”mbtTOC”>
<button onclick=”mbtToggle()”>Contents</button>
<ol id=”mbtTOC”></ol>
</div>
- After that copy, the below code and paste it to the end of the post
<script>mbtTOC();</script>
At the time of writing this article or guide above methods are working properly but in case you are trying to use the above methods and it’s not working for you then comment down and I will try to add a new method or try to solve the problem.
Do not forget to share the article so more people can get a solution.
Follow us on Instagram.