How To Create A Table Of Contents Page In Blogger Blogspot? - Table Of Contents is simply a directory of all the posts existing on your site, like a sitemap page which showing all other blog posts on one page. (TOC) Table of Contents helps users to navigate all other blog posts properly. its is sorted by post label and post date. So follow these steps to create table of contents page in blogger blogspot.
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
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.
6. Now again edit your template.. Don't Expand the Widget Templates..
7. Find this line of code,
8. Now Find </body> and place this code immediately above it after tweaking it with your blog urls..(there are 4 urls.. replace all those red urls properly)
Now try visiting your Table Of Content Page In Blogger..Got it working? If you failed...Don't worry..I can help you out.
You might also like: How To Use Blogger Conditional Tags To Show Or Hide Widgets In Specific Pages
How To Add Table Of Contents Widget To Blogger Blogspot
How To Add Inline Related Posts Middle Of The Content In Blogger
How To Add Google +1 (Plus One) Button To Blogger
How To Add (TOC) Table Of Contents Page In Blogger Blogspot
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
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 == " http://www.blogger4ever.net/2009/01/table-of-contents.html"'>
<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:57%px;
}
.toc-header-col2 {
width:15%;
}
.toc-header-col3 {
width:28%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:97%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:97%;
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 6px;
font-size:97%;
}
.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='HTML240' locked='false' title='Table Of Contents' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "http://www.blogger4ever.com/2009/01/table-of-contents.html"'>
<h2 class='title'>Blog Table Of Contents</h2>
<div class='widget-content'>
<div id='toc'><img src='http://2.bp.blogspot.com/-xK8MVcq5wLM/ThGxrcML8PI/AAAAAAAAAag/LSirljevT2E/s1600/easter.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..(there are 4 urls.. replace all those red urls properly)
<b:if cond='data:blog.url == "http://www.blogger4ever.com/2009/01/table-of-contents.html"'>
<script style="text/javascript" src="http://blogger-plugins.googlecode.com/files/blogtoc.js"></script>
<script src="http://www.blogger4ever.com/feeds/posts/default?alt=json-in-script&max-results=500&callback=loadtoc"></script>
<script src="http://www.blogger4ever.com/feeds/posts/default?alt=json-in-script&start-index=501&max-results=500&callback=loadtoc"></script>
<script src="http://www.blogger4ever.com/feeds/posts/default?alt=json-in-script&start-index=1001&max-results=500&callback=loadtoc"></script>
<script type="text/javascript">showToc();</script>
</b:if>
Now try visiting your Table Of Content Page In Blogger..Got it working? If you failed...Don't worry..I can help you out.
You might also like: How To Use Blogger Conditional Tags To Show Or Hide Widgets In Specific Pages
How To Add Table Of Contents Widget To Blogger Blogspot
How To Add Inline Related Posts Middle Of The Content In Blogger
How To Add Google +1 (Plus One) Button To Blogger
