How To Add Table Of Contents On Blogger Posts

How To Add Table Of Contents On Blogger Posts

Hey viewers, Through this article you will able to add table of contents on Blogger without any hard work you can add table of contents to any post of your blogger blog. If we talk about wordpress there is a lot of plugins available that helps you in adding table of contents in any blog post but if we talk about blogger there is not any plugins available that helps you to add table of content. Read this full article to know the process of adding Table of Content.

What Is Table Of Content

Table of content is just a table that helps viewers to read according to their need they can directly read required paragraph they want. Table of content is mostly found on the beginning part of the article. You have already seen Table of content on the site Wikipedia. Every And Each post have available TOC on wikipedia.

Table of content is generally the heading of whole post that contains H1,H2, H3, H4, a d more viewers can directly jump via clicking on required heading.

Purpose Of Adding Table Of Content On Blogger Post

The main Purpose to adding table of contents on any post on blogger is that to make your blog easier for readers to explore & understand what is Available in content of the blog.

When a reader wants to get information about the article but does not want to read the entire article that we have made but only wants to get the certain informations, the table of contents helps to reach at specific point or section so that they don’t need to scroll down for required section or point.

Thus it can increases the attraction of visitors to visit again to your blogger blog, because of the ease of information i.e, presented in each post or article that you have made.

In addition to making it easier for visitors to find informations according to their need, blogs that provides a table of contents in each and every post written will be most preferred by search engines like Google, Yahoo so they can easily review your posts or articles more appropriately.

Benefits of adding Table of Contents on your Blog posts

  1. Tables of contents on your blog allows you to write lengthy articles and it make easier to navigate to the particular point/headings without scrolling down.
  2. It helps your site reduce the high bounce rates of your blog by keeping your readers engaged.
  3. It makes easier for web crawler to crawl your website easier and faster to rank on search engines likes Google or yahoo.

How to Add Table of Contents Inside a Blogger Post

Adding a table of contents in a website’s article is very easy, but it seems that there are still many people who do not know how to add it to blog post. The code of this table of contents (TOC) is very light because it’s only made via using CSS and HTML codes. It doesn’t necessary JS so it doesn’t reduce speed of webpage loading. So in this post, I will discuss a simple & easiest way to make a table of content inside a blog post. So, start the steps..

STEP1 .: Firstly add The following CSS i.e, given below copy and just paste before </style> or ]]></b:skin> tag.

/* Table of Contents by FirstTechInfo {Ashish} */
.toc {background-color:#f8f9fa; border:2px solid #ddd; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {display:inline-block; margin:0 10px 10px 0}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left}
.toc ul li {list-style-type:none;}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0645ad}
:not(:checked) > .toctoggle {display:inline !important; position:absolute;  opacity:0}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'Hide';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'Show'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}

Note: In last of the CSS code i.e, :target::before If you are using the sticky header or navigation menu then change its height & margin-top & match the size of the mounted header or navigation of your blogger blog.

STEP2 .: Now time to Add main part of  TOC, which is to make a table of contents in the Blogger post. Now go to your Blogger dashboard  then >> Posts >> New post and create a new post. When creating a new post, make sure to choose the mode HTML, NOT Compose. Then copy the following Html code and paste it in the any paragraph that you want to add Table of contents.

<div class="toc">
  <input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h2>Daftar isi</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
    <li>1 <a href="#toc1" title="Heading one">Heading one</a></li>
    <li>2 <a href="#toc2" title="Heading two">Heading two</a></li>
    <li>3 <a href="#toc3" title="Heading three">Heading three</a></li>
    <li>4 <a href="#toc4" title="Heading four">Heading four</a></li>
    <li>5 <a href="#toc5" title="Heading five">Heading five</a>
      <li>5.1 <a href="#toc5_1" title="Sub Heading part one">Sub Heading part one</a></li>
      <li>5.2 <a href="#toc5_2" title="Sub Heading part two">Sub Heading part two</a></li>
    <li>6 <a href="#toc6" title="Heading six">Heading six</a></li>

#toc1 and the other #toc is the calling element i.e, used to make table of contents. You can add or subtract toc as you needed to make table of content.

STEP3 .: Now arrange the following heading / destination points by including the same id as the table of contents belong. For example like this.

<h2 id="toc1">Heading one</h2>
...texts in paragraph one

<h2 id="toc2">Heading two</h2>
...texts in paragraph two

<h2 id="toc3">Heading three</h2>
...texts in paragraph three

<h2 id="toc4">Heading four</h2>
...texts in paragraph four

<h2 id="toc5">Heading five</h2>
...texts in paragraph five

<h3 id="toc5_1">Sub Heading part one</h3>
...texts in paragraph part one

<h3 id="toc5_2">Sub Heading part two</h3>
...texts in paragraph part two

<h2 id="toc6">Heading six</h2>
...texts in paragraph six

How To Add Table Of Contents On Blogger Posts

That’s all the tutorials to make a table of contents in blogger blog posts such as the table of contents is Available in Wikipedia. Hope,all the things to you feel helped, don’t forget to leave a message for us and share this post with your friends to let them know.

Also Read:


Please enter your comment!
Please enter your name here