Add Table of Contents to Blogger Posts
Just as at the beginning of every book, you definitely get a table of contents, in which all the headings and subheadings present in that book are given along with the page number and with the help of the same table of contents, you get to know that these books are yours. worked or not.
Similarly, if there is no table of contents at the beginning of long posts of any blog, then the user does not know whether those posts are of his use or not and he closes it without reading only after seeing the length of the posts. It is important to have a table of contents at the beginning of long posts.
What is Table of Contents (TOC)?
Table of contents is a structured overview of any post, in which all the headings and subheadings (h1, h2, h3, h4) of the post are given in the form of links, with the help of which the readers get an idea of what is in that post. -What topics are covered and with the help of those links he can easily navigate the full post.
You will definitely find a table of contents at the beginning of most of the articles in Wikipedia because it gives readers a good user experience and apart from this the table of contents also improves the SEO of your blog.
Google also shows jump links to the table of contents present in a post in its search results pages so that any visitor can click on that link and reach that specific section of the direct post. Apart from this, there are many advantages of using TOC in post.
How to add Table of Content (TOC) to Blogger posts?
There are many plugins available to add table of contents to posts on WordPress, with the help of which you can easily create table of contents, but on Blogger platform you have to use HTML to create TOC.
To create a table of contents, you do not need a lot of knowledge of HTML, even if you know a little bit about the basics, you can easily add table of contents to your posts. Just a little bit of HTML comes to every blogger.
Even if you do not know HTML, then it does not matter because even if you follow this post well, you can add TOC to your post. We will manually add TOC to our post from HTML, so this task takes some time.
But as I told you that table of contents is needed mostly only in long posts, so do not waste your time by adding TOC in short posts and definitely add table of contents in long posts so that readers can get good reading experience. able to
Let’s add Table of Content (TOC) from HTML to posts
1. Go to Blogger Dashboard
2. Go to Theme Option
3. Click on Edit HTML Option
4. Add the following code under 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 thehindibiography.in
function avsTOC() {var avsTOC=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);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>
5. Now you have to paste the following code before (above) ]]></b:skin> tag.
.avsTOC{border:2px solid #d9d9d9;
background-color:#F6F6F6;
color:#000000;
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 0px;font-size:15px;}
.avsTOC a{color:#000000;text-decoration:none;}
.avsTOC a:hover{text-decoration:underline; }
.avsTOC button{background:#F6F6F6;
font-family:oswald, arial; font-size:20px;
position:relative;
outline:none;cursor:pointer; border:none;
margin:0 0 0 30px;font-size:15px;}
.avsTOC button:after{Jump To: “”;
font-family:FontAwesome; position:relative;
left:10px; font-size:10px;}
}
6. Replace <data:post.body/> code
Now you have to replace the <data:post.body/> code with the code given below
<div id=’post-toc’><data:post.body/></div>
7. Paste this code before <h1> tag in post
Now you have to paste the below code in your post in html view before heading tag <h1>
<div class=”avsTOC”> <button onclick=”avsToggle()”>Contents</button> <ol id=”avsTOC”></ol></div>
8. Paste This Code at last of your post
Go to the html view and paste the following code in the last of the post
<script>avsTOC();</script></div>
Stay connected With itsutkarshk And Follow Us On Instagram & Facebook Subscribe Our YouTube Channel
