This Widget will act as  a "Table of Contents". It will list out each of your blog posts in a styled table. When you hover over the post title, you will see a summary of the post. The Widget also displays the Post dates and labels. It will allow you to sort the posts by title or by post date. I employs a bubble sort algorithm to sort the posts accordingly.

Credits : This Widget was created by Hans of Beautiful Beta . I have tweaked it to fix the 500 post limit

How to Add Table Of Contents to Blogger

Step 1 - Make a new Page in Blogger with a suitable title

In the page editor, switch to HTML mode, and paste the following code into the Post Editor

<div id="bp_toc">Loading TOC. Please wait....</div>
<script src="" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>

Publish the Page and open it in your web browser.You will be able to see the TOC, but it would be messed up

Step 2 - So it is time to Style the TOC using some  CSS code. Go to Template Designer. If you are using the new Blogger UI, then you can find the Template Designer at Template > Customize . If you are still using the old UI, then you can find it on the Layout tab.Now go to Advanced > Add CSS


and paste the following CSS snippet there.

#bp_toc {
  border: 0px solid #000000;
  background: #ffffff;
  padding: 5px;
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
  background: #ffd595;
  color: #000000;
  padding-left: 5px;
.toc-header-col2 {
.toc-header-col3 {
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
  padding-left: 5px;

Apply the changes to your Blog and check your TOC page once again.:)

Apply the Live Demo

Loading TOC. Please wait....

Save the Template, and you should see a neat Table of Contents Page. If you have any questions, feel free to ask in the comments section :) .


  1. Question :1

    I don't understand what is a table of content....first please give me the screen shot of a toc...then i will try this.....


    If i link urs footer logo...will u link mine blog in ur blogroll....

  2. see the demo..

    and if you need a listing here,you can add your blog to our blogger directory

  3. its hard away,,better preview with the video

  4. @Fa.Topeng i am not good at making videos.. do u know of any s/w that helps in doing it easily..

  5. I dont see it working on my blog, can you please check, link is in my name

  6. you did the first part correctly.. but made a little error on the second one..i had asked to put the last code above </body>
    you placed it below it.Change this and you will get the TOC working..

    your blog has many posts.. so you will have to add some more lines of code..This by default will show only the first 500 posts..

    In this code there are three script lines right?
    The second one script line specifies your blogger feed.. Inorder to display the next 500 posts.. you have to put that loine once again, with an additional parameter start-index=501
    I have modded the new code in the post .. so take another look..

  7. what do you think is wrong with mine?It does't appear aneesh!help. .

  8. @show me the TOC post page.. I couldn't find it from your big list.. ;)

  9. hi I tried this, but I'm getting this error message "The template could not be parsed as it not well formed..... The reference to entity "http:" must end with the ";" delimeter.
    I'm really no into XML.

    and in instruction Number 8 you mentioned 2 url. I found the first one, which is the other one?

    Thanks, and more power. I love u.

  10. opps I forgot my TOC post page, here it is:

    the actual error message is

    "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "http:" must end with the ';' delimiter.

  11. i think you did the first part correctly..

    and you shouldnt be getting an error on step 2..

    did you get the error when you tried to place it above </body> ???

  12. hello, sorry for bugging you, but I finally solve the problem with the delimeter error. I saved my template but It's not appearing.
    here's my TOC link

    Thank you so much for sharing this. Hope you can help me out. i love you. more power!

  13. ok.. i think you have some problem in the bif condition.. because the the code within

    <!--START OF TOC CODE 3-->
    <!--END OF TOC CODE 3-->

    doesnt appera in the toc page.. had you replaced my toc url??

  14. mine seems to just keep loading

  15. @krease you changed the script url with the url of your blog.. shouldn't be changed..Its the script that works behinf the TOC.. The loading thing will automatically disappear when this script is executed..

  16. thanks very much for your help

    any ideas of how i can add a button next to my home button saying list of blogs?

  17. that button is an image.. SO you will have to design a similar button using photoshop or gimp..
    <a ------><img src=""/></a>

    Some code similar to this is there in your template.. Add another piece of this code after modifying it with the url and the url of the image..

  18. ok thanks

    i just noticed in my list every post appears twice is there something i need to change?

  19. sorry that was my mistake.. there is some spelling mistake in the code.. ;)

    change iindex to index.. :)

  20. great thanks very much for all your help

    your amazing :)

  21. I already placed the code in your instruction Number 8. I changed the URL

    into my URL:

    The instruction said there's 2 URLs, I don't know which is the other one.

    It is appearing on my EDIT TEMPLATE HTML page when I checked inside blogger, but it's not showing up when I checked view page VIEW -> PAGE SOURCE

    The page just keeps on loading blog TOC.

    Thanks a lot. More power to you!
    You're great.

  22. the other url is********

    there is 3 occurances of this url..

  23. Whooah!, I finally got it working.. a million thanks! I will definitely put your link in my blogs.

    hmmm, but one more thing please,please please... I need tweaking in the LABELS column. it's a bit too wide.
    [I guess I badly need enrolling a short course on HTML.]
    Thanks. I LOVE YOU!

  24. use this as the last line in the top css that you added ie just below the </style>

    to set width of the third colum.. add this line it is in %

    to hide the 3rd column add this line



    ok ;)

  25. Got it all nice and neat.
    Mabuhay! (that's "Long Live!")
    from the Republic of the Philippines.

  26. if you want you can change the background color using CSS

    just add

    background-color:#ffffff; to the #toc definition

    where #ffffff is the desired background color in hex..

  27. thank you for showing a screenshot and a working demo..i will try to implement it..

    it doesnt work for me please help aneesh

  29. I tried and followed all the steps but i am not able to paste the last link in the final code. Where do you i paste 2 urls as you have instructed us to do in the code.

    I could figure out the first but not the second one. Your help is appreciated

  30. you have to change to your toc page's url

    and you have to change with (there are three of them in the code..)

    i hope it is clear now..

  31. hey man what happened no trick of urs is working on my blog

    the above also is not working
    plz check the url

  32. @The King Khan as i said for the other one,
    follow the tutorial completely..

    i cant be sure but i think you diddn't replace


    you might also have missed out on some more.. fix this first.. and i will try to tell you where else you have gone wrong..

  33. Aneesh, nice:) I set it up here:

    Do you know how I can remove related posts, add in between posts from the table of contents post? And is it possible to split it up into more then 1 page because I have 330 posts and it takes long to load. And someone with 1000 posts will take forever...Anyway, you rock:)

  34. first of all its not my hack.. it was made by Hans of Beautiful Beta.. He is no longer blogging.. almost left over..

    Yea it is possible to hide the Recent posts just need to add some more css
    try adding .related_posts{display:none;} near the other display nones
    to hide the div with id related_posts

    and yea its possible to split it up into pages..
    say 100 on the first,next 100 on the second..etc.
    you will have to make some more toc pages like toc1,toc2 etc.. and do the same for all the pages..

    those three lines which contain the feed url decides which ones are to be displayed on each page(something like (
    if you are splitting it up, just use a single instance of that and use start-index and max-results attributes to tweak it around..

    i hope you can figure that out..

    the max-results that can be fetched at a time is 500, thats y i included 3 instances of that so that it can handle upto 1500 posts..

  35. Very nice tutorial.. thanks, one question how did you put your ads in the center of the post.. i can only add before and after post.. thanks in advance

  36. Thanks i need that table of content widget its nice working

  37. HI Anesh sorry ,my inglish isnt good, but i will try.. i have done all the steps on the tutorial,but my toc just keep loanding, dosent answer the toc, please help ,,im follow all the coments and i couldint not see why it wont work,many thanks heres the url,, ,,i want to say that is great widget i realy want to have this one..please !!!

  38. i think you are modifying it now.. everything is going good!!

    but it is
    and not

  39. Aneesh ,,yuopp you are just amazim,,i cant describ you..just superr star,,hehehe many thanks,
    ,,and congratulation for you job thats you are doing here ,,well recomend cherrs

  40. A table of contents is handy to have when searching for older posts to link to or refer to friends... I have a variation of this tutorial, also based on Hans' work. I like that my TOC is able to sort by clicking the header column. thanks for your version --- variety is the spice of life!

  41. Thanks, I will try it in my blog tomorrow.

    Bangla Hacks

  42. You can try my script to make Table of contents, Auto catogorize by label in here The Best Table of Contents (TOC) or Sitemap for Blogger

  43. At last I have successfully add it in my blog. Thank you Aneesh. But why don't you write a another tutorial about split it up into more then 1 page.

  44. Excellent. I've also done it. It is strange because I am always terrified for changing or editing the HTML codes.


  45. Great hack, awesome stuff! Thank you :-))

  46. Aneesh, I implement this in my blog successfully. But now I failed to active it in my own domain. Don't know what's the problem. Would you please check my blog? (Sorry if you think it spamming)

  47. I have done. Don't need to publish my previous comment.


  48. Very Great!! I have implement this Blogger Mod.
    Much thanks to this blog webmaster!

    For others who look for implementation demo, feel free to visit my blog.

    Thank You.

  49. I've more than 5 blogs(with subdomains). I want to have a all the posts in various blogs to appear in my main blog. Is there any way we can stream the posts or feeds to my main blog

  50. Its really cOOl i found it working for the very first attempt.

    I am searching for a new Hack.How can we show latest posts from a particular Label like recent post widget but only from one label.I hope i m not the only one searching a thing like this:)


  51. @Inner Voice,
    its already there.. you can get that by slightly editing the codes for any of my recent posts widget on this blog. You will have to edit the widget content with the blog's label feed url instead of the blogs feed url..

  52. not working...showing a alert box -"Just wait... TOC is loading"

    check once :

  53. @Mr.Awesome ,
    i see that its working perfectly now.. hope you fixed it :)

  54. It takes hours for it to load, what have ii done wrong?

  55. @Unity Bond ,
    you didn't do step 8 properly..

  56. Thanks a billion! It worked! Except that its annoying cause got Disqus comment form below which i have no idea how to exclude it from that post. But yeah! I'm glad i found this blog! Thanks again!

  57. I was able to implement it here, however I'm having a silly [newbie] problem, how do I change title class? If I replace h2 with h1 the tile will become huge, can we style the title at the css part? If so can you please teach me what to add? thank you.

  58. its fail for me,..see

  59. There is problem.

  60. this is the url of mine
    i did try to do this. but the problem is contents are showing below the post. plz have a look and suggest what can i do thanks.

  61. Hi aneesh............

    Not working for me........ is my blog.......

    So i removed ur code..........



    Hi. My page just shows "Loading the Blog TOC"
    Can You help me? Thanks

    Note: On Step 3 I didn't find the line of code:

    So I place de code after the line

    May be is wrong here, no?

    Thanks in advance for your help.
    GReat work You are doing here.

  63. Hello,

    I successfully placed above codes but found the widget placed below the posts area, kindly help........

  64. i just got this hack into my blog and cannot thank you enough. It worked like a charm (as long as I followed your directions to the letter). I will continue to turn to you for the bets tips and tricks this side of Google. Thank you again.


  65. Hi, Could you please help. I have installed it, but I can't sort it by title, date or label. Could you please help. Thanks

    My url:

  66. Hi!
    This works great for me. Thank you very much!
    Still, I'd like to do some modification: I'd like to rename/translate some things, since I don't use english on my blog.
    Namely, I'd like to translate the following: "Blog Table Of Contents", "Displaying all 8 posts", "POST TITLE", "POST DATE", "LABELS". Any idea, how to do that?
    Also, is it possible to modify the date format and font size?
    Thanks again!
    (My blog's TOC:

  67. Hi,
    I followed all the right steps, at least I think I did, and nothing seems to be showing up in my TOC Post. I was originally going to do this as a post and then switch it to my archive link at the top.
    here are the links:
    and TOC:

  68. @ASI - you haven't followed the steps properly. you have to change to in the codes.
    Similarly you have to change with
    If you had followed the steps, those codes should have been visible in your page's source. But it is not.

  69. Hi,

    To install this widget using the new blogger **static pages**, is there anything different from the tutorial above?

    Thanks a lot.

  70. Thanks It is working

  71. This works great on my blog, thank you!

  72. I get the custom domain for my blog. Before my custom domain MY TOC working proper. But Now It can not working.I also change the TOC code .blogspot .com to .net PLZ help me

  73. Hi! I managed to get this thing to work. Only question is how to translate the word "Pages"? I changed the words for "Next" and "Previous", but couldn´t find that "Pages"-word anywhere.

    Thanks in advance!


  74. Mine is not working either. My TOC page is

    Why is it just blank?

  75. Very nice tutorial,I've been looking for something like this. Here's my TOC page I changed it to Movie Archive...


  76. great post, works good,
    but i have a guestion,
    can we edit or add something to sort by name (titles) "A to Z" i mean?

  77. dude, there ain't result
    may be u need to make it clearer

  78. Can this be put in a static page? What changes would I make?

  79. is it possible to change the text color? I got it all working, just the Title for the app is almost white with no contrast to the page.

    here's my toc

  80. I have same question as above, can we put it on a static page?

  81. @Nancy,Monica - yea you can put it on a static page. You need to replace the post url with the static page url.

  82. mine is not working.. i put the TOC link on the top of the page.... when i click on it.. nothing appear....
    my toc

  83. Hi. I would like to know if there is a way to prevent some entries to appear in the TOC, hiding some specific label ???

    Thanks for your help

  84. Need a portable script to place it in a seperate page/post listing more than 3000 posts in my blogspot

    Any chance you could help me please

    all the best

    why TOC is not inside post ?

  86. works...

    but what should i do to view that in another page....?

  87. wow.. this is great.. i tried it the first time and it worked! thanks

  88. hi! this is really great. i tried it using my test page. aside from creating TOC using an empty post, i was also able to create my TOC under my page list.
    you may check it at

  89. i cannot find

    on my blog.

    Please help!

  90. b: widget id='Blog1' locked='true' title='Blog Posts' type='Blog'

  91. It's Great,,,I put it on my blog and it's work,,thanks a lot
    great job

  92. please post correct table of contents the above one not displaying............

  93. hi.. can i ask something?

    ok.. thank..
    i have idea.. errr... can i create new page.. Then can i view all post entry my followers?

    are u have are code html/java?

    Please help me..

  94. thanks a lot great job i add it to my blog
    but it did not work


    nice one

    but i want show 3000+ posts
    please help

  96. Hi,
    I tryed this and the "Table of Contents" page worked fine, but the post on the rest of my blog would not come in. They just showed up as very short empty boxes.
    Please help.

  97. Good widget! Thanks

    A small misstake at step 7, loading image file ( errored. -> It can be replaced by this file:

  98. thanks I added your TOC Widgeton my second blog, it making some problem specially in seven step, when I create HTML gadget

  99. ok... thanks i have finis.. and it's work

    thank once again

  100. So what to do if my posts are more than 1000 post?

  101. The tips is awesome , but i got a problem in my blog .
    The TOC is not shown inside the post body.
    Please help me with a solution, here is the link

  102. Help me,what to do if my posts are more than 1000 post?

  103. I've tried to install this but doesn't seem to work i've just got an empty TOC page, do you know why that might be?

  104. love you... :) great and easy directions to be followed

  105. hi dear, i have used your code n it worked fine but why does it show only 1500 posts?? i have tried many widgets but none could make the complete index of my blogposts. there are around 5000 posts n i want to make a complete index. help me do that.
    by the way, i have used your script in my backup blog here.
    please help me make the complete index, i have tried increasing feeds in your scripts from 1500 to 2000 n up to 5000. but nothing works.

  106. Got it working at the end. Thanks for the toc script. But what i do not get is that I got it working when I changed this url to the one you post in a comment at July 15, 2009 12:17 AM What is the difference?

  107. Hi Aneesh

    I just implemented your code on my blog, Instead of putting the toc on a post page i put it as a static page, about-goa-blog/p/toc_26.html, it seems to work just fine. The only place where i had to do some changes was in the, , of my template, instead of showing this condition as true, it showed as 'false' in my template. I changed this to 'true', so that it would follow the sytax of your code. Do you think that could cause any problems? Also i put the toc page as sitemap in my webmaster tools, is that a good idea? Well, thanks for a good script, and i hope i will hear back from you if any of the above questions could cause me problems.

  108. yes its working

  109. Aneesh....

    I have had more success with your TOC than other versions. However, I have followed the instructions above as best i can and i fail to see on posts in my TOC. The TOC shows with that 'older post date' but no posts. That older post date also places the post at the far end of the viewable posts. I can probably figure how to deal with that date issue but no post showing (in the TOC)is baffling me.

    Help!!! and tks for all you do.

  110. Honestly, I am so computer challenged, that none of this really makes much sense to me.... do you have a video tutorial on how to do it? I don't even know how to find the "url" and the "head" within the url...????? Sometimes I think people expect only computer people to be the ones looking for info. What about us that don't have a clue what any of this is? Wahhh!

  111. I love the idea, had to try three times to not get any error messages, but now it still does not display???

    Appreciate any help/suggestions.

  112. Now that was awesome! I applied it on my Blog and it came out well. I wish if the Header could be anything else instead of Table of Contents though.

  113. Got this working for my other site! Changed the background to black, i had ran into the problem of having white font on white background, but how do i change those title backgrounds on top here

  114. Thank you very much for this tutorial..See you.

  115. Hey,
    i want to show 1000+ post..

    what to do ??

    its just stuck with 870 post..

  116. I LOVE this!! So thankful for sites like this!

  117. i want to show 1500+ post what to do ??

    pls reply..

  118. Aneesh:

    How do I remove the "Newer Post" and the "Home" gifs from displaying ABOVE the TOC?

    Thanks for this great tutorial.

  119. Can someone PLEASE explain to me on how to remove/hide the home gif from showing above the Table of Contents from a STATIC page?

    Or move it to show below the TOC?

    Thank you!

  120. Good article, it's work fine!

  121. Thank You so much. It worked like a charm

    My TOC:

  122. wow realie nice dude thankz a lot

  123. I am very interested in the table of content trick. but could TOC sorted by the letters A through Z. and I have posted more than 1000, does this trick can be used? thanks.

  124. Good Widget...can this be used to list the posts of a aprticular label???

  125. Well I am also waiting for a subdivision as to how to configure pages shorter table of contents say 100 Per page. In stead of having 500.

    However The Codes provided are just working fine at my blog:

    For those having issues kindly follow step by step guide and its just fine:

    1. Create a Static Page
    2. Copy and Paste code mentioned in step1. click HTML Editor in That Page and then paste that code
    3. Dont Mosify HTML code in design
    4. simply goto blogger template designer
    5. click at ""advance"" option on left side and scroll to Add CSS
    6.copy and paste the code mentioned in 2nd step

    You are done... It will be working...

  126. Hi, great job!!!
    I have a question:
    "can I select which posts show and which don´t? or It just show all posts?

  127. Thanks! I used your widgets on my blog archives :D

  128. Thanks.I was searching for this for quite some time

  129. Hi,

    I used this but somehow it didn't work. Nothing Showed at all..

  130. Uhm, I can't see the ]]>b:skin> in my CSS even though I searched it va Ctrl + F.

  131. @tkuraimaru - now you don't have to add the CSS manually to the template. You can add that in Template Designer, and Blogger will handle the rest. This is actually an old post. I have updated the post with simpler steps :)

  132. Thank you guys!
    your widget is great!

  133. thank you so much i was searching for this.

    it works perfect but i want to ask you a question. is there a way to add small pictures next to labels in column 3 in every row?

    I will appreciate if you answer.
    Thank You so much!!!1

  134. i want to add table of contents to my blog but i also want some description of my posts it possible?

  135. is it possible to add number with it? somthing like this...

    plz check the image

  136. Is it possible to list it in alphabetical order and without the post dates and labels?

    Thank you.

  137. I want to show all my post on specific label. How to do it?

  138. this is great. didn't have to use the additional css code. works fine with the template. thanks!


  140. Hi!
    This javascript is not working anymore ;D
    it asks for authentication (username:password) when you load the widget

  141. I think Hans has changed servers again and beautiful beta has not been updated since 2009 so i dunno where to find him

    Therefore any javascript with this code "" doesn't work anymore

    Do u know where to find Hans?

  142. @All - change to .Sorry for the trouble.

  143. Is it possible to list it in alphabetical order and without the post dates and labels? xD

  144. I have added TOC and it works fine. Great job. Thanks. Is it possible to add a column showing the number of visitors in each post? In this way, I can sort the popular posts accordingly. Blogger's statistics has count number in each post but I want it in TOC. Thanks.

  145. Thanks!
    Really nice Script :)

  146. This is really cool. I've been looking for something like this for ages. Thank you!!!!

  147. very helpful
    now the gate to limit 500 post is break
    thank you

  148. I was really battling to do the list of blog posts.
    With your tutorial that's a piece of cake.
    Much appreciated :)
    Have a nice day ^^

  149. Aslkm..
    thanks for it.

  150. Thank you so much for sharing this. Can the TOC opens with the post titles listed in alphabetical order instead of the creation date, please?
    Best wishes,

  151. HI this is fantastic and works great for me.

    Are you still answering questions on this because I have one ?

  152. Thanks so much for this info! You made it EXTREMELY EASY to understand and create a TOC. love it! Check it out >>>