Blogspot Table of Contents - BlogToc

So this is my first post, and in English language, although it's not my native language. So, sorry for grammar mistakes.

Blogger / Blogspot is great service for blogging and many other purposes. It's free and easy to use. But what I observe is lack when it comes for automating table of contents for its post. Table of contents is very important, it's like a navigation for user to easily find what type of contents your site offers. Actually blogspot has its own table of content which what we called it "Archive". But it still lacks something and serves more as post history list rather than as table of contents.

Luckily, Blogspot now has become a part of google products, so it offers API to bring access to developers who want to use its services. One of the services is called Blogger Feed API who doesn't require authentication to use it, as long as the blog is marked as public blog. As far as i know, this API offers 3 output format: xml, json, and json with callback a.k.a json-in-script/jsonp (see developer guide for more details).

So using that API I mentioned above, I decided to create a plugin/components/library/extension/widget or whatever it called to make Table of Contents for Blogspot with JavaScript as base programming language. This library will generate a table of contents for your blogspot site as long as your blog is not set to private. The initial design is like in DataTables example, and you can change it according your own taste. It facilitates with searching, pagination, filter by category or alphabet and can load all your post ( I hope so :) ), and etc...

So without further ado..., click the button to see the working example
DEMO
In the working example site, you could also find an instruction how to set up things in your blogspot site, but if you insist, I will also put the step by step how to set this to your blog:

Before using the script, please read the LICENSE

1. Placing the script

Login to your Blogger account and choose the blog you want to add the code.
In the Blogger Admin Panel/Dashboard, go to Template section in the left panel → click Edit HTML (backup your template before if necessary), press Ctrl+F and search for </head> in the search box. After getting the result, immediately place this code just above the </head> tag.

<script type="text/javascript" src="//clusteramaryllis.github.io/blogtoc/dist/1.6.3/blogtoc.min.js"></script>

Then save the template.

2. Creating a New Page or Post

I'm sure most of you already know this, but here it is...
In the Blogger Admin Panel/Dashboard, if you want to create a page, choose Pages section in the left panel → click New Page tab → choose Blank Page. If you want to create a post, click the button, with the Pencil icon on it (right after the blogger logo at the top menu).

3. Adding the code

In the editing layout, click HTML tab (not Compose tab) at left most toolbar, and then add this code:

<div id="blogtoc"></div> 
     
<script type="text/javascript">
var myDiv = document.getElementById('blogtoc'); 
     
BlogToc( myDiv ).build({
  url: "YOUR_BLOG_URL" 
});
</script>

Notes Replace YOUR_BLOG_URL with your blogspot url, e.g. clusteramaryllisblog.blogspot.com (without any http:// verb or trailing slash).

Click Publish. And you're done!

4. The Options

The documentation are not available yet, but make sure to check out the demo and go to How to use in your blog tab.

This is open source and the code could be found on github You can contribute there!
If you find any trouble, don't hesitate to leave a comment. Don't spamming!

Cluster Amaryllis