How To Add Table Of Contents In Blogger (Like WordPress)

How To Add Table Of Contents In Blogger (Like WordPress)

In this Tutorial, I am going to show you how to Table Of Contents in Blogger post like WordPress so that your blog becomes Mobile friendly, SEO friendly and User friendly. 


{tocify} $title={Table of Contents}

Installing TOC Plugin

Step 1 - Downloading Code Files

Download zip file from the link given below and extract it to get five codes.

{getButton} $text={Download} $icon={download} $color={#FF0035}

Step 2

Open all the five codes in Notepad++.

Step 3 - Setting TOC plugin

Go to your Blogger Dashboard.

Step 4

Go to 'Theme' section.

Step 5

Click on Drop Down button.

Step 6

Click on 'Edit HTML' Option.

Step 7

Once the HTML gets fully loaded, click once anywhere on the HTML.

Step 8

Press 'Ctrl' + 'F' buttons from your keyboard at the same time to get a search box.

Step 9 - Adding 1ˢᵗ code

Search </head> And copy the 1ˢᵗ code and paste it above </head>

Step 10 - Adding 2ⁿᵈ code

Search all 

<div class='post-body post-content'> 

OR 

<div class='post-body entry-content'> 

And copy the 2ⁿᵈ code And give a ID (id='post-body') to the div tags to make them 

<div class='post-body post-content' id='post-body'

OR 

<div class='post-body entry-content' id='post-body'>

Step 11 - Adding 3ʳᵈ code

Search ]]></b:skin> And copy the 3ʳᵈ code and paste it above ]]></b:skin>

Step 12 - Adding 4ᵗʰ code

Search </body> And copy the 4ᵗʰ code and paste it above </body>

How To Add Table Of Contents In Blogger (Like WordPress)

Adding TOC in Blog

Step 1

Go Back to Blogger Dashboard.

Step 2

Go to 'Posts' section.

Step 3

Click on the Desired Post to add Table of Contents.

Step 4

Make sure you are in the 'Compose' mode of the post.

Step 5 - Adding 5ᵗʰ code

Copy the 5ᵗʰ code and paste it in your Desired place of the post.

Step 6

Select the whole 5ᵗʰ code And make it bold.

Step 7 - Successfully Added TOC

Click on 'Update' post button and View your blog.

Congrats! we have successfully added the Table of Contents.

Note: 

If your Blog's Menu Button or any other function stops working properly, then follow these steps:{alertWarning}

Steps to Solve Menu Problem

Step 1

Go Back to your Blogger Dashboard.

Step 2

Go to 'Theme' section.

Step 3

Click on Drop Down button.

Step 4

Click on 'Edit HTML' Option.

Step 5

Once the HTML gets fully loaded, click once anywhere on the HTML.

Step 6

Press 'Ctrl' + 'F' buttons from your keyboard at the same time to get a search box.

Step 7

Search </body> And look for the 4ᵗʰ code. If you find the 4ᵗʰ code, select it and delete it.

Step 8

Search main script And again Copy the 4ᵗʰ code and paste it above main script of the theme.

Note:
If you can't find main script, search copyright which shows Theme Developer Attribution that must be located at the footer of the Theme code.

If you get the text copyright, just scroll down slowly to find the main script.

OR 

If you can't find copyright, search </body> that must be located at the last of the Theme code.

If you get the text </body>, just scroll up slowly to find the main script.{alertInfo}


Step 9

Click on 'Save' theme button.

Step 10

Check your Blog.

Congrats! we have successfully solved the problem and added table of contents.

Watch This Video to Learn Visually


Thanks for visiting!

*

Post a Comment (0)
Previous Post Next Post