How to Add Automatic Table of Contents in Blogger or WordPress
The table of contents is an advanced feature that has been introduced to websites mainly in WordPress years ago. So what is a table of contents? How can table of contents improve your blog SEO?
Advantages of the table of contents
- Gives a professional impression to your website.
- Makes it easier for your visitors to navigate through the different parts of your content.
- Improves your SEO as it optimizes your posts to search engines.
- It fastens the indexation by web robots.
- Highlights the most important parts in the post.
- Generates the heading automatically and there is no need to type it yourself.
- Does not affect the load and performance of your website especially if you are using a well coded template or WordPress theme.
- SEO Friendly codes.
- Adds a clickable table of contents ToC to web page topics in Blogger and WordPress.
How to Create a Table of Content in WordPress Posts and Pages
How To Add SEO Friendly Table of Contents In Blogger
Step 01
First follow these steps:
- Login to you Blogger dashboard.
- Backup your template first.
- Head to Template then edit HTML.
- With Ctrl+C to copy and Ctrl+V to paste the following codes in their appropriate places.
- Save your template and exit.;
Step 02
Next paste the following code just before </head>
[<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 Raqmedia.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>]
Step 03
Now, search ]]></b:skin> line and paste the following CSS code just above that ]]></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;}]
Step 04
After that search for <data:post.body/> tag and replace all of them with the below code.
[<div id=”post-toc”><data:post.body/></div>]
How to Add TOC automatically In Blogger Posts
To finish setting up the script, you need to add the following code in every post of your blog right after the first headline.
[<div class=”mbtTOC”>
<button onclick=”mbtToggle()”>Contents</button>
<ol id=”mbtTOC”></ol>
</div>]
And finally at the end of the blog post paste the following script:
Important Notice
Note: If you have already used any other scripts of Table of Contents, make sure you delete them. You can change the word “contents” with what you want. Credits goes to MyBloggerTricks.