TUTORIAL IT

HTML Sitemap Page in Blogger

HTML Sitemap(table of contents) of a blog provides an easy navigation for readers to easily view all the blog's post in one place, helps search crawlers to crawl the entire blog properly, increases the crawling of a blog and its indexing rate.  In this post, you'll get to know how to create HTML sitemap page in blogger. Adding an HTML sitemap in your blogger blog can influence your blog's rank in search engines. Also, HTML sitemap in a website creates a strong internal linking of the blog's pages which brings about a good search engine optimization. Here's a demo of the sitemap

Also Read: How to Add HTML Parse Tool To Blogger
                    How to Upload Blogger Template

 Other than the about us, contact us pages on your blog, another important page that must be included in your blog is the HTML sitemap page or table of contents page. In the page, all your posts are arranged according to their label, making it easy to go through them unlike if they were in blog archives. Follow this blogging tip to create an HTML sitemap in your blog.

Also Read:  How to Add  Read More Attribution Links to Copied Text in Blogger
                    How to Add Custom Robots Header Tags in Blogger

How to Create a Sitemap or Table of Contents in Blogger

• Go to your blogger dashboard.
• Navigate to' Pages'.

• Click on  'New Page'.

• Set the editor on 'HTML'  mode.
• Copy the code below and paste inside the editor.

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}

</style>


<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://www.informationtutorial15.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>