Sitemap For Blogger
Sitemap
page is not much necessary for blogs but from some sides it's better to
have a sitemap page in menu. Sitemap page basically helps you to make
the navigation easier and it also improves page rank of our blog due to
make internal linking of our blog. Yeah! That's awesome thing to improve
internal linking because in that page, you'll see all the published
posts on your blog. Other than this, it also helps search engine's
crawler to index the content and webpage easier. So, in this post we're
going to share this sitemap page for blogger.
Sitemap Page - How It Works
Before we get started in doing tweaks with our blog for implementing
that sitemap page, I would like to describe you that how it works
actually or in other words, I'm going to explain it's feature in this
passage. First of all, This is neat and clean sitemap page which is well
coded specially for blogger blogs. It's color scheme is only blue which
you can see in the demo page. This is automated sitemap page which
automatically adds the latest posts in itself without touching it so
it's even better for us that we don't need to touch it just after
implementing in blog, it will do all the task itself. In this sitemap
page, you can see that posts are categorized by labels which is better
for readers that they can find the things in that page easily. This
sitemap page is developed with JavaScript and CSS which actually takes
the post links of our blog through Feeds of our blog. This is created by
Abu Farhan so all the credits goes to them.
Create Sitemap Page in Blogger
Don't worry buddy! You might be thinking that it will be little tough to
implement this kind of page in blogger but that's not true as you're
thinking! Though, It's the most easiest task to insert this in our
blogs. Just follow the simple steps given below.
- Go To Blogger >> Dashboard >> Pages
- Create New Page >> Blank Page
- Insert Page Title of Yours Choice.
- Go To HTML Tab
- Copy The Code Below and Paste 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.YOURBLOGDOMAIN.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
- Replace YOURBLOGDOMAIN With Your Blog Domain.
- Click "Publish" Button.
- That's it!
Post a Comment