Table Of Contents Widget For Blogger

Table Of Contents Widget For Blogger,as every blogger wants to create a table of content page or archive page like in wordpress blogs.And since from time many widgets have been provided by many great bloggers and working great.So i will review all the table of contents widget available till now.The widgets are provide by many great bloggers like amanda from bloggerbuster, abu-farhan from abu-farhan.com, Hans from beautifulbeta , vin from blogdoctor.me and last one is adding the posts manually side by side in post.All these widget are great and any one of will suit your blog needs for sure.




First Table Of Content Widget

So First table of content widget was given by hans from beautifulbeta.blogspot.com.He gave us this widget 2 years ago and he made look this widget look like table.I too was using this widget but with time i switched to new table of contents.If you want to get this widget you can get it from here at beautiful.blogspot.com.

But as there seems some problems in implementing that,so i am also holding an tutorial for it in the way i used it.

Just download this script first.

Simply go to your Blogger dashboard and create a new post. Using the tabs at the top, switch over to the "Edit HTML" section of the post editor (if you do not usually use this function), then paste the following section of code into the content section:-

<div id="toc"></div><span style="font-size:80;"></span><script src="http://Your-Script_url/tableofcontents.js"></script><br /><script src="http://Your-Blog_url/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script><br /><script type="text/javascript">showToc();</script>

Just replace the above codes in red with the script url and your blog url.And Publish Your Post.

Now to make it look great and look like an table just add this css in your blogger html.Just go to blogger layout >> edit/Html and place the below css before the ]]></b:skin> tag.

#toc {
border: 2px solid #C3D9FF;
background: #ffffff;
padding: 5px;
width:500px;
margin:10px 0 20px 0;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #3D81EE;
color: #5d5d54;
padding: 5px 5px 5px 5px;
width: 300px;
}
.toc-header-col1 {
width:300px;
}
.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:90%;
color: #404040;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:90%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:90%;
}

.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {
text-decoration: none;
}

Second Table Of Content Widget

Second Way the users adopted to display the table of content widget was to make seperate post with title table of contents and keep on adding and editing the post with title of posts and linking them to post urls manually.This is as simple process as everybody can do it himself.Demo of it can be checked on these two posts Post1 And Post2.

Third Table Of Content Widget

This widget is given by amanda.He has created the widget using google feed control.In this widget you can display 100 posts from any specified label or category you want in a single post and is also very easy to add.

Just how to add this widget.First go and Generate a Google AJAX API key for your site, and copy this long string to your clipboard (or your favourite text editor) for later use.

Simply go to your Blogger dashboard and create a new post. Using the tabs at the top, switch over to the "Edit HTML" section of the post editor (if you do not usually use this function), then paste the following section of code into the content section:-

<style type="text/css">
/**
* Suppress everything except for title
*/
#feedControl .gf-snippet,
#feedControl .gf-author,
#feedControl .gf-spacer,
#feedControl .gf-relativePublishedDate {
display : none;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY"></script>
<script type="text/javascript">
/*
* How to use the Feed Control to grab, parse and display feeds.
*/

google.load("feeds", "1");

function OnLoad() {
// Create a feed control
var feedControl = new google.feeds.FeedControl();

// Add blogger label feeds.
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");

feedControl.setNumEntries(-1);

// Draw it.
feedControl.draw(document.getElementById("content"));
}

google.setOnLoadCallback(OnLoad);
</script>
<div id="content">
Loading, please wait...</div>

Just Edit the Red code with the api key which you copied to notepad after signing up here.

Now edit the blue codes with the lable feed url and green links with title of categories.
If you dont know about how to get label feeds you can read it here.

Above codes consist of 8 labels to add more keep on repeating this line of code in above script.

feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");

If still you have any problem in this widget you can read on complete tutorial here by amanda.As she has explained all Troubleshoting and many things like on how to show more than 100 posts in one label if you had more than 100 posts in onelabel.

Fourth Table Of Content Widget

Now this is also the best widget given by abufarhan.Just what you have to do,to place this widget is just create a new post and post two line of codes and publish it.
So simple.Just first download this script.

And below are the codes you have to place in new post and publish it.

<script style="text/javascript" src="http://Your-Upload-Script-Url/blogtoc-min.js"></script>
<script src="http://Your-Blog-url/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Just change the codes in red with your blog url and the script url you uploaded to your server.

As the loading of table of widgets is fast but it will keep on increasing with increase of posts in labels.

Fifth Table Of Content Widget

This method uses the AJAX Dynamic Feed Control from Google to show any number of posts from any number of your blogs in one place and cycles through each post title to show a preview at the top.This widget is given by blogdoctor.

Just download this script and upload to your server.

First login at Blogger.com and click Settings link on Dashboard. Then click Site Feed subtab. Click drop down arrow for Allow Blog Feeds and choose the Short option. Save Settings.

Next click Layout tab and on the Page Elements subtab click the Add Page Elements link. Choose Html/Javascript option in popup window. In Contents paste the following code :

<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->

<!--
// The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page.
-->
<div id="feed-control">
<span style="margin:10px;padding:4px;">Loading...</span>
</div>

<!-- Google Ajax Api
-->
<script src="http://www.google.com/jsapi?key=<<INSERT KEY>>"
type="text/javascript"></script>

<!-- Dynamic Feed Control and Stylesheet -->
<script src="http://Your-Script-Url/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
</style>

<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'Table of Contents',
url: 'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'
}];
var options = {
stacked : true,
horizontal : false,
title : "BLOG_TITLE."
}

new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>

<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->

Just change above the codes in red with the the Api key , Blog Title and Your Blog url and the script url you uploaded to your server.
Just get api key by signing up here signing up here.

Sixth Table Of Content Widget

This widget made by abu-farhan.Just watch the demo of it.If liked visit the installation link to make it for your blog.

Installation Link

Seventh Table Of Content Widget

This widget made by abu-farhan.Just watch the demo of it.If liked visit the installation link to make it for your blog.

Installation Link

Now Just what you have to do is just select the widget which satisfy your needs and use it in your blog for showing all your posts.Best Of Luck !!!!!