How To Create WordPress Like Table Of Content In Blogger (After First Paragraph)

table of content for blogger blog

In this post, you are going to learn how to automatically create Blogger Table of Content widget after the first paragraph in your blogspot blog just like WordPress users.

As your blogger blog post length start to exceed the 1000 words mark, there might come the need to add skip to next paragraph in each post to enable easy navigation. This brings up the concept of Table Of Content widget for blogspot blogs.

table of content for blogger blog

An easy and automatic way to divide your blog post into sections using important subheadings (h2,h3,h4 etc). TOC widget for BlogSpot enables visitors to quickly navigate from one paragraph (topic) of your blog post to another.

To archive this on your blog, this post will explain how to automatically display SEO friendly Blogger Table Of Content widget after the first paragraph.

Blogger Table of Content widget can also be shown in the following areas.

  1. Below the first paragraph
  2. Above the first image
  3. Manually add inside post content using post editor.
  4. Sidebar etc.

Why Display Table Of Content After First Paragraph?

The TOC widget is most visible and accessible at the top of the main content. Most times the first paragraph is used as an introduction to the main widget.

Therefore placing an easy navigation section immediately after the introduction is more user-friendly and encouraged.

In the next few words, let’s get a better understanding of the TOC widget, usage, when not to use and best practices.

Table Of Content Widget For Blogger Blog

Table Of Content (TOC) widget for blogger blogs is a unique blogspot post navigation widget created to help you enhance your blog by optimizing the title structure and google understanding of each blog post.

The TOC widget is a simple display of the relevant section of a page/web-page acting as a navigation toolkit using appropriate titles with a link attached to each.

TOC widget is common among big sites such as Wikipedia, With such a widget you can easily move from one paragraph to another without long scroll down. No wonder google have started showing such links on its search page.

Table Of Content Good For SEO or Not?

Search Engine Optimization is your ability to satisfy your blog users while satisfying google. Using a Table Of Content can help increase your search engine ranking value. How?

Blogs with better structure are easier understood and better indexed than others. A table of content widget makes it easy for Google, Bing etc to identify the different sections and subtitles of your blog post.

This can go a long way to make your page indexing faster and also can increase your click-through rate (CTR). In a nutshell, let’s see benefits of using Table of Content.

Advantages Of Table Of Content Widget

  1. Easy Navigation through blog post
  2. Attractive title links shown below post when indexed
  3. Factor for Adsense Approval
  4. Overall increase in search ranking

1. Easy Navigation through blog post

The main function of the TOC widget is to enable easy navigation through a webpage. This it does by listing out all the titles (h2,h3,h4 etc) in a blog post in a list manner as shown below.

Doing so, users can then click on any title and the page will scroll down to the section the user wishes to read. If you have a lot of lengthy posts, this surely will improve your blog’s user-friendliness.

2. Attractive Title HyperLinks Displayed Below Post On Search Results

A blogger’s optimum go is to increase search CTR, this Blogger Table of Content widget can help achieve. Using the TOC widget for blogspot, Google, Bing etc will find it easy to understand all the sections of your content and display most relevant page title below the post title.

When a user searches for a query that matches one of the titles in your blog post as shown below, Google will display a skip to paragraph option below the main title.

jump to paragraph table of content widget

Aside from that, If your post (page) has a high PA, DA and meets other criteria, Google displays all the most used/important title leading to sections on the search page.

When a user clicks on any of the hyperlinked titles, such user will be redirected to that exact section in your blog post. Good for a tutorial and educational website with many title tags.

table of content widget for blogspot

3. Factor For AdSense Approval

If you are still battling to get Google AdSense Approval. A table of Content can increase the probability of getting approved.

AdSense love quality content with a sense of good user experience. And have always penalized for poor content navigation. Because AdSense expects your blog content to be easily navigated.

Using the Table Of Content for blogspot blogger, help make your blog post quickly navigatable which can increase your probability of getting approved.

4. Overall increase in search ranking

Indexed pages with high CTR shows itself to Google as relevant. Table of Content widget for blogger, with it,’s hyperlinks indexed, will increase your blog post’s CTR.

Thereby making it relevant to Google, this will make google increase that page’s search ranking.

Check out Demo here

How To Automatically Show Table Of Content Widget After First Paragraph In Blogger Blogs

Step 1 – Visit Blogger.com Dashboard >> Themes >> Backup your theme (learn how to backup your theme) >> And Go to Edit HTML

Step 2 – Using CTRL + F, Search for </head>, Just above the </head> tag, paste the below code.

Step 3 – Search for ]]></b:skin>. Just above it, Paste the below code.

 

Step 4. Now Search for <data:post.body/> (Note: You will find two occurrences of this code, we are using the second one). Replace the second one with the below code.

 

Code Customization.

Font – This widget makes use of Oswald font if you wish to remove it, Go to Step 2 – delete the first line (<link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’/>) and go to Step 3 – Search for all instants of Oswald and replace it with inherit to use your default font or replace it with the font of your choice.

You can also learn how to optimize Google fonts for faster loading.

Content – To change the text that is shown as the header in the widget, Simply go to Step 4 and replace Content with the text of your choice.

For more customizations, leave a request in the comment section, I will respond to you.

Step 5 – Save your theme.

Codes & Widget Credits

In this post, I made use of the TOC widget which was created by MyBloggerTricks in his “Create Table Of Contents (TOC) With Multi-level“. I modified the widget and made it show automatically after the first paragraph.

Also while doing the modification I made use of the code which HelpBlogger used in his “Insert Adsense Inside Posts: After the first paragraph“. Much appreciation to these two resources that helped make this widget a come true.

Summary

Blogger Table Of Content widget is a must use for bloggers hoping to make their site’s SEO more powerful and also make their blog user-friendly.

In case you face any problem while enabling this widget, feel free to comment below and I will respond to you. If you wish to republish this article, do so but add a credit and authorship link back to this blog.

Happy blogging.

Related Articles

  • Download Free Linda Ikeji’s Blog Blogger Template
  • Blogger Recent Post Widget With Home, Next And Previous Option
  • How To Design Professional Blogger Template
  • Masign Free Responsive Material Design Blogger Template
  • Good News – We are Re-Branding
  • Introducing BloggingPrince CSS Compression Tool – Speed Up Your Blog
  • 20 Comments - Post Yours! How to? ▼

    1. Entclass Blog says:

      This worked for me like charm. Thanks for this post. Really made my day.

      Demo: Entclass.com.ng

    2. Michael Festus says:

      Worked perfectly. Thanks for sharing

      Love from Nerdyrockson.co

    3. WOW, This is really indeed a nice post you got here prince
      am gonna check it out on my blog as soon as possible.

      thanks for sharing, have a great day.

    4. Bello Azeez Taiwo says:

      I have added the script and the css according but , it isn’t showing in my blog..

    5. dayorobbin says:

      working perfectly Techfashy official

    6. Cool blogger says:

      It worked thanks bro but nothing is showing under my content how do I fix that?

    7. Cool blogger says:

      Thanks, please what do you recommend I do precisely pls?

    8. Cool blogger says:

      Thanks bro, it worked perfectly

    9. John Markus says:

      Hello there,

      when i click on hide button of TOC it doesn’t work and TOC don’t hide please help

    Leave a Reply

    134 Shares
    Share35
    +1
    Tweet
    Pin3
    Share
    Stumble96