How to add the table of content in blogger

 How to add the table of content in blogger:-

Today we are going to talk about How to add the table of content in the Blogger blog. So if you want to make your blogger blog like WordPress and want to add the table of the content plugin in blogger. So for that read this post starting to end.

In WordPress, you can add multiple plugins in just one click but In blogger, you need to do some coding for that. But don't get confused I will give you all the coding here, you need to paste it into your blog. So let's see how you can add the table of the content in the blogger.


How to add the table of content in blogger



What is the table of the content:-

The table of content is just like a book. For example, you can see the index page in the book and you can see Where are these pages in this book. So like that, you can add a table of the content plugin in your blog. So the users can find easily what they are looking in that page.

The table of the content is a list of topics, headings, and subheadings that are covered in the blog. So if you click on the link which is in the table of the content plugin so you will directly jump on the topic. So this is the benefit of the table of the content plugin. It is also helpful in SEO.
So let's see our main topic How to add the table of content in blogger:-

How to add the table of content in blogger:-

If you have little knowledge about HTML, you can do this easily or if you don't have any HTML knowledge then you can also do it because I will provide code here. You just need to paste this code into your website.

Note:- Before we start customization and coding, you need to back up your templates because if something goes wrong then you can restore your older version of the template. So back up your templates.
Follow the steps to add a table of the content plugin in your blogger blog.

How to add the table of content in blogger:-


1. Go into your theme option, and click on Edit HTML.

2. Press ctrl+f to search into your keyboard and search for </head> tags.

<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>

Copy this above code, and paste it above </head> tags, and click on the Save button.

3. Next Search for ]]></b:skin> code and paste the code above this tags.

.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;}


4. Now search for <data:post.body/> and replace it with this code.

<div id="post-toc"><data:post.body/></div>

Now save the templates you have all done. 

Now, it is all done. But, Select that blog post in which you want to show a table of the content plugin and Edit the HTML view of this post and copy the code below and paste it where you want to show your table of the content plugin. You can add your table of the content plugin before the H2 heading. If you want to show your plugin above the H2 heading then you need to paste this code above H2 heading in HTML view. 

<div class="avsTOC"> <button onclick="avsToggle()">Contents</button> <ol id="avsTOC"></ol> </div>

2. Add this code at the end of the HTML view.

<script>avsTOC();</script></div>

Note:- These above two codes, you need to paste every time into your post in which you want to show the table of the content plugin. 

You can make some customization in coding if you want:-

  • To change the background color of the Table of Content box edit #FFFFE0
  • To change the border color of the Table of Content box edit #EE5535
  • To change the font color of Table of Content headline text edit #707037
  • To change anchor link color of Table of Content edit #0080ff
  • To change the font size of anchor links edit 15px
  • To change the font size of Table of Content Headline text edit 20px
Now update your post and you will see the table of the content plugin into your blogger blog.  

Today In this blog post I shared that How to add the table of content in blogger. I hope this post will be helpful to you. If you have any queries regarding this, please comment.

Post a Comment

1 Comments