Friday, 30 January 2015

Learn How To Create A Stylish Automated Sitemap In Blogger

How To Create A Stylish Automated Sitemap In Blogger
Sitemap is the list of all pages on a website which tells users and crawlers about the content of site. It contains links to all pages of the site. Crawlers use this list Sitemap is the list of all pages on a website which tells users and crawlers about the content of site. It contains links to all pages of the site. Crawlers use this list to intelligently read the content of the site and according to content of the site, index it in search rankings. Submission of sitemap to webmaster tools is always a good SEO practice. Search engines crawl XML sitemap to read site content. If you are working on blogger, then submitting XML sitemap is enough for search engines. It is not necessary to create separate sitemap. However Google advises webmasters to make two sitemaps. One is for search engines and another for users.  It will help search engines to crawl your website more intelligently and users will navigate site content more easily.

Why To Create A Sitemap For Users:

You might have noticed that by default, blogger does not have a navigation support for users except "Blog's Archive" which also becomes problematic when site contains a huge number of posts. Adding custom menu buttons helps to overcome this issue. Though they make navigation easier but still they don't gather links to all posts in one place. The only solution is to create sitemap for the blog.
Many websites help in creating an HTML sitemap but almost all of them are made only for static websites. They are not updated automatically with new content in Dynamic sites like blogs. The method which I am gonna share will help you to create a stylish sitemap for dynamic blog that updates automatically and it is very easy to install in blogger.

Create A Sitemap In Blogger:

Now we proceed towards procedure of making this sitemap file.
1. Log in to your blogger account and go to blogger Dashboard > Pages > New Page.
2. This will open page editor. Write "Sitemap" in title field.
3. Open post HTML editor by clicking on HTML button.

Blogger Sitemap

4. Now copy the following code and paste it in page HTML editor.

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #23A839;
-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,#6DFC85 0%,#23A839 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #95EFA4;
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;
text-transform: capitalize;
}
.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,#6DFC85 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>

<br />
<div id="toc">
<script src="https://googledrive.com/host/0Bx7LUtcjGFPFU3pnMDB1Y3V3Y0k" type="text/javascript"></script>
<script src="http://www.your-blog-url.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Replace "your-blog-url.com" with your own domain.
You can customize colour schemes by changing the highlighted color codes which suite your blog theme.
5. Click on options under post settings menu and select "Don't Allow" in reader comments to disallow comments. Click on Done to save settings.

Create Blogger Sitemap

6. Click on publish.

Your sitemap is ready now and will be updated automatically with blog's content. No need to make any new changes in it. Hope you like this trick.
Previous Post
Next Post

post written by: