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!
Final Words
That was the simple sitemap page for blogger which I liked to share
today with you guys and I hope this little post is going to help those
who're in need for this kind of sitemap page. If you're in a problem
while implementing this in your blog then feel free to post a comment
below and also share your views. Share this post with your friends if
you're going to use this in your blog. Take a lot of care and keep calm
we're going to be back with latest widgets soon!
Get Free UpDates ?
If yes, Then enter your email below to get
more such great articles in your inbox
Powered By HAmza Gujjar Get Free !
Posts
0 comments:
Post a Comment