How To Create Stylish Sitemap Page in Blogger

How To Create Stylish Sitemap Page in Blogger

Hello friends, Today in this tutorial i will show you how to create a stylish SiteMap page for your blogger blog,Which will contain all of your posts and will automatically update when you update the blog, Which will help you to increase internal links and it also helps search engine's crawler to index the content easier but before moving to tutorial  you should know what SiteMap is.

• Get Your Blog Post Indexed By Google In a Minute

• Best Recent Posts Widget for Blogger

• Add Recommended For You Slide Out Widget To Blogger

What Is SiteMap?

The sitemap is a very important and necessary component in each website. In short, the sitemap is an index page of your website, which offers links to all pages of your website. These links are categorized and organized in hierarchical form, which makes finding them very easy.
How To Create Sitemap Page in Blogger

1. Go To Blogger > Dashboard  > Pages 

2. Create New Page > Blank Page

3. Page Title your Choice.

4. Go To HTML Tab And Past The Below Code In It.

<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.YOURBLOGDOMAIN.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

NOTE:

• Replace YOURBLOGDOMAIN With Your Blog Domain.
• Click "Publish" Button.
• And Its Done.!!!

 Thanks for visiting and reading the blog. I hope you enjoyed this tutorial and will help you. So keep visiting our blog and do share this post with your friends on facebook twitter and google plus..