Create Good looking Sitemap Page for Your Blogger Blog {Video}

Learn How to create a cool and well-designed site-map to your blogger blog. I’m currently using this for my own blog and I think you should also give a try.

We all should use sitemap page in our blogs. If you are using WordPress then there are some plug-ins and other ways to create some beautiful and well-designed site maps for your blog, but when we talk about blogger we do need to create our site maps manually as there are no plug-in or something like that.

Why you should create a sitemap for your blogger blog
Creating a sitemap for your blogger blog is very important because it gives your audience a cool and well managed view of your blogs content in the sitemap page of your blog, audiences can browse articles of your blog by labels.
So the main reason of creating a sitemap page for your blog is because it will make your blog more professional and I think it will also help you to incase your blogs traffic.

What is the difference between Sitemap for Humans and Sitemap for Sitemap for Search Engines?
I think there are two kind of sitemaps in the web. When one sitemap is for real humans then the other one is dedicated to Robots (Search Engine Bots) .Unlike other sitemap here I’m showing you guys how to create a sitemap page for humans (your real audience) and not for search engines. Because search engines doesn't need any good looking site map they just need a piece of information about your content no matter in which format it is in. also if you're using BlogSpot platform then you do not need to create any Sitemap for Robots Manually they all are automatically crates by the blogger system.

You can see a sitemap that is created for search engines.

And here is the screenshot of sitemap page which I’m talking about.

How to create this good looking Sitemap for your blogger site: -
It is very easy you just need to follow some simple steps for doing this.
Step 1 : > go to your blogs dashboard
Step 2 :> pages
Step 3 :> create new page
Step 4 :> go to HTML
Step 5 :> Copy the code from below and paste the entire code in that HTML box.
{Don’t forget to change the red colored URL with your sites URL}

<div dir="ltr" style="text-align: left;" trbidi="on">
<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>
<br />
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://toalroo.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
</div>

Step 6: - Publish

• Share ▼
  • Twitter
  • Share
  • Comment
  • Google+
• Subscribe ▼
  • RSS
  • Newsletter
• Connect ▼
  • Follow
  • Fanpage
  • YouTube
  • Google+