Blogger

How to add “Table of Content” in Blogger/Blogspot?

Do you want to rank your blog in Google and other search engines? Or want to show your website in Google's Featured Snippet Search. If YES!!! then this post is only for you? Here, I will show you how can you achieve these results? and how you can add the Table of content in Blogger and Blogspot?

Yes, I agree that Content is King! But do you know that SEO is the queen of that king? so the main point is Content and SEO both are the primary ways, that can help in ranking for your blog.

and… TABLE OF CONTENT is also an important part of Content Writing and SEO. Whenever you purchase a book, you will check the table of content of the book. Just like you… Google and Blog Readers is always checking for Table of content in every blog.

What is the Table of Content (TOC)?

Table of Content (TOC) is a list of topics and subtopics covered in the blog post with title and topic's link on the same page, usually found in the starting of the blog or before the first heading and title of the blog and article. If you click on any link of the table of content, it will send/jump to a specific section or topic.

Why Table of Content is Important and What is Google's Featured Snippet Post?

Table of content is a great way to show all covered topics in the blog, is also helping Google to understand your blog and show your result in Google's Featured Snippet Results.

What is Google's Featured Snippet?

Featured snippets are special boxes where the format of regular listings is reversed, showing the descriptive snippet first.

Featured snippets come from web search listings. Google automated systems look at the web listings and determine if it would be useful to highlight one of them. They are especially likely to appear for searches that are phrased in the form of a question.

So here is the answer to the most awaited question.

How to add “Table of Content” in Blogger/Blogspot?

In WordPress, there are many plugins available to add Table of Contents to posts, with the help of these plugins, you can easily create a table of contents for WordPress but on Blogger platform, you have to use HTML to create Table of Content(TOC).

To create a table of contents, you do not need a lot of HTML knowledge. You can easily add a table of contents to your posts even if you know a little bit basic of HTML.

If you do not any knowledge of HTML, NO MATTER because if you follow this post well, you can easily add TOC to your post. We can also add a table of content manually, but its a very time-consuming task.

But as I told you most of the time, only the long posts require a table of contents, so do not waste your time by adding TOC in short post and add the table of contents to long posts so that readers can get good reading experience.

Before we start customization and coding, please save the backup of your template, as if something goes wrong, you will always have to option to restore the old version. Let's Get Started.

Follow the below steps to add Table of content in your Blogger and Blogspot post automatically:

Step 1. Log in to your Blogger blog and click on Theme > Edit HTML

Step 2.  Search </head> tag and Paste below HTML Code above the </head> tag

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><script type='text/javascript'>
//<![CDATA[
//*************Table of Content (TOC) plugin by anantvijaysoni.in
function avsTOC() {var avsTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);avsTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("avsTOC").innerHTML += avsTOC;}}function avsToggle() {var avs = document.getElementById('avsTOC');if (avs .style.display === 'none') {avs .style.display = 'block';} else {avs .style.display = 'none';}}
//]]>
</script>

Step 3. Next, Search for ]]></b:skin> Code and Paste Below CSS Code before ]]></b:skin>, Just like below Image

.avsTOC{border:5px solid #EE5535;
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%;}
.avsTOC ol,.avsTOC ul {margin:0;padding:0;}
.avsTOC ul {list-style:none;}
.avsTOC ol li,.avsTOC ul li {padding:15px 0 0;
margin:0 0 0 30px;font-size:15px;}
.avsTOC a{color:#EE5535;text-decoration:none;}
.avsTOC a:hover{text-decoration:underline; }
.avsTOC 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;}
.avsTOC button:after{content: "\f0dc";
font-family:FontAwesome; position:relative;
left:10px; font-size:20px;}

You can make some Customization in Table of Content, Depends on your Blogger Color Combinations:

  • To change the background color of Table of Content box edit #FFFFE0
  • To change the border color of Table of Content box edit #EE5535
  • To change the font color of Table of Content headline text edit #707037
  • To change anchor link color of Table of Content edit #0080ff
  • To change the font size of anchor links edit 15px
  • To change the font size of Table of Content Headline text edit 20px

Step 4. Now, Search for <data:post.body/> and replace it with the code below

<div id="post-toc"><data:post.body/></div>

Step 5. Save the template and you are all done!

Show Table of Content in Blogger Post

Whenever you want to show the Table of content in any specific post. You need to Add below code, You can add before and after the first Heading tag like <h2> tag. Please follow the below steps:

Step 1. Choose the Table of content Box Location

Best place to show the Table of content is before the First H2 Tag. You can change as per your choice.

Go to the specific blog post to add TOC, Switch from Compose to HTML.

<div class="avsTOC"> <button >Contents</button> <ol id="avsTOC"></ol> </div>

Step 2. Add below code at the end of the Blog

<script>avsTOC();</script></div>


Last and Final: Publish Your Post and See the Magic.

You will see the Table of Content Just like the Below Image:

If you like the post, Please like and share the post with your blogger friends.

Read More:

This post was published on June 29, 2019 10:00 AM

Anant Vijay Soni

A passionate blogger and serial youtuber, timely efforts, and dedication are the key protocols that keep me succeeding. I love to share information about WordPress, SEO, Social Media Marketing, Affiliate Marketing, Make Money Online, Email Marketing and much more.

Leave a Comment

View Comments

  • Unleash your online potential with an array of free web tools! 🌐✨ Elevate your digital game without spending a dime. Explore a world of possibilities and revolutionize your virtual toolkit today. From productivity to creativity, it's all here. Don't miss out! 🚀🛠️ #FreeWebTools

  • Your writing style is flawless. I am really impressed with your writing style. Keep it up thank you for sharing very useful content writing it's very informative.

  • Thank you so much for giving such an great Content with us. It is very unique and informational. Keep sharing
    Hey I am Nagaraju from Hyderabad. I am Digital Marketing Manager at Digital Operate Private Limited

  • This is an excellent article! Thank you very much for sharing this fantastic knowledge with us.

    • Hi Qais, Code is 100% Working perfectly. Please let me know what issue you are facing?

Share
Published by

Recent Posts

  • Artificial Intelligence (AI)

The Impact of Artificial Intelligence on Digital Marketing Strategies

In the digital marketing world, Artificial Intelligence (AI) has emerged as a game-changer, reshaping how… Read More

October 18, 2024
  • Social Media Marketing

10 Best Free Face Swap (Deepfake) Online for Videos and Images

Best tools that manipulate images and videos have become increasingly popular, and face-swapping is one… Read More

September 12, 2024
  • Digital Marketing

AI-Enhanced Video Content: The Next Frontier in Digital Marketing

What if you could create video content that perfectly aligns with your audience's preferences and… Read More

August 30, 2024
  • Video Tutorials

Earn FREE $100 – $500 Per Day with This Secret Strategy 2024

Hi Friends, Today I am going to share an Secret Strategy that will help you… Read More

August 28, 2024
  • Affiliate Marketing

7 Ways To Promote Affiliate Links And Get Results

Who doesn't love the sweet sound of passive income rolling in? The thought of recommending… Read More

August 25, 2024
  • Payment Gateway

10 Best Payment Gateways in India (2024)

For any digital business, having a reliable payment gateway is crucial for businesses of all… Read More

August 22, 2024