download our thousand of premium blogger template. FCThemes

How to Create A Automatic Table of Content in Blog/WordPress

Table of Content

How to Create A Automatic Table of Content In WordPress/Blogger -Hi Everyone Today This Article I Share You How to Create A Table of Content in Blog Basically Table of Content make it easy for users to jump to the section of the article they want to read, so when the user clicks on the contents of the table of contents, the user is immediately redirected to the section.

💡Table of Contents

  1. How to Create A Table of Content
  2. Create Automatic Table of Content in Blog
  3. What is a Table of Content
  4. Create Automatic Table of Content in Blogger
  5. Create Automatic Table of Content in WordPress

How to create automatic table of contents on blogger - If you are a WordPress platform user, of course it will be very easy with the help of a plugin to create a table of contents in articles. Blogger platform users without a plugin, let's learn how to create a table of contents on blogger. Before continuing with the tutorial, we will discuss the Table of Contents.

How to Create Automatic Table of Content

Step:1 Simply Go to Blogger Dashboard

Step:2 Select Theme Option

Step:3 Now Click Edit HTML


Step:4 Then Copy The Following Code And Place it Before </head> or </body> Tag

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
.bwstoc {
 margin: 10px 0;
 background: #F0F0F0;
 border: 1px solid #ddd;
.bwstoc ol, .bwstoc ul {
 margin: 0 0 15px 20px;
 padding: 0;
.bwstoc ul {
 list-style: disc;
.bwstoc ol li, .bwstoc ul li {
 font-size: 95%;
 padding: 5px 10px 0 0;
 margin: 0 0 0 30px;
.bwstoc a {
 text-decoration: none;
.bwstoc a:hover {
 text-decoration: underline;
.bwstoc .bwstocHeader {
 font-weight: bold;
 font-size: 100%;
 position: relative;
 outline: none;
 border: none;
 padding: 5px 15px 5px 5px;
 margin: 5px 10px;
.bwstoc .bwstocHeader a {
 text-decoration: none;
 cursor: pointer;
.bwstoc .bwstocHeader a:hover {
 text-decoration: underline;
<!-- Blogger TOC By FC Themes-->
<script type='text/javascript'>
//<![CDATA[function bwstoc() { var bwstoc = i = headinglength = getheading = 0; headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length; if (headinglength > 1) {  // Only Shown If At least 2 Headings are Found for (i = 0; i < headinglength; i++) { getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
 var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
 var bws_2 = bws_1.trim();
 var getHeadUri = bws_2.replace(/s/g, "_");
 document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
 bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
 document.getElementById("bwstoc").innerHTML += bwstoc;
 } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
function bwstocShow() {
    var bwstocBtn = document.getElementById('bwstoc');
 var bwstocWrapID = document.getElementById('bwstocwrap');
 var bwstocLink = document.getElementById('bwstocLink');
    if ( === 'none') { = 'block'; = 'block';
 bwstocLink.innerHTML = 'Hide';
    } else { = 'none'; = 'inline-block';
 bwstocLink.innerHTML = 'Show';
<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>

Step:5 Now Click CTRL -F Button on Keyboard or Search This Tag <data:post.body/> And Replace This Code Below

<div id='post-toc'>
<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Table of Contents [<a id='bwstocLink' onclick='bwstocShow()'>Show</a>]</div><ul id='bwstoc' style='display:none'/></div>

Step:6 Now Click The Save Button

Congratulations Your Site Ready To Show Automatic Table of Content

This Table of Content Will Automatically Appear in Blog Posts h3 or h4 Header Tags


In This Article I Share Css And JavaScript For Testing And Educational purposes

Rate Articles:

Post a Comment