The most recent widget which we shared in the "Widgets" category was Horizontal Social Sharing Widget and today we're back wit...
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!
COMMENTS