Add A Stylish Sitemap or Table of contents widget With Accordation Effect to blogger

You have seen that I have created an automatically updated table of contents page that shows the links to all posts published so far at this blog. This widget displays all your posts category wise and really saves time. I was previously adding new links manually to the Blogger Tricks page but as soon as I came to know
of this great widget from Abu Farhan I instantly converted to it. This widget will also tell visitors that which posts are new and which are old. I have modified the CSS in order to make it suit your blog appearance.

Sitemap or Table of contents widget Preview

How to Add Sitemap or Table of contents Widget To Blogger

Copy the code shown below and paste it inside the blogger static page or blogger post page

Like it? Share it.

Click to Add a New Comment

If you're asking a question click on Subscribe By Email link, on the comment form, to be notified of replies.
Do NOT add links to the body of your comment as they will not be published.
Only the comments posted in ENGLISH will be approved.
If you have a problem check first the comments , maybe you will find the solution there.

20 comments

Levis

15 May 2012 at 06:43

This thing is not always seo friendly.

Check this article must : http://www.netinfozblog.in/2012/05/is-sitemap-widgets-for-blogger-good.html

Unknown

9 July 2012 at 08:42 Author

Is This Auto Updatable When New Post Added..And Brother Is There Any Way To Make..Different Index Like..Different For Softwares, And Movies And Different For Songs..

9 July 2012 at 12:28 Author

@ADMIN Yes this widget update automatically. Yes you can make different index for that Replace /feeds/posts/summary?alt=json-in-script&max-results=1000&callback=loadtoc with /feeds/posts/default/-/YOUR LABEL NAME?alt=json-in-script&max-results=1000&callback=loadtoc

17 July 2012 at 12:40 Author

Thanks a lot man i used this trick in my blog called quizvook.blogspot.com

Sunil

19 July 2012 at 05:08

i can not found these codes /feeds/posts/summary?alt=json-in-script&max-results=1000&callback=loadtoc with /feeds/posts/default/-/YOUR LABEL NAME?alt=json-in-script&max-results=1000&callback=loadtoc

how to add this accourding to lable/category..help

19 July 2012 at 10:35 Author

@Sunil Find this code from the widget shown above and replace it with the following code
/feeds/posts/default/-/YOUR LABEL NAME?alt=json-in-script&max-results=1000&callback=loadtoc

In place of YOUR LABEL NAME put the name of the label

20 August 2012 at 11:27 Author

Not Working again...i want 2 add this element too....kindly tell me how to put this code in static page...plz help

20 August 2012 at 11:29 Author

@G S Arora When you write a post click on Edit HTML tab and paste the above code

3 September 2012 at 11:40 Author

@Gulab shah By default it shows maximum 1000 posts. If you want to show more than 1000 posts change 1000 to your desired value from the code shown above

4 September 2012 at 02:31 Author

@Gulab shah Now this widget works only for 500 posts. If you want to add more than 500 posts, then add the code shown below
<link href="http://latesthack.googlecode.com/svn/branches/TOC/toc.css" rel="stylesheet" type="text/css"></link>
<script src="http://latesthack.googlecode.com/svn/branches/TOC/toc.js">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&start-index=1&max-results=500&callback=loadtoc" type="text/javascript">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&start-index=501&max-results=1000&callback=loadtoc" type="text/javascript">
</script>
<script type="text/javascript">
var accToc=true;
</script>

4 September 2012 at 08:38 Author

@Gulab shah See my reply to admin

5 September 2012 at 01:50 Author

@Gulab shah Add this code
<link href="http://latesthack.googlecode.com/svn/branches/TOC/toc.css" rel="stylesheet" type="text/css"></link>
<script src="http://latesthack.googlecode.com/svn/branches/TOC/toc.js">
</script>
<script src="/feeds/posts/default/-/Pc Software?alt=json-in-script&max-results=1000&callback=loadtoc" type="text/javascript">
</script>
<script type="text/javascript">
var accToc=true;
</script>

5 September 2012 at 07:29 Author

@Gulab shah It's working fine on your blog

5 September 2012 at 23:15 Author

Thanks a lot...its working fine but its overworking too!! :p Its showing the results twice in the same page...any moderation is required in the code which i pasted? My blog : mustdownloadlinks.blogspot.com

6 September 2012 at 00:14 Author

@G S Arora It's showing the results twice because this widget shows the posts according to the labels. Suppose if you are writing a post on some topic and give the labels as blogger and blogger widgets. Then this widget shows the same post in two labels

6 September 2012 at 01:24 Author

Hmmm...Thanks!! But can it be customised...like if i want to show the results for custom labels only?

6 September 2012 at 01:27 Author

I have checked again....there are some posts where i have given just one label but its appearing twice too!! Moreover, the results should have varied if there are some posts with one label and some with 2/3....if you know what i am saying...kindly look into it...thanks again!!

6 September 2012 at 01:37 Author

@G S Arora You have add this line two times <script src="/feeds/posts/summary?alt=json-in-script&max-results=1000&callback=loadtoc" type="text/javascript">
</script> that's why it shows two times in your blog

cys

12 October 2012 at 00:33

hi Sonu..thanks for this but i got two problems
1. it shows all labels but only one is clickable hence it displays posts of that label
2. i want to know why isnt it SEO friendly and how i can make it SEO friendly
thats all...thanks anyway...my blog is http://7buks.blogspot.com

13 October 2012 at 00:35 Author

@cyril onaires Remove highlighted line from the widget. This widget is seo friendly