Create a Stylish Site Map 2014 For Blogger/BlogSpot

Create a Stylish Site Map 2014 For Blogger/BlogSpot

Hay Folk's back with stylish new and attractive widget for blog known as sitemap, this is the second post on simap our first post was about adding stunning sitemap in blogger ,This widget have been designed simple and neat and clean it can be customized with any blogger them, the colours can be change easily let me explain in short why to add sitemap page in blog, adding sitemap page in blog has really enhance page ranking it helps readers to navigate through all your blog from single page and including it most helpful static for SEO is interlinking adding it is just like you have interlinked all your post with each other which google consider high and unique quality blog and it also help search engine's crawler/robots to index fast and easily, View the below demo to imagine the widget in your blog lets start adding sitemap page in blogger.

Adding Sitemap in Blogger Page.

sitemap have already been categorised so it will appear all your blog post with each categories, you do not need to mass with the HTML coding's however if you intend to customise it with your own desire you can easily change the colours and can add or remove some categories first you just need a neat and clean page to implement the coding in it so lets get started adding it in blogger page,

1. Go to Blogger-------> Dashboard------->Pages,
2. Now Create New Page----->Blank Page
3. Add a Title to it and Click on (HTML)

Site Map 2014

• Now copy the below following code and paste in the page (HTML) Section.

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

• Now Simply replace Teck92 with your own blog domain.
•  Click on Publish, Browse the page and see how it appears on your blog

Final Words By Admin!

We how hope you all like the simple sitemap page widget for blogger as we have also mentioned above that you must have labels in your blog if you have then then congrats you have successfully added a stylish new widget in your blogger blog ,  if you are facing any drawback related to the above tutorial feel free to leave your Comments below we will soon reply as per review,Thanks.