Create Awesome Table Of Contents/Sitemap For Blogger

Table Of Content (Sitemap) is a page on your blog created specifically to arrange posts in an alphabetical order. It's contains header, which is your label name; it's also contains all your posts titles which is the links. These doesn't only make your blog look professional, but it also make it easier for search engines robots to crawl and indexed your blog. If you have an active Table Of Content (Sitemap) on your blog, you'll noticed a dramatic increase in your blog's traffic. So it's necessary creating a sitemap for your blog, because it would definitely help your readers to navigate through your blog with ease, thus increasing your page views.

• Must Read:- How To Add Facebook Recommendation Bar To Blogger Blog

Table Of Content (Sitemap) is easy to create and use on your blog. You just need to add some codes to your blogger template. Follow the steps below to add table of content to your blog.

How To Add Table Of Content (Sitemap) To Blogger Blogspot

1. Go to Blogger Dashboard => Template

2. Backup your template.

3. Edit HTML => Format Template

4. Click anywhere inside your HTML Editor, press Ctrl + F and search for ]]></b:skin>

5.  Now just before/above ]]></b:skin> tag paste the below code.

/*-------BlogStable.com TOC-----*/
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top,  #888,  #575757);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
    color: #fef4e9;
    border: 2px solid white !important;
    background: #1C8DFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
    background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}

6. Save your template, you're almost done! 

Create A New Page For Sitemap
7. Go to Pages => New Page => Blank Page
8. Paste the below codes in the HTML area of the posts editor. Remember to use Sitemap for the title.

• Must Read:- How To Put Yahoo! Media.net Below Posts Title In Blogger

<script src="http://olusegun-fapohunda-calculator.googlecode.com/svn/Justnaira-tos-file.js"></script><script src="http://www.blogstable.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script><script type="text/javascript">var accToc=true;</script><script src="http://olusegun-fapohunda-calculator.googlecode.com/svn/concordian-tos.js" type="text/javascript"></script>

• Must Read:- How To Add Related Posts Widget For Blogger Blogspot 

9. Now make some changes to the above codes.. Change http://www.blogstable.com to your own blog address (url).
10. Hit Publish button.. You're done!
Now go to your blog and check out the new installed table of content (Sitemap) generator.

Feedback!

Comment! Yes, what do you think about this awesome table of content (Sitemap) generator? Does it make any sense to you? Your comment is always welcome. Share your view with us.

Query? Do you have any difficulties adding these sitemap to your blog? That's why we're here. If you've noticed any issue with these tutorial please kindly post your query through comment and we'll get back to you as soon as possible.

Subscribe! You don't want to miss any of our future updates? Kindly use the subscription box below to subscribe for our daily and weekly updates.

Share! We want you to help us share this tutorial to your friends on social media sites like, facebook and twitter. Remember these word? (There's Love In Sharing).