Blogspot Table of Contents - BlogToc (Origin)

Blogspot Table of Contents - BlogToc (Origin) This will show images with posts and author name So this is my first post, and in English...

Blogspot Table of Contents - BlogToc (Origin) This will show images with posts and author name

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 of its post. Table of contents is very important, it's like a navigation for user to easily find what of type of content your site is offered. Actually blogspot has its own table of content which what we called it "Archive". But I think it's not a solution because it's very hard for user to find out what he/she want to know more about your site. I think it's served more as a post history table 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 that 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 (see developer guide for more details). So using that API I mentioned above, I decide 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 many more...

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 src='https://googledrive.com/host/0B3JNKoD7YCu-bHU0N1c0MGRrNDQ' type='text/javascript'/>
       
 

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!