Back again with a blogger hack and this time with a coolest thing. You can see 'Show Table of contents' section in my blog now where all my table of contents will be loaded with one click. You can try it just to see what table of content looks like if you haven't seen it earlier. Well before starting to write about this blogger hack, i want to remember Hans of beautifulbeta who created this blogger hack as far as i know. Well, i am deriving his codes and hacks but i am trying to write in a much simpler way then him. So here is the process to create a Table of contents in your blog.

Table of contents helps your readers to find your posts easily. Just add some codes and all your posts are one click away from your readers.
Goto blogger 'Edit HTMl' page and search for the code <b:section> with id=main. This is the section which held blog posts. Now replace that line with the following code.

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Now add the following CSS code to the head section of your template. This code is for the style of your table of contents. You can change this code according to your choice. The best place to add this code is just above ]]></b:skin> I am saying this place now because i was really confused about at which place of the head section should i put this code when i was creating my own Table of contents.


<style type="text/css">
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}.toc-header-col3 {
width:125px;
}
.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 {
font-size:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}
</style>

Now you are done with 'edit HTML' page. Now save the template and go to 'page elements' section.
Now click on 'add a page element' and then click on 'HTML/Javascript'. Now paste the code there leaving title blank.

<div id="toc"></div>

Now do the final step. Again add a new page element and click on HTML/javascript. Now paste the code there and keep the title 'Table of contents'.

<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Change YOURBLOG with your own name and congratulate yourself for making your own table of contents.
This was todays blogger hack on creating table of contents. You can also try other blogger hacks like Adding Yahoo! emotion on your blog post or making your images tweak on blogger.

11 comments
  1. SBA August 23, 2008 at 1:58 PM  

    I tried this today on my test blog and could not get the TOC to display. Then I look at BeautifulBeta and learned they have changed servers, so the java will not work. You must change the server id from "http://home.planet.nl/~hansoosting/......." to "http://home.kpn.nl/oosti468/......" .

    Works fine now --- thanks.

  2. SBA August 23, 2008 at 5:07 PM  

    Your page has an extraneous --> at the top. I noticed the same thing when I put the style code before the ]]... Placing it after that line gets rid of the arrow and still works.

  3. Anonymous February 23, 2010 at 6:46 AM  

    most effective clomid fertility pillsscam hoodia diet pills

    [url=http://www.bebo.com/buylevitraonline1]buy levitra viagra online[/url]

  4. Anonymous March 22, 2010 at 4:01 PM  

    Understandably your article helped me terribly much in my college assignment. Hats off to you post, wish look audacious for more interdependent articles without delay as its anecdote of my pick topic to read.

  5. Costume Box Australia February 2, 2011 at 2:56 PM  
    This comment has been removed by the author.
  6. Inside the Costume Box February 2, 2011 at 2:57 PM  

    No go. *shrugs*

  7. Adi March 12, 2012 at 4:26 AM  

    Please, help me. i can't to create it. visit my blog.

  8. Anonymous February 18, 2013 at 7:25 PM  

    We're now fully soaked for the new found glory of technology. At now I was attending school and sharing a town-home with good friend. Whilst Lil Wayne is being handcuffed with a police car, a variety of his belongings is spread about the hood including a packet of Strapped Condoms.

    Here is my site :: full porn movies

  9. Anonymous February 18, 2013 at 9:08 PM  

    You should check with your doctor and have your iron levels tested.
    As you lose those vitamins you end up losing your hair.

    whatever the reason, overeating can make you feel bloated, tired,
    and guilty.

    My web-site :: cause of female hair loss

  10. Anonymous March 13, 2013 at 7:30 PM  

    You can enjoy it with your regular sexual partner or alone in
    the privacy of your own home and in full anonymity. If you are adventurous and enjoy expressing your sexuality while
    entertaining others, webcam entertaining may be the perfect fit for you.

    Therefore don't be afraid to browse and filter until you find the camgirl whose looks and profile you like.

    my web page ... http://www.tgplivesex.net

  11. Bloggerwits January 31, 2015 at 10:49 AM  

    very nice article thanks