How To Create Stylish Sitemap Page in Blogger

Sitemap is an important part of your Blogger (Blogspot) blog. Sitemap is a list of pages (links) on your website or blog. Auto Updatable HTML Sitemap show your blog reader to latest post update from different categories in your blog. I our site you might have seen Sitemap Page. If you've not seen before then have a look on it now. Sitemap page is not much necessary for search engines but from some sides it's better to have a sitemap page in menu. In this post we're going to share this sitemap page for blogger.

Create Sitemap Page in Blogger

To add stylish sitemap page in Blogger just follow the simple steps given below.

Read : How to Create Auto Updatable HTML Sitemap Page in Blogger
☛ Go To Blogger >> Dashboard >> Pages
☛ Create New Page >> Blank Page

☛ Insert Page Title of Yours Choice.
☛ Go To HTML Tab

☛ Copy The Code Below and Paste There in The HTML Tab.

<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>

☛ Replace YOURBLOGDOMAIN With Your Blog Domain.
☛ Click "Publish" Button.

☛ You are Done.