How To Add Automatic (TOC) Table Of Content in Blogger Post

How To Add Automatic Table Of Content in Blogger Post

Are you looking for a download Table of Contents Css code for a Blog Post, The right place in this article step by step complete guide on How To Add an Automatic Table Of Content (TOC) in a Blogger Post and Table of Contents Css all code download?


    Blogging has become one of the most popular forms of online communication, providing a platform for people to share their ideas, experiences, and opinions with the world. One of the best ways to make your blog posts more accessible and easier to read is by adding a table of contents (TOC). A TOC allows your readers to quickly jump to the section of the post that interests them the most.

    What is an Automatic Table of Contents (TOC) 

    A table of contents, or TOC, is a list of the headings and subheadings in a document, along with the page numbers where each heading appears. An automatic TOC is generated dynamically and updates itself as the content of the document changes. This means that if you add or remove a section in your post, the TOC will automatically update to reflect these changes.

    Benefits of Adding a TOC to Your Blog Posts

    Improved User Experience: A TOC makes it easier for readers to navigate your blog post and find the information they are looking for.
    Increased Engagement: By making it easier for readers to find the information they are looking for, they are more likely to spend more time on your blog and engage with your content.
    Better Organization: A TOC helps to organize your content into distinct sections, making it easier for both readers and search engines to understand the structure of your post.

    How to Add an Automatic TOC to Your Blogger Post 
    To add an automatic Table of Contents (TOC) to your Blogger post, you need to add the TOC header code, TOC body code, and TOC POST CSS code.

    How To Add Automatic Table Of Contents (TOC) in Blogger Post

    First, add your Table of Contents (TOC) Header Code:
    Go to the "Log into your Blogger Account
    "Select On the "ThemeOption and click on "Three Dotsand then Click on "EDIT HTML"
    Now find the <head> and paste the below script just between the </head> tag. and click on save the theme.

    Add TOC Header Code 

    Just Select and Copy the Code:
    <script type='text/javascript'>
    //*************TOC plugin
    function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
    headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
    {gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}

    Now find the ]]></b:skin> and paste the following CSS code just above ]]></b:skin> line.

    ]]></b:skin> Code Just Copy and Paste:

    Add TOC Body Code 

    .mbtTOC{border:5px solid #f7f0b8;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%}.mbtTOC ol,.mbtTOC ul{margin:0;padding:0}.mbtTOC ul{list-style:none}.mbtTOC ol li,.mbtTOC ul li{padding:15px 0 0;margin:0 0 0 30px;font-size:15px}.mbtTOC a{color:#0080ff;text-decoration:none}.mbtTOC a:hover{text-decoration:underline}.mbtTOC 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}.mbtTOC button:after{content:"\f0dc";font-family:FontAwesome;position:relative;left:10px;font-size:20px}

    Now Ctrl+F press the keyboard and Find the <data:post.body/> , there can be more than 1 <data:post.body/> tag, and Replace all of them with the below code.

    Just Copy and Paste Code

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

    The coding all part ends here, Click on "SAVE" and you are all done!

    Add the Table to Your Blog Post 

    Once you have created your table, the next step is to add it to your Blogger blog post. To do this, follow these steps:
    Log in to your Blogger account and go to the dashboard for the blog you want to add the table too.
    Click on the “New post” button to create a new blog post or select an existing post to edit.
    In the “Compose” view, click on the “HTML” button to switch to the HTML view.
    Paste the HTML code for your table into the post.
    Once you’ve added the code, switch back to the “Compose” view to see how the table will appear in your post.

    Just Copy the code in order to activate TOC in your Blog post or article, while writing a new post switch to "HTML" mode and then paste the below code just after the first paragraph or before your first heading tag.

    <div class="mbtTOC">
    <button onclick="mbtToggle()">Contents</button>
    <ol id="mbtTOC"></ol>

    Active and Run TOC in a blog post
    To active, the TOC plugin pastes the below Javascript code after the end of your post.
    Hit the Publish Button and Boom! TOC has been created successfully.



    Adding an automatic table of contents to your Blogger post can greatly improve the user experience for your readers, increase engagement, and better organize your content. By following the steps outlined in this article, you can easily add a TOC to your posts and make your blog even more user-friendly.

    Impact-Site-Verification: -267805575