Table Of Contents Widget For Blogger

You might have noticed the new Table Of Contents Section On this Blog.. It uses the Selective Widget Display.. This widget requires Javascript ans hence it will take time to load.. So we will be modding it so that it will be displayed on a particular Page only..

Demo of TOC
Here is the Step by Step Tutorial
1.Make a new Blank Post in Blogger With Title "Table Of Contents" (or whatever you like)
2.Before publishing this post,make sure that you set the publishing date to an old one so that this post wont appear in your blog feed..You can Do it From Post Options in the Post Editor.. Also Don't allow comments on this post

3.Now we have created a new post page where the Table Of Contents will be displayed

4.Note down the URL of this post that we created
5.Find

</head>

in your template and replace it with the following code after applying the proper url

<b:if cond='data:blog.url == &quot;http://www.bloggerplugins.org/2005/06/table-of-contents.html&quot;'>
<style>

#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:100%;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ddd;
color: #000000;
padding-left: 5px;
width:50%px;
}
.toc-header-col2 {
width:15%;
}
.toc-header-col3 {
width:25%px;
}
.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:93%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:93%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:93%;
}
.post{display:none;}
.comments-block{display:none;}
.comment-form{display:none;}
.comment-footer{display:none;}
.blog-pager{display:none;}
.date-header{display:none;}
.feed-links{display:none;}
.comments{display:none;}
</style>
</b:if>
</head>

6.Now again edit your template.. Don't Expand the Widget Templates..
7.Find this line of code

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

and immediately after that place this code snippet..(after editing the snippet with your toc url)

<b:widget id='HTML345' locked='false' title='Table Of Contents' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://www.bloggerplugins.org/2005/06/table-of-contents.html&quot;'>
<h2 class='title'>Blog Table Of Contents</h2>
<div class='widget-content'>
<div id='toc'><img src='http://i38.tinypic.com/34ov7n4.gif'/>Loading The Blog TOC...</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

8.Now Find

</body>

and place this code immediately above it after tweaking it with your blog urls..(there are 2 urls..replace all those green urls properly)

<b:if cond='data:blog.url == &quot;http://www.bloggerplugins.org/2005/06/table-of-contents.html&quot;'>
&lt;script style=&quot;text/javascript&quot; src=&quot;http://blogger-plugins.googlecode.com/files/blogtoc.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://www.bloggerplugins.org/feeds/posts/default?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://www.bloggerplugins.org/feeds/posts/default?alt=json-in-script&amp;start-index=501&amp;max-results=500&amp;callback=loadtoc&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://www.bloggerplugins.org/feeds/posts/default?alt=json-in-script&amp;start-index=1001&amp;max-results=500&amp;callback=loadtoc&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;showToc();&lt;/script&gt;
</b:if>

Now try visiting your TOC Page.. Got it working?? If you failed.. don't worry.. i can help you out..Contact me @ Blogger Forum or via comments
Credits:Special Thanks to Hans of Beautiful Beta for the javascript that powers the TOC
If you got it working show us the url.. We will help you in any further tweaking and let you know if any changes are needed...

Note:If you are reading this in a feed reader, the iframes wont be properly displayed so visit the actual post @ Table Of Contents For Blogger

Share this Article

• Share on Facebook
• RT @bloggerplugins Table Of Contents Widget For Blogger ~Share on Twitter
• Share on Delicious
• Share on Digg
• Share on StumbleUpon