How to Create Sitemap For Blogger

6
32

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.

Create Sitemap for Blogger

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.

create page

Step 3: Adding Code

Go to the HTML Tab and just copy the code below and paste it there in the HTML Tab.

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&amp;alt=json-in-script&amp;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.

 

6
Leave a Reply

avatar
6 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
Sachin kabadagimoonwaterEko PurnomokishoreArjun Meghan Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Arun
Guest
Arun

Imran anna this site-map code not working.im giving the screen… Read more »

Arjun Meghan
Guest

Thanks Imran, no google search for Blogger Helps, everything is… Read more »

kishore
Guest

Imran bro this sitemap code is not working for me… Read more »

Eko Purnomo
Guest
Eko Purnomo

How about customization, for example how to sort post? how… Read more »

moonwater
Guest
moonwater

Not working. ?

Sachin kabadagi
Guest

Exactly this is needed for me