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?
Introduction
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
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 "Theme" Option and click on "Three Dots" and 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'>
//<![CDATA[
//*************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';}}
//]]>
</script>
Now find the ]]></b:skin> and paste the following CSS code just above ]]></b:skin> line.
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>
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.
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.
<div class="mbtTOC">
<button onclick="mbtToggle()">Contents</button>
<ol id="mbtTOC"></ol>
</div>
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.
Hit the Publish Button and Boom! TOC has been created successfully.
<script>mbtTOC();</script>
Conclusion
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.
