Advanced Blogspot Table of Contents

lihat dalam Bahasa Indonesia

This idea came when I read tutorials from other awesome bloggers about how to make table of contents for blogspot service. You may read their articles from these links.

• TOC by Beatiful Beta @ beautifulbeta.blogspot.com
• How to Create a Sitemap with Google Feed Control by Amanda @ bloggerbuster.com
• Table of Contents by Abu Farhan @ abu-farhan.com

From top three above, I learn something new about blogger feed, & JSON. 

From there, I decided to try make table of contents with some PHP environments, such as searching facility and page navigation to indexing data from database, but with the use of javascript programming language. So with many references from Google, I modified this script used by Beautiful Beta to match with this widget.

see DEMO

How to use :
1. Login to your blogger account.
2. Create a new Post or Page.
3. Choose HTML tab. (Not Compose)
3. Put these codes below.

<script type="text/javascript">
var labels = [];
var type = 'cloud';
var sorting = 'titleasc';
var numChars = 250;
var newestFlags = 10;
var numDisplay = 10;
var adjacents = 2;
var exception = false;
var slwep = true;
var incLabelAll = true;
</script>
<script src="http://cluster-project.googlecode.com/svn/trunk/public/init-toc.js" type="text/javascript"></script>
<script src="http://YOUR-BLOG-URL/feeds/posts/summary?max-results=0&alt=json-in-script&callback=inittoc" type="text/javascript"></script>
<script src="http://cluster-project.googlecode.com/svn/trunk/public/toc.js" type="text/javascript"></script>

About the detail of variables like labels, type, sorting, numChars, dll, you can see in Detail Explanation.

4. Replace YOUR-BLOG-URL with your blog address.
5. Then publish your post.
6. If you're in new blogger interface, go to Template -> Edit HTML, if not go to Design -> Edit HTML
7. Don't forget to check Expand Template Widget (Backup your template if necessary)
8. find the code of  ]]></b:skin>
9. Place these CSS codes before  ]]></b:skin>

div#toc-header, div#toc-display, div#toc-footer, table#toc-body {
 width:100%;
}

div#toc-header {
 font-size:12px;
 text-align:center;
}

div#toc-display, div#toc-footer, div#toc-display input[type="text"], div#toc-display select {
 font-size:11px;
}

div#toc-display, div#toc-footer {
 margin-top:30px;
}

div#toc-header a, div#toc-footer a, div#toc-header span, div#toc-footer span {
 color:#000;
 margin:2px;
}

div#toc-header a, div#toc-header span {
 padding:3px 5px;
 display:inline-table;
}

div#toc-footer a, div#toc-footer span{
 padding:1px 3px;
}

div#toc-header a , div#toc-footer a {
 background-color:#F0F0F0;
 border:1px solid #E0E0E0; 
 text-decoration:none;
}

div#toc-header span, div#toc-footer span {
 background-color:#FFF;
 border:1px solid #FFF;
}

div#toc-header a:hover, div#toc-footer a:hover {
 background-color:#FBFBFB;
}

table#toc-body {
 border-collapse:collapse;
 border-spacing:0;
 font-size:12px;
}

table#toc-body tr th, table#toc-body tr td {
 padding:3px;
}

table#toc-body tr th {
 border:2px solid #FFF;
 background-color:#F0F0F0;
 text-align:left;
}

table#toc-body tr th a, table#toc-body tr td a {
 border:none;
}

table#toc-body tr th a {
 border:none;
 color:#000;
 font-size:13px;
 text-decoration:none;
}

table#toc-body tr th a:hover, table#toc-body tr td a:hover {
 text-decoration:underline;
}

div#donotremove, div#toc-loading {
 font-size:9px;
 margin-top:20px;
 text-align:center;
}

div#donotremove {
 color:#DDD; 
}

div#toc-loading {
 color:#AAA;
 position:relative;
 top:8px;
}

div#toc-loading img {
 position:relative;
 top:10px;
}

div#donotremove a {
 border: none;
 color:#AAA;
 text-decoration:none;
}

10. Save your template and you're done

Good Luck, Hope it'll be useful!

Detail Explanation : (Below are just explanation, Not to added to your blog)

In this part I'll cover about variables which can change the interface and setting of this widget.

1. var labels
Choices that work

var labels = [];
//will display all blog's labels
var labels = ['Nama Label','Nama Label','Nama Label'];
//will display only specific label(s) that you already declare in array,
//label with 0 post will stay displayed if var slwep set to true

DEMO all labels || DEMO specific labels 1 || DEMO specific labels 2

2. var type
Choices that work

var type = 'cloud';     //show labels in cloud list
var type = 'dropdown';  //show labels in dropdown list
var type = '';          //do not show any labels

DEMO cloud || DEMO dropdown || DEMO none

3. var sorting
Choices that work

var sorting = 'titleasc';      //sort by post title ascending
var sorting = 'titledesc';     //sort by post title descending
var sorting = 'datenewest';    //sort by newest post
var sorting = 'dateoldest';    //sort by oldest post
var sorting = 'updatenewest';  //sort by newest last updated post
var sorting = 'updateoldest';  //sort by oldest last updated post

DEMO titleasc || DEMO titledesc || DEMO datenewest || DEMO dateoldest || DEMO updatenewest || DEMO updateoldest

4. var numChars
Choices that work

var numChars = number;     
//limit the description length

Screenshot

5. var newestFlags
Choices that work

var newestFlags = number;     
//total "NEW!!" that will show in new posts.

Screenshot

6. var numDisplay
Choices that work

var numDisplay = number;     //limit the index posts
var numDisplay = 'All';      //show all index posts

DEMO numDisplay 18 || DEMO numDisplay All

7. var adjacents
Choices that work

var adjacents = number;     
//used at page navigation

Screenshot

8. var exception
Choices that work

var exception = true or false;     
//var labels must be set to specific, otherwise it will not take effect
//if set to true, show label(s) except in var labels
//if set to false, show label(s) only in var labels

DEMO exception true || DEMO exception false

9. var slwep
Choices that work

var slwep = true or false;     
//slwep = "Show Labels With Empty Post"
//var labels must be set to specific, otherwise it will not take effect
//if set to true, show label(s) even if it have 0 post
//if set to false, show label(s) only that have post(s)

DEMO slwep true || DEMO slwep false

10. var incLabelAll
Choices that work

var incLabelAll = true or false;     
//label 'All' is special label to show all posts
//if set to true, display label 'All'
//if set to false, don't display label 'All'

DEMO incLabelAll true || DEMO incLabelAll false

Additional Features:
1. Searching for post title.
2. If you click on Title, Published, and Last Update parts, will sort the data alternately.
3. Can display more than 500 posts, but more posts, the more loading process will take.