How to Add Automatic Table of Contents in Blogger
In WordPress, there are many plugins available to add Table of Contents to posts, with the help of these plugins you can easily create table of contents for WordPress, but on Blogger platform you need to use HTML to create Table of Contents (TOC)
To create a table of contents, you don't need a lot of HTML knowledge. You can easily add a table of contents to your posts even if you know a little basic HTML.
If you don't have any knowledge of HTML, IT DOESN'T MATTER because if you follow this post well, you can easily add TOC to your post. We can also add a table of contents manually, but it is a time consuming task.
But as I told you most of the time, only long posts require a table of contents, so don't waste your time adding TOC on short posts and add the table of contents to long posts so readers can get a good experience from reading.
Before starting customization and encoding, please back up your template, as if something goes wrong, you always have the option to restore the previous version. Let us begin.
Follow the steps below to add the Table of Contents to your Blogger and Blogspot post automatically:
Step 1. Log into your Blogger blog and click Topic> Edit HTML
Step 2. Find the </head> tag and paste below the HTML above the </head> tag
Best place to show the Table of content is before the First H2 Tag. You can change as per your choice.
Go to the specific blog post to add TOC, Switch from Compose to HTML.
Step 6. Add below code at the end of the Blog
Step . Publish the post you are all done!
To create a table of contents, you don't need a lot of HTML knowledge. You can easily add a table of contents to your posts even if you know a little basic HTML.
If you don't have any knowledge of HTML, IT DOESN'T MATTER because if you follow this post well, you can easily add TOC to your post. We can also add a table of contents manually, but it is a time consuming task.
But as I told you most of the time, only long posts require a table of contents, so don't waste your time adding TOC on short posts and add the table of contents to long posts so readers can get a good experience from reading.
Before starting customization and encoding, please back up your template, as if something goes wrong, you always have the option to restore the previous version. Let us begin.
Follow the steps below to add the Table of Contents to your Blogger and Blogspot post automatically:
Step 1. Log into your Blogger blog and click Topic> Edit HTML
Step 2. Find the </head> tag and paste below the HTML above the </head> tag
<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[
//*************Table of Content (TOC) plugin by anantvijaysoni.in
function avsTOC() {var avsTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);avsTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("avsTOC").innerHTML += avsTOC;}}function avsToggle() {var avs = document.getElementById('avsTOC');if (avs .style.display === 'none') {avs .style.display = 'block';} else {avs .style.display = 'none';}}
//]]>
</script>
Step 3. Then find]]> </ b: skin> Code and paste below the CSS code before]]> </ b: skin>, just like below the image
.avsTOC{border:5px solid #EE5535;
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%;}
.avsTOC ol,.avsTOC ul {margin:0;padding:0;}
.avsTOC ul {list-style:none;}
.avsTOC ol li,.avsTOC ul li {padding:15px 0 0;
margin:0 0 0 30px;font-size:15px;}
.avsTOC a{color:#EE5535;text-decoration:none;}
.avsTOC a:hover{text-decoration:underline; }
.avsTOC 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;}
.avsTOC button:after{content: "\f0dc";
font-family:FontAwesome; position:relative;
left:10px; font-size:20px;}
You can make some customizations in the Table of Contents, depending on the Blogger color schemes:- To change the background color of the Table of Contents box, edit # FFFFE0
- To change the border color of the Table of Contents box, edit # EE5535
- To change the font color of the table of contents title text, edit # 707037
- To change the color of the Table of Contents anchor link, edit # 0080ff
- To change the font size of anchor links, edit 15 pixels
- To change the font size of the table of contents title text, edit 20 px
<div id="post-toc"><data:post.body/></div>Step 5. Choose the Table of content Box Location in your Post
Best place to show the Table of content is before the First H2 Tag. You can change as per your choice.
Go to the specific blog post to add TOC, Switch from Compose to HTML.
<div class="avsTOC"> <button onclick="avsToggle()">Contents</button> <ol id="avsTOC"></ol> </div>
Step 6. Add below code at the end of the Blog
<script>avsTOC();</script></div>
Step . Publish the post you are all done!
Comments