How To Create Automatic Sitemap For Blogger Blogs

Tweet

Create Stylish Sitemap for Blogger

Blogger sitemaps,sometime refers by Table of contents,list of all posts and Archive.

you may have different type of visitors, including power visitors who visit your blog most of the time.

while some just came by searching some post. it's time to convert all type of visitors into readers of your blog.

it's a good practise to make a stylish site map which update automatically, so that user can check everything yet published.

 Preview!!

it is also convenient for the users if they are looking for some post and don't know the exact keyword.

The solution to check all posts and pick up the desire article.

Blogosphere world is growing fast in now a days, every blogger trying their best to get the most out of their readers.

To provide all possible resource to users so that they again visit site. and become reader from a simple visitor.

Despite of all these advantages, there is one cons, which is if you have large amount of posts as well as many labels.

then page become large and decrease loading time of a blog.

For efficiency we advice to have only one label for each post, and no same labels for more than one post of types.

How it works?:

credit to Abu farhan, a web designer especially for blogger platform  created sitemap widget, which reside on Google code server.

the widget is desgined to pick up labels from a blog, and place place posts with label each on them.

there is API which call function to that bunch of codes with customization options.

so that you can desing the way you want.

How to add it in Blogger:

1. Go to Blogger Dashboard.
2. select a blog and click on pages.
3. Create a New page.
4. At the above Give a Page Title sitemap, other than sitmap name will also work, it's upto you which name you want to give. you may give table of contents or archive or list of all posts.
5. Now click on Edit Html option near page title.
6. and paste the below code anywhere you want.

<style type="text/css">
/*Outer Border
------------------*/
#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);}
/*Label Color and Background
------------------*/
.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{text-transform:uppercase;}
/*Latest Post Info
------------------*/
.new{color:#FF5F00;font-weight:bold;font-style:italic}
/*Post Title List
------------------*/
.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>
<div style="text-align: left;">
This is the Sitemap of TrixKing Blog. Here you can find All posts published till now.</div>
<div id="toc">
<script src="http://dvslabs.googlecode.com/files/customizable-TOC.js" type="text/javascript"></script>
<script src="http://trixking.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script><a href="http://TrixKing.blogspot.com">Get sitemap widget</a> 

Now you can check preview of the page to make sure it working fine. Once you find, it working for you. click on Publish.

Please Share it! :)