LAST UPDATED: October 2023
This tutorial is about how to create a simple Table of Contents for Blogger sites.
Yes, I think a simple yet functional table of contents is suffice.
You don't need to have a fancy-looking table of content.
For me, I believe the function is more important than the form or design.
It has to serve its main purpose of a table of contents.
Basically it tells your readers what this article or blog post is all about.
It breaks down the whole long content in sub-titles, so the readers can immediately go to any of the section which he can read right away.
Just take a closer look at the popular site Wikipedia.
You can see that Wikipedia table of contents is simple and useful.
RELATED: How To Add Jump Links In Blogger Like Wikipedia
Other established sites that use simple table of content include Yoast and AhrefsBlog.
This is what I mean by a simple table of contents.
When you click on any of the sub-titles, it will jump right to the part of the content which you want to read.
No frill and no fuss.
As an example, I have created a very simple table of contents as shown below.
How To Create A Simple Table Of Contents For Blogger
Click on the list of sub-titles to see how it works.
Table Of Contents:
- What Is A Table Of Contents
- Why Is A Table Of Contents Is Important
- How To Create A Simple Table Of Contents For Blogger
What Is A Table Of Contents
The table of contents (TOC) is the roadmap to each section of the content.
It is a list of important sub-subtitles within a piece of text or video.
You can find it before the start of magazines, books, websites and even video clips.
With a click of your mouse, you go directly to the very chapter of the book, sub-content of a long blog post or a new song from song list as found in YouTube.Why Is A Table Of Contents Is Important
The TOC improves the usability of a content.
Basically it provides the readers with a quick navigation to the content they are searching for.
It’s also easier for the readers or viewers to understand what the information you have in your article or video clip.
With this table list, they can quickly hop over to sections of their interest immediately.
As for SEO (search engine optimization), it may help you to rank for your target keywords, particularly the long-tail words in the subheadings.
How To Create A Simple Table Of Contents For Blogger
There are two things you need to do:
- Create The Content Sub-Titles
- Add The Anchor Links (also called Jump Links or In-Page Links)
1. Create The Content Sub-Titles
You already have your list of sub-titles for your table of contents in hand.
To add your TOC into your long blog post, this is what you do:
1. Go to the place on your blog post where you want to add the table of contents.
2. Click on it.
3. Next go to the post editor toolbar.
4. If the toolbar does not show its full list of functions, click on the row of three dots.
5. Then click on either "Bulleted list" or "Numbered list".
6. As for my example above, I use the Bulleted list.
7. If you use Numbered list, it will look like this:
- What Is A Table Of Contents
- Why Is A Table Of Contents Is Important
- How To Create A Simple Table Of Contents For Blogger
2. Add The Anchor Links
There are two areas where you have to add a simple line of code.
This part can a bit confusing.
Follow carefully, so you do not do it the other way round.
The FIRST CODE is for the subtitles at the Table of Contents list.
This is where you click on the hypertext and it will jump to specific content.
The SECOND CODE is for the section of the content where you want the the link to jump to.
FIRST CODE:
1. Click on the "HTML view".
2. Locate the first sub-title of the table of content.
3. This is the code to add between the sub-title.
4. As for my table of contents example above, the code for the anchor text looks like this:
<a href="#table of contents">What Is A Table Of Contents</a>
SECOND CODE:
1. Now you need to add the second code at the beginning of the part of the content which you want the link (with the first code) to jump to.
2. For my table of contents example above, the second code looks like this:
<div id="table of contents">What Is a Table Of Contents</div>
NOTE: The anchor text "table of contents" must match the code at the sub-title.
It means the anchor text of the First Code must be the same as the Second code (highlighted in yellow). See below:
First Code: <a href="#table of contents">
Second Code: <div id="table of contents">Furthermore the anchor names are case-sensitive, so be sure the capitalization used matches the anchor's name.
In other words, if you use a small capital for the first code, then the second code must also be of a small capital.
3. After you have added the necessary code to the anchor text, click the "Publish" button.
That's all you need to do.
This is one easy way to create a simple workable table of contents for your Blogger site.