Advanced Blogspot Table of Contents

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. ...

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="https://googledrive.com/host/0B3JNKoD7YCu-a3Z1dXRoNFhoUVU/Initial%20TOC%20Code.js" type="text/javascript"></script>
<script src="http://YOUR-BLOG-URL/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=inittoc" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B3JNKoD7YCu-a3Z1dXRoNFhoUVU/TOC.js" type="text/javascript"></script>
 

ttttttttttttttYOUR CODE

hhhhhhhhhhhhhhhh
YOUR CODE

gggggggggg

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 ]]>

9. Place these CSS codes before ]]>

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

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

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

4. var numChars Choices that work

var numChars = number;     
//limit the description length

5. var newestFlags Choices that work

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

6. var numDisplay Choices that work

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

7. var adjacents Choices that work

var adjacents = number;     
//used at page navigation

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

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)

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'

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.