In previous post I introduced with Table of Contents and its advantages. In this post I will discuss 3 best way to implement these Contents in your blogger blog post. Remember this tutorial is made especially for Blogspot post but not for sitemap. You can directly generate sitemap page using a quick google search. I advise you to go with this online app.
I would like to skip intro for the actual tutorial. Remember to add your alternate suggestion in comment section.
How to Insert Table of Contents in Blogger Blog Post?
As I already stated that there are 3 ways to do so. However each of them has their own advantage and limitations. As blogger is not an absolute suite and made entirely of HTML5 and xHTML. In order to create content table in blogger post you should have basic HTML knowledge. Or will to f*** (mess) with your code.
Second, make sure to use Notepad ++ or MS Word in order to write post. Blogger post editor insert unnecessary HTML tags while writing. So better ignore it for a while. Insert images after generating your SEO friendly code.
So, are you read to start? Let’s follow the guide.
HTML Table of Contents Generator by Code Project
This tool is made by Andrew Peace and hosted on Code Project. This table of contents tool is not made for Blogger in any mean and it works simply for HTML. But, we can hack it for using it for our purpose. Right?
Yeah. There are two ways of doing so.
- First, if you plan to insert ToC in your old blog posts. Make sure to visit your blog post URL and copy down the entire content. Like this.
- Insert the appropriate heading tags where necessary. If you have inserted any special div, make sure to put those on the appropriate placement. Our motive here is to create a clean HTML content.
- Copy the image tags and insert on the proper placement.
- Insert the below tag to the location where you want your index to be displayed. This program required the below tag in order to generate new HTML code.
<!-- INSERT contents -->
- Save this file in Desktop with extension .HTML.
- Download this tool from codeproject. Use this link to download. Unzip it and put in your desktop folder.
- Double click to open it.
- Browse the file which you just saved in File to Process.
- For Output File, click on browse and enter a file name. Like, newblogpost.
- Click Option in case you want to make any change. This section is self explanatory which you can try by yourself.
- Click on build to generate your code.
Now. Right click on your newblogpost.html file and click “Edit”. Copy the entire code and paste it into your Blogger post editor. Click on preview to see is everything as required or not.
Update the post and here is your new SEO and viewer friendly post.
Automatic Table of Contents by CSS Tricks
Thanks to Chris Coyier of CSS tricks to bring this amazing free code for us. Automatic Table of Contents jquery plugin requires a bit of installation to work. As this coding is his citated work. I would not like to make any change and use it as it is. This simple jquery coding automatically generate table – of – contents in html web page.
Honestly, this would be a hell lot easier to implement in your blog post than previous one. ‘
- Visit CSS Tricks and scroll down to the example.
- Head back to the script page. From JS section, copy down the entire content and paste it in Google Keep.
- Open you blogger and head to Theme. Click on Edit Theme.
- Now in your Theme editor, hit CTRL + F and search for /body. Add below code just above the /body and paste the JS content between both tags.
- Click on Save theme. You are half way through the job.
- Open your post where you want to place indexing.
- Click on HTML. Add the <article> tag just below
<div dir=”ltr” style=”text-align: left;” trbidi=”on”>
and <div class=”all-questions”> where you want your index to be displayed.
Make sure to add </article> and </div> just below the end </div> tag. This will end the open tags.
- Browse your heading tags. For the very first heading add this parameter id=”one” for second user id=”two” and so on.
- Make sure there would be no empty headings created automatically.
- Click on update and preview your post.
For a perfect example. Check this post.
Using the Pure HTML Code
The third and my favorite way to put it in blogger is using Table of Contents Plus source code (here). Don’t be afraid buddy, this WordPress plugin is open source and you can utilize its code for your own purpose.
Even though it just a piece of code using anchor tag for navigation. It give you the freedom to create sub headings. And it allow customization.
But,, it is complicated for newbie. Or those who are new to blogger editor indeed. Anyway, let’s head to the tutorial.
- Copy down the entire HTML post into Notepad ++.
- Copy down the HTML coding from codepen.
- Paste the code where you want it to display.
- Now you need to notice two things. First, the URL. URL will be your post URL which will be the same for all list items.
Second, ID. You can create id as simple as ID1, ID2, ID3 or list_item_1. Which ever you prefer.
- Now head to your notepad ++ and search for heading text. Enclose your heading between below code.
<span id=”list_item_1″> … </span>
For eg –
<h3><span id="list_item_1">1. First Item</span></h3>
- Remember, the id here must be as same as previous coding.
- Update your post and preview it.
Blogger uses URL parameter when view in mobile. In case your URL is something like http://www.example.com/example-page. In mobile view it would be http://www.example.com/example-page?m=1. So, you will face this issue with the 3rd method. For 1st and 2nd it would not affect at all. Need a fix? Subscribe to our Blog from the sidebar.
Our first and second method is not quite robust and required clean coding. Clearing unnecessary tags from the blogger HTML post takes lot of time. You need to be a patient person and should have knowledge of HTML to do it.
Make sure to backup individual post or take full blog backup before doing anything. Chances of screwing HTML post are higher because of clumsy coding.
If you need any help regarding anything stated above. Make yourself home and speak it out from the comment section.