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.
#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{text-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}
- Replace YOURBLOGDOMAIN With Your Blog Domain.
- Click "Publish" Button.
- Thats it.......!!!!!!!!!!!!!
Final Words
I hope you will like is Happy Blogging....!!!!!!!!!!!!
0 comments:
Post a Comment