It's very important for a publisher To insert Sitemap (Table of Contents) in his blog to make it look more professional. Basically Sitemap (Table of contents) is a place in your blog where all of your post are arranged according to their type.This is the reason why today we will going to Insert a Table of Contents in Blogger.
We have designed a table of contents for blogger which will update automatically so you don't need to just edit it every time when you publish a new post.If you publish a new post on your blog it will automatically added to your Table of Contents Page so it really saves lot of time.This Table of Contents widget will display all of your post well arranged under their specific categories (LABELS).
Go to new page, 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 Table of Contents. Please wait....</div> <script src=http://bloggergadgets.googlecode.com/files/blogtoc_orig.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 Table of Contents, but it would be messed up
Then . 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 add following code
#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
