Table Of Contents Widget For Blogger

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="http://blogergadgets.googlecode.com/svn/trunk/blogtoc.js" 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;
  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%;
}

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 :) .

Become a Fan

Share this Article

• Share on Facebook
• Share on Twitter
• Share on Delicious
• Share on Digg
• Share on StumbleUpon