HOW TO ADD TABLE OF CONTENT TO WEBSITE
INTRODUCTION
There are numerous things to take into account when building a good website. The way that material is organized is a crucial component of website design. It should be simple for website visitors to traverse your sites and obtain the information they require. Including a table of contents on your website is one approach to better organize the content there. This post will explain the value of a table of contents and show you how to add one to your Blogger website.
Reasons to Including a Table of Contents on Your Website
A website's table of contents is a crucial tool for content organization. Instead of scrolling through the full article or page, it enables readers to swiftly access particular areas of the material. The user experience can be enhanced by adding a table of contents, which will make your website more accessible and user-friendly.
Improved SEO is another advantage of including a table of topics on your website. When ranking your website, search engines like Google take the organization of your material into consideration. You can improve your rating by having a table of contents since it makes it simpler for search engines to understand the organization of your material.
Read Also: How To Add Lazy Load To Your Website
How to Include a Table of Contents on Your Blogger Website
The advantages of a table of contents have now been covered, so let's go over how to add one to your Blogger website.
Step 1: Adding The Script For The Table Of content To your website
Add the script to your website as the first step in adding a table of contents. Here are the steps to accomplish this:
1. Log in to your Blogger account and select the blog you want to add the table of contents to.
2. Click on "Theme" in the left-hand menu, then select "Edit HTML".
3. In the HTML code, search for the tag "<head>".
4. Paste the following code just below the "<head>" tag:
<script src='https://cdn.rawgit.com/ghinda/jekyll-toc/master/src/toc.js'></script> <link rel='stylesheet' href='https://cdn.rawgit.com/ghinda/jekyll-toc/master/src/toc.css'>5. Click "Save theme" to save the changes.
The next step is to create the table of contents. To do this, follow these steps:
1. Open the blog post that you want to add the table of contents to.
2. In the HTML editor, place your cursor where you want the table of contents to appear.
3. Type the following code:
<div id="toc"></div>
4. Save the changes.
Step 3: Style the Table Of Content Button
Now the third step is to style the button that will show the table of contents. To do this, follow these steps:
1. In the HTML editor, add the following code just above the "<div id='toc'>" tag:
<button id="toc-button" onclick="toggleToc()">Table of Contents</button>2. Save the changes.
3. Open the CSS editor and add the following code:
#toc-button { display: block; margin-bottom: 20px; background-color: #0077cc; color: #fff; border: none; border-radius: 4px; padding: 10px; font-size: 16px; cursor: pointer; } #toc { display: none; margin-top: 20px; } .toc-level-1 { font-weight: bold; margin-left: 0; } .toc-level-2 { margin-left: 20px; } .toc-level-3 { margin-left: 40px; } .toc-level-4 { margin-left: 60px; } .toc-level-5 { margin-left: 80px; } .toc-level-6 { margin-left: 100px; }
Step 4: Add the Button to Your Blog Posts
1. Open the blog post that you added the table of contents to.
2. Place your cursor where you want the button to appear.
3. Type the following code:
<button id="toc-button" onclick="toggleToc()">Table of Contents</button>4. Save the changes.
Read Also: How To Add A Code Box To Your Website
Final Verdict (MY Conclusion)
Your Blogger website's material can be better organized and more user-friendly by including a table of contents. You can quickly add a table of contents to your website and enhance the user experience for your visitors by following the instructions provided in this article. To make the table of contents as helpful as possible, keep in mind to style the button to make it more appealing and useful for your visitors. You should also use headings consistently throughout your content. By doing this, you can make your website more user-friendly and SEO-friendly while also facilitating rapid and simple information discovery for your users.