Table Of Contents Widget For Blogger

Tag
Diposkan oleh Unknown on Friday, February 4, 2011 di Friday, February 04, 2011

Table Of Contents widget on this blog requires Javascript that it will take time to load and will be displayed on a particular Page only.

Installation :

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 you have created a new post page where the Table Of Contents will be displayed.

4. Note down the URL of this post that you 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://blogbloger-admin.blogspot.com/2010/10/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. Save and 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://blogbloger-admin.blogspot.com/2010/10/table-of-contents.html&quot;'>
<h2 class='title'>Blog Table Of Contents</h2>
<div class='widget-content'>
<div id='toc'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhCHKu2DSXA8IEkeFQhTCJiCsD6grHCNXH2vzWsZGchAVftgYCkqUx8Y67MgbERa5fkVC8du2TOAbaiiHGpOtn6yIeqjL_dxW6_hbYbbloqkmL65eE5saC4hyq-BgmVrUvJ8k5TPAVpDNX/s400/favicon.png'/>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 (replace all those red urls properly).

<b:if cond='data:blog.url == &quot;http://blogbloger-admin.blogspot.com/2010/10/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://blogbloger-admin.blogspot.com/feeds/posts/default?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://blogbloger-admin.blogspot.com/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://blogbloger-admin.blogspot.com/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>

9. Done and try visiting your TOC Page.