How to Create HTML Sitemap Page in Blog of Blogger ?

Sitemap of a blog helps search crawlers to crawl the entire blog roperly. It helps to increase our blog creep and categorization. That sitemap is in .XML format that we've got an inclination to use to submit in Google Webmaster Tool that's simply for search engines thus they're going to index all of our blog posts. today throughout this tutorial i am getting to share a trick by that you're going to turn out a hypertext mark-up language sitemap for your blog rowseers thus they're going to merely select a post to browse. If you utilize hypertext mark-up language sitemap in your blog howing knowledge then you will increase your blog age rank together. will|you'll|you'll be in a position to} show all of your blog osts at single sitemap page otherwise you'll be able to use sitemap for specific label. despite your would love is, this tutorial will assist you. So, let see the thanks to add a sitemap page in blogger.

Creating Sitemap Page for All Labels

If you want to show all of your blog posts at same page then follow below steps one by one.

Follow the steps below to create a TOC page for your blog

1. Go To Blogger > Design > Edit HTML
2. Back up your template ( Click Here to Know )
3. Press Ctrl+F and Search for ]]></b:skin>

4. And just above it paste the CSS code below,

/*--------BOB 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');
}

5. Save your template and now create a New Page (not a new Post).
6. Give Your new Page a relevant title like “Table Of Contents” and then in the EDIT HTML mode of your blogger editor paste the code below,

<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.BlogofBlogger.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://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

Now simply replace http://www.BlogofBlogger.com with your Blog URL and hit save. View your new page to see a beautiful Table Of Contents with a nice drop down effect.

Final Words!

This was the tiny trick regarding some way to make language sitemap page in Blogger for specific label or for all labels. I hope you guys like this tutorial. be happy to travel away comment below this post to share your views and feedback. Thanks and Happy Blogging!

You Also Like:

Recommended post Slide out Widget for Blog of Blogger