Add Table of Contents in blog Using custom HTML & CSS

Here is an example of some HTML and CSS code that will create a table of contents for a blog post. This method requires adding anchor links to your headings and then creating a list of links to those anchors in a separate section of the post.

HTML

<div class="table-of-contents">
  <h2>Table of Contents</h2>
  <ul>
    <li><a href="#heading-1">Heading 1</a></li>
    <li><a href="#heading-2">Heading 2</a></li>
    <li><a href="#heading-3">Heading 3</a></li>
    <!-- Add more list items for additional headings -->
  </ul>
</div>

<!-- Add an id to the headings you want to link to in the TOC -->
<h2 id="heading-1">Heading 1</h2>
<p>Content for heading 1</p>

<h2 id="heading-2">Heading 2</h2>
<p>Content for heading 2</p>

<h2 id="heading-3">Heading 3</h2>
<p>Content for heading 3</p>

CSS

.table-of-contents {
    border: 1px solid #ccc;
    padding: 10px;
}

.table-of-contents ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

This code creates a div element with a class of “table-of-contents” that contains a heading “Table of Contents” and an unordered list of links to the different headings on the page. Each heading in the content section of the post has an id attribute that corresponds to the href attribute of the corresponding link in the TOC.

The CSS styles the table-of-contents class with a border and some padding. Additionally, it styles the unordered list, remove the bullet point and reset the padding and margin.

You can add this code to your website by adding the HTML code in your blog post, and the CSS code in the Additional CSS section of your website.

Please note that this is just an example of how to create a table of contents using HTML and CSS, it may vary based on the context of your website and the specific requirements of your project. You can also customize the design and layout to fit your website and design.

It’s important to note that, this method requires manual work, updating the TOC each time you update the headings or add new headings in the blog post, so you may want to consider using a plugin or another method if you will frequently update your blog post.