Create Table of Contents Page for your blog

Spread it!

Share

Email This

Previously we have talked about creating table of contents in sidebar . That hack requires two components.There is the code which calls the contents of your blog, and provides a link in the sidebar.This hack is also similar to first one. we have done some modification in that code.You need to combine two codes in the post page.For demo you can see ours table of contents page.

Hack starts

First create a new blog post and paste the following code in Edit Html section.

You can see the whole post published in this blog here.To see full table of content click the link below(It make take few moments)<div id="toclink"><a href="javascript:showToc();"><b>Show Table of Content</b></a></div><script style="" src="http://home.planet.nl/%7Ehansoosting/downloads/blogtoc.js"></script><script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;max-results=999&amp;callback=loadtoc"></script><div id="toc"></div>

Remember to replace YOURBLOG with your blog name and Paste the above code in order that it looks like this.

Now the second step is the Optional step . If you like to give style to your table of Content then copy the following code and paste it to the head section of your blog code otherwise leave it.

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

More you can give link to your table of contents page in your blog. For that Goto layout Page and add a new HTML page Element .After that create a link text and use the link of the table of contents page which you have copied.

Technorati Tags: Blogger hacks , Table of Contents

Consider to Subscribe to our RSS feed or Follow us at Twitter or Join our Facebook Fan Page.Enter your Email below to subscribe to our updates via Email.

Similar Posts

• Create Table of Contents in Blogger
• 5 tabbed Content Widget for Blogger
• Create Table of Contents in Blogger sorted by Date(Archived) or Labels in Blogger
• Blog Speed Analyzer
• Expandable Content Script for Blogger

Article by Dinesh Dhakal

Dinesh has written 293 awesome articles for us. Dinesh Dhakal(Deineshd) is the Admin of this blog.He is from Kathmandu, Nepal who is blogging since complete 4 years.You can catch him on twitter at Twitter.com/deineshd and in Facebook at Facebook.com/deineshd.