How to create a good sitemap for blogger blog for your visitors.

Sitemap is a page which lists all the posts in your blog in a professional way according to your labels. Sitemaps are really useful as it make your blog more interactive and easy to explore. It also helps in increasing traffic. But blogger do not have any gadget to add the sitemap directly to a blogger blog. But you can see this blog is also having a sitemap (See the tabs above) and you can add one to your blog in few simple steps.
Good this about the site map is gets updated automatically every time you add a new post.

(Note- This sitemap if for your visitors (Humans) not for submitting to search engines (Bots)

Step 1- Log in to your Google account.


Step 2- Open Blogger dashboard and select “Pages” from the Options panel on the left side.

Step 3- Create a New page and select “HTML view”

Step 4- Copy the entire below code and paste on your page (HTML view)

REPLACE THE URL IN THE RED WITH YOUR OWN BLOG’S 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://techandonlinestuff.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
</div>"

Step 5- Publish the page.

Congratulations! Now you have a cool sitemap on your blog.
Please leave your questions and feedbacks in the comment section below. Share this article. Like us on Facebook. Support by doing +1 this blog!

No comments:

Post a Comment

Please take a sec to share :-)

Related Posts Plugin for WordPress, Blogger...

About Me

Hello there, I am a student studying in class 12. Computers, technology, internet are my areas of interest. I have learned a lot about coding, designing, internet since I was in class 8 and still learning. Now I want to share my knowledge with everyone so they can also get benefit from that.