Home
Blogger Tips
Css

How To Add Automatic Table Of Content in Blogger Website

Hello Everyone, Welcome Back in My Website. Today in this Post We are going to discus on How To Add Automatic Table Of Content in Blogger Website. Table of content or what is often called a table of contents are discussion points contained in an article. Table of content is usually placed in a long article But you can also use in any Posts.

You can find Table of Content On Great websites Like Wikipedia, HelpinHindi and on other Blog and Websites. The Purpose of installing a Table of Content in Blogger is to make it easier for article readers to understand the article being discussed and of course affect on SEO.

So, You just put Automatic Table of Content in Your Blogger Post to attract your visitors and it is also helpful in SEO. So Now I am going to tell How to Install Table of Content in Blogger Website.

Note:-
Before Starting this tutorial Make sure You have to backup your Template first.

How To Install Table Of Content in Blogger Website :-

Step 1 :- First of All You need to Login in Blogger Website with Your Blogger Account.
Step 2 :- Now Select Theme Menu.
Step 3 :- Then Click on Edit HTML.
Step 4 :- Copy the code Provided Below and Place it Just Above The ]]></b:skin> tag.

.TOCtechy {
    line-height: 1.4em;
    padding: 0 30px 20px 10px;
    display: block;
    width: 95%;
    margin: 0 auto;
    background: #eaeaea;
    border: 1px solid #ccc;
    border-radius: 3px/6px
}
.TOCtechy ol,
.TOCtechy ul {
    margin: 0;
    padding: 0;
}
.TOCtechy ul {
    list-style: none;
}
.TOCtechy ol li,
.TOCtechy ul li {
    padding: 15px 0 0;
    margin: 0 0 0 30px;
    font-size: 15px;
}
.TOCtechy a {
 font-weight: 700;
    color: #4f4f4f;
    text-decoration: none;
}
.TOCtechy a:hover {
    text-decoration: underline;
}
.TOCtechy button {
    background: #eaeaea;
    font-family: oswald, arial;
    font-size: 20px;
    position: relative;
    outline: none;
    cursor: pointer;
    border: none;
    color: #2d2d2d;
    padding: 20px 0 0 20px;
}
:target::before{content:"";display:block;height:50px;margin-top:-50px;visibility:hidden}
Step 5 :-After that, put the following JavaScript code between the <head> and </head> tag.
<script type='text/javascript'>
    //<![CDATA[                   
    function TOCtechy() {
        var TOCtechy = i = headlength = gethead = 0;
        headlength = document.getElementById("post-toc").querySelectorAll("h3, h4").length;
        for (i = 0; i < headlength; i++) {
            gethead = document.getElementById("post-toc").querySelectorAll("h3, h4")[i].textContent;
            document.getElementById("post-toc").querySelectorAll("h3, h4")[i].setAttribute("id", "point" + i);
            TOCtechy = "<li><a href='#point" + i + "'>" + gethead + "</a></li>";
            document.getElementById("TOCtechy").innerHTML += TOCtechy;
        }
    }

function mbtToggle() {
    var mbt = document.getElementById('TOCtechy');
    if (mbt.style.display === 'none') {
        mbt.style.display = 'block';
    } else {
        mbt.style.display = 'none';
    }
}
//]]>             
</script>
Step 6 :-Do not Forget to Click on Save Button.

How to Create an Automatic Table of Content in Blogger Posts :-

If you like to make long articles, for example around 600 words or more, I highly recommend installing this automatic table of content.

Because you don't need to bother installing the table of content as usual. However, the disadvantage of this table of content is that it is not suitable if applied to short articles.

Now I am going to tell How To Add Automatic Table of Content in Blogger Posts. So Now Let's get Started.

Step 1 :- Now Go Back to The Theme Section.
Step 2 :- Then Click on Edit HTML.
Step 3 :- Now Find the Code <data:post.body/> , Then Replace it with the Following Code.
<div id='post-toc'>
<div class='TOCtechy'>
    <button onclick='mbtToggle()'>Table of Contents</button>
    <ol id='TOCtechy' />
</div>
<data:post.body/>
<script>
    TOCtechy();
</script>
</div>
Step 4 :- Do not Forget to Save Your Theme. Finished. Now you can see the result of Automatic Table of Content in Blogger.

Conclusion :-

Well that's great tutorial on How to Add Automatic Table Of Content in Blogger Website. I hope you liked this post. If you face any error or problem regarding to this post then you can put your comment without any hesitate.

1 comment

  1. Can I add css in this table?