Most of you must have seen a sitemap page on many blogs or websites and wondered what it is and how it works. Sitemap page basically helps you in a better and easier navigation and it also improves your page rank due to internal linking of all the posts on the blog. It also helps the search engine’s crawlers to index the content and pages easily and at a faster rate. In this chapter, you will learn how to create a sitemap for blogger using simple steps.
How does Sitemap Page work?
Before dumping the code in your blog and simply leaving it alone, you need to know how it actually works. This is automated sitemap page which automatically adds the latest posts itself. You don’t need to update it manually every time. In this page, you can see that the posts are categorized according to the labels you have given on the blog. This sitemap page is developed using JavaScript and CSS which automatically takes the feed of your blog.
Creating Sitemap Page in Blogger
Here are few simple steps you need to follow to create Sitemap page in your Blogger blog easily. It’s very simple task where you just need to paste the code.
Step 1: Open Blogger
Open Blogger.com and login to your account. Choose the blog which you are working on and open the Dashboard.
Step 2: Create Page
In the Blogger Dashboard, navigate to Pages and click on New Page. Enter the Title of your choice.
Step 3: Adding Code
Go to the HTML Tab and just copy the code below and paste it there in the HTML Tab.
<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.YOURDOMAIN.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
Step 4: Customization
You simply need to change “YOURDOMAIN” with your Blog Domain and Publish the page.
That’s it, guys! You have just created Sitemap for your Blog. You can also change the CSS codes for any modifications in backgrounds too.
