How To Create Stylish Cool Sitemap Page in Blogger

Hey Folks ! Back with Stylish Sitemap widgets For Your blog. As you all know Sitemap Should be must for Every bloggers. So, We Decide To Create a Sitemap widget at Best Blogger Recipes. It is Most Popular and Most Useful widgets for Blogs. Definitely your blog readers first time see it Sitemap widget on your blog, Really They will excite. It sitemap widget have been Customized and designed simple and clean and neat. This widget is designed with latest colors. It Sitemap widget is full Customized and we don't need to touch any code. Let me an explain why it is must for every blog. In fact, Sitemap widget is a List of  Blog Categories and Labels. It waget's work is Every Categories or Labels to show in Sequent. when you will Add it sitemap widget to your blog, and really do so, your blog readers easily find his/her articles in your sitemap Page.

Live Demo

Add it in your blogger Page.

Don't worry buddy ! You will be thinking it how we add it in our blog. It sitemap widget have been Categorized , it will appear your blog posts with each categories. You can easily change the colors and can add or remove some categories. So let's start to add it in your blog. Just follow some steps given bellow.

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

Now, Copy the below following code and past 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.bestbloggerrecipes.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

• Now, Simply Replace bestbloggerrecipes with your own Domain name.
• Click on the Publish and see , How it Appear on your blog Enjoy !

Finally Word By Admin !

We Hope You Enjoyed this Sitemap widget and would have helped for you, For any problem Kindly leave your comment below and we recommend to share the post with others to save their blog from unwanted or harmful updates from google panda updates.

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →