How to add table of content widget in blogger - World24Hub

Blogger is totally free platform to start blogging but because of limited features you have to add many things manually. Today I have come up with step by step guide on how to add table of contents on blogger manually. All you need is basic coding knowledge, If you don't have knowledge of coding follow the steps below.

Tabel of content is brief information of particular contents. It shows the short and clean information about the contents. It is the informative list of whole contents.

Blogging with blogger is really hard on the comparision of WordPress because of there is no any plugins exists for blogger/blogspot. On the WordPress it comes with plenty of plugins that you don't even need to code single piece and in the blogger you need to code everything manually so, in this post i'm sharing small piece of code that work as "Table Of Content" in the Blogger/Blogspot.

How to add tabel of content in blogger/blogspot ?

Adding this plugin for blogger is very easy just simple codes of html, css and JavaScript will work great. This is just made with custom " HTML, CSS & JAVASCRIPT" you can use it in your blogger template or blogger website for free.

Step 1 : We'll be using JavaScript for creating table of contents on blogger. below is the step by step guide on it. Follow the instructions below carefully. Copy the following javacript code (That for hide and show table of contents) and CSS CODE from the table below. The following are the codes :

Before You Modify We recommend you to take backup of your current template, you can restore it if anything wrong happened.

<styel> 

.ol { 

 list-style-type: none;

 counter-reset: item;

 margin: 0;

 padding: 0;

 text-align: left;

} 

.ol > li {

 display: table;

 counter-increment: item;

 padding: 2px;

 text-align: left;

 margin: 0 15px 0 0;

} 

.ol li:before {

 content: counters(item, ".") ".";

 display: table-cell;

 padding-right: 0.6em;

} 

.ol li a {

 text-decoration: none;

 color: inherit;

} 

.tabel-toggle {

 display: none;

 transition: opacity 5s ease-out;

} 

.tabel {

 background: #000;

 color:#999;

 display: inline-block;

 border-radius: 4px;

 padding: 20px;

 transition: all 0.8s;

 box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.4)

}

 </style>

Paste the copied css code above </head>

Step 2: The following is the JavaScript Code, Copy it to clipboard and paste it also before head close tag </head>, look the javascript code below.

// Creating Functions 
function rakti() {
    var x = document.getElementById("tabel-toggle");

    var a = document.getElementById("rakti");

    if (x.style.display === "none") {
        x.style.display = "block";

        a.innerHTML = "Hide";
    } else {
        a.innerHTML = "Show";

        x.style.display = "none";
    }
}

Step 3 : Paste your both codes in your notepad and goto blogger dashboard and [ Themes ]

Polular On Blog : Android Top 4 Video Editing Apps

and EDIT HTML and look for </head> and paste codes above it.

Step 4 : Now goto "posts" and try your content of tabel, Just copy the following HTML code and save and view it.

<div class="tabel">
<h4>Contents [ <button onclick="rakti()" id="rakti">Show</button> ]</h4> 
<div class="tabel-toggle" id="tabel-toggle"> 
 <li><a href="#whatiscontent"> What is tabel of contents ?</a></li> 
 <li> Why it is neccesary ? 
<ol class="ol">
 <li> Brief infos</li>
 <li> Content info </li> 
 <li> Short and clean</li> 
 <li> List contents</li>
 </ol> 
 </li> 
 <li><a href="#downloadcontent"> Tabel of contents tutorials</a></li> 
 <li><a href="#tutorialcontent"> How to add TOC in blogger ? </a></li> 
 <li><a href="#othercontent"> Blogger  tabel of contents </a></li> 
 </ol> 
</div>
 </div>

Step 5 : If you did right then your tabel looks like following tabel of contents. Look the tabel below. Click on show button to show tabel and click on hide to hide all tabel of contents.

Contents [ ]

1. What is Tabel of contents ?
2. Why it is neccesary ?
   1. Brief info
   2. List Info
   3. List Summary
   4. Contents info
3. Tabel of Contents Tutorials
4. How to add TOC in Blogger ?
5. TOC for Blogger

Step 6 : If you want to keep links inside table of contents you can put your link custom links inside the <a href tag.

There is no any other options for blogger to add own custom tabel of contents. You can use it in your blogger posts , it is very easy and short to do.
In the post , you learnt about how to add tabel of contents in your blogger posts, hoped it helped you a lot. More and more tutorials is on the way stay with us subscribe to our newslater.