How To Add A Table Of Content Page To Your Blog



A table of content is a list displaying all the posts on your blog in a clean easy to navigate format for readers.In this post i will show you a table of content that is extremely easy to set up and can be added to your blog in minutes.The recent addition of static pages to blogger provides a great way to display the table containing your complete archive.

This is in fact the table of content I’m currently using on Spice Up Your Blog.I have it in a post as the static pages were not available when i first created it.All the posts are sorted by date and you can see it here : Spice Up Your Blog Table of content.

The code that creates the table is actually very simple but you will first need to create a post or static page for your blog.Here’s the three steps required to create a table of contents and add it to your blog.

a table of content for blog

Add A Table Of Content To Your Blog

Step 1. Create a new post or static page for your blog and give it the title ‘Table Of Content’ or something similar.

Step 2. In the top right of the post editor you will see the options to use Html and Compose modes make sure your in ‘Edit HTML mode.

Step 3. Copy the code below and paste it into the posting area :

<a href=’http://www.spiceupyourblog.com’><img alt=’Best Blogger Tips’ src=’http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png’/></a><script style=”text/javascript” src=”http://spiceupyourblogextras.googlecode.com/files/bloggertableofcontent.js”></script>
<script src=”http://www.YOUR-BLOG.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc”></script>

Credit & Thanks : Abu Farhan

Note : Change http://www.YOUR-BLOG.blogspot.com in red to your actual blog address.If you use a custom domain replace the Url in red with your custom URL.

InfoRemember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post.
If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow – when you comment here it helps Your Blogs Google rank !

You can now publish the post or page and yes it is that easy !

4 comments:

  1. Simply RidiculousMarch 21, 2011 at 9:20 PM

    Thanks for this. However, what are the numbers shown before each post link?? Is there a way to remove them??

    ReplyDelete

  2. nice tutorial but the table of content can better better. can you create something with labels and not by date.

    visit my blog www.earn-faster.blogspot.com

    ReplyDelete

  3. Nice Thanks

    ReplyDelete

  4. Well after my comment, you modified the code and replaced it with Abu Farhaan ones. My dear this code works only if you have less than 500 posts. I expected some solution from you. Anyways… i did it by my own. Thanks

    ReplyDelete