How to Make a TABLE OF CONTENTS in Your KAJABI Blog Post

If you've been using Kajabi for any amount of time, you know that one of its powerful features is the ability to create online courses. And you also know that you can use Kajabi to create your blog content? If you're like me, you've moved your blog from WordPress to Kajabi and now you're looking for ways to make your Kajabi content look and feel more professional just like it did in WordPress.

The sad part is that we don't get to use all the fancy WordPress plugins. So as I find solutions to the things I want to do, I share them with you. And Google loves table of contents. And I do too because sometimes you find yourself looking at a long blog post and wondering where to start. Well, your readers are thinking the same thing.

Wouldn't it be nice if there was an easy way to create a table of contents that would take your readers right to the section they want to read? Well, there is! In this blog post, I'll show you how to make a table of contents in Kajabi. It's really easy - Yes there's some coding, but I got you. Let me show you how it's done.

Styling your Table of Contents table using CSS

Just like the video. Let's start with the easy part first. You can find that section of the video here: 00:01:52.

Below, you will find the CSS code.

Anything in red you can change to your preference. If you are not familiar with CSS coding, I suggest leaving it as-is to see what the style looks like and then one-by-one changing certain elements until you get what you like.

/* Table of Contents CSS */

#toc_container {
background: #F3F5F7 none repeat scroll 0 0;
border: 1px solid #aaa;
display: table;
font-size: 14px;
margin-bottom: 1em;
padding: 20px;
width: auto;
}

.toc_title {
font-weight: 700;
text-align: left;
}

#toc_container li, #toc_container ul, #toc_container ul li{
list-style: outside none none !important;
}

Create your Table of Contents

The coding shared below is slightly different than the one I shared in the video. Why?

Because the coding I choose below will look neater and easier to find in the source code < >.

Anything in red you can change to your preference. If you are not familiar with HTML coding, I suggest leaving the code as-is because it's not going to hurt anything to leave it. I tried to make this as easy to follow as possible.

Where you see the color blue, this is the title of your subheadings (aka your H2 headings). Change the appropriate subheadings so that they match the headings in the table of contents container and in the body of your blog post.

Again, if you're not familiar with HTML coding or don't have a preference, just leave the text in orange as-is. 

NOTE: Copy the code and paste it into a Google Doc or MS Word doc first. This will get rid of any extra coding that may latch onto code if you copied it from this blog post. Update the code. And then paste it into the source code directly. Do not paste the code into the blog post itself. 

The coding below is for your Table of Contents.

<div id="toc_container">
<p class="toc_title">Table of Contents</p>
<ul>
<li><a href="#subhead1">Sub-Heading 1</a></li>
<li><a href="#subhead2">Sub-Heading 2</a></li>
<li><a href="#subhead3">Sub-Heading 3</a></li>
<li><a href="#subhead4">Sub-Heading 4</a></li>
<li><a href="#subhead5">Sub-Heading 5</a></li>
<li><a href="#subhead6">Sub-Heading 6</a></li>
<li><a href="#subhead7">Sub-Heading 7</a></li>
<li><a href="#conclusion">Conclusion/CTA</a></li>
</ul>
</div>

For Example:

To create my table of contents with three subheadings, I would turn the code to the left into the code to the right.

REMEMBER: Copy the code and paste it into a Google Doc or MS Word doc first. This will get rid of any extra coding that may latch onto code if you copied it from this blog post. Update the code. And then paste it into the source code directly. Do not paste the code into the blog post itself.  

HTML Coding for the Anchored Headings

Below, you will find the HTML code for your headings. Anything in orange you can change to your preference. If you are not familiar with HTML coding, I suggest leaving the code as-is.

The coding below is for your H2 Headings that are within the body of your blog post.

Where you see the color blue, this is the title of your subheadings.

It may be easier to create your headings as normal and then go back and add the special anchor codes. If you're not familiar with HTML coding or don't have a preference, just leave the text in orange as-is.

<h2 id="subhead1">Sub-Header 1</h2>
<h2 id="subhead2">Sub-Header 2</h2>
<h2 id="subhead3">Sub-Header 3</h2>
<h2 id="subhead4">Sub-Header 4</h2>
<h2 id="subhead5">Sub-Header 5</h2>
<h2 id="subhead6">Sub-Header 6</h2>
<h2 id="subhead7">Sub-Header 7</h2>
<h2 id="conclusion">Conclusion/CTA</h2>

The anchor text (aka the text in orange above) must match the text in your Table of Contents code. 

For Example:

The link in your Table of Contents...

<li><a href="#subhead1">Sub-Heading 1</a></li>

Must match the code in your heading...

<h2 id="subhead1">Sub-Header 1</h2>

All 3 Codings Neatly Together

Ugh! 🥴 All these codes and text, are likely to give you a headache. Here are all these codes neatly together below.

Code 1: CSS Styling.

/* Table of Contents CSS */

#toc_container {
background: #F3F5F7 none repeat scroll 0 0;
border: 1px solid #aaa;
display: table;
font-size: 14px;
margin-bottom: 1em;
padding: 20px;
width: auto;
}

.toc_title {
font-weight: 700;
text-align: left;
}

#toc_container li, #toc_container ul, #toc_container ul li{
list-style: outside none none !important;
}

Code 2: Create your linked Table of Contents

<div id="toc_container">
<p class="toc_title">Table of Contents</p>
<ul>
<li><a href="#subhead1">Sub-Heading 1</a></li>
<li><a href="#subhead2">Sub-Heading 2</a></li>
<li><a href="#subhead3">Sub-Heading 3</a></li>
<li><a href="#subhead4">Sub-Heading 4</a></li>
<li><a href="#subhead5">Sub-Heading 5</a></li>
<li><a href="#subhead6">Sub-Heading 6</a></li>
<li><a href="#subhead7">Sub-Heading 7</a></li>
<li><a href="#conclusion">Conclusion/CTA</a></li>
</ul>
</div>

Code 3: Create your Anchored Headings.

<h2 id="subhead1">Sub-Header 1</h2>
<h2 id="subhead2">Sub-Header 2</h2>
<h2 id="subhead3">Sub-Header 3</h2>
<h2 id="subhead4">Sub-Header 4</h2>
<h2 id="subhead5">Sub-Header 5</h2>
<h2 id="subhead6">Sub-Header 6</h2>
<h2 id="subhead7">Sub-Header 7</h2>
<h2 id="conclusion">Conclusion/CTA</h2>

Can I Feature You?

I hope you found this blog post, along with the YouTube video easy to follow and very helpful!

Constructing a table of contents for your Kajabi Site using HTML and CSS is not only a practical skill but also an invaluable asset for enhancing user navigation and overall experience.

By organizing content systematically, highlighting important sections, and offering readers basically a roadmap, you ensure that your audience can easily find the information they seek.

Plus Google loves it, so why not!

By taking the steps outlined in this blog, you are well on your way to creating a more organized, user-friendly website😉👍

By the way, I would love to feature some blog posts that have a Table of Contents inspired by this blog post. I would add sections to this post sharing your Table of Contents, and would love to see how you use the CSS to style your TOC!

Just fill out the form below and I may create a screenshot of your TOC and link the image back to your blog post.