In simple terms, the sitemap of your website is the listing of all the posts. Through Sitemaps, Search Engine can easily understand that, your blog / website has these post. As a result, the search engine brings your site in the search results by content Index. This is the way to add posts to search engines and allow the various search engines to find your blog / website. But I'll make it out of HTML, Sitemap Page for your reader. How many posts are in your blog readers will find out easily.
What are the advantages of doing it?
- The advantage being that the HTML Sitemap Page will show Label wise posts title.
- Visitors will be able to easily visit the links of their choice.
- Moreover, the new posts will automatically be updated there.
- Indicate if there are new posts in the blog.
This blog post will likely have been too many times in different websites. Still new to share, because I have added new features along with all Browsers Compatibility. Which would make it more attractive. We hope you'll enjoy it. From here you can go to see the demo.
How to make it?
- First, login to your blog.
- The Blogger Dashboard > Pages.
- Now click on the Create a New Page.
- Then click on the page in HTML.
- Copy and paste HTML codes in the following pages.
<style type="text/css">#sitemap { width:100%; margin:5px auto; margin-left: 4px; border:1px solid #23A839; border-top:0px solid #2D96DF;}.label { color:#FF5F00; font-weight:bold; margin: -16px -1px 0px; padding:1px 0 2px 11px; background: -webkit-linear-gradient(right,#6DFC85 0%,#23A839 40%); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right,#6DFC85 0%,#23A839 40%); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right,#6DFC85 0%,#23A839 40%); /* For Firefox 3.6 to 15 */ background: linear-gradient(right,#6DFC85 0%,#23A839 40%); /* Standard syntax */ border:1px solid #23A839; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; display:block;}.label a {color:#fff;}.label:first-letter {text-transform:uppercase;}.new { color:#FF5F00; font-weight:bold; font-style:italic;}.postname { font-weight:normal; background: -webkit-linear-gradient(right,#6DFC85 0%,#FFF 40%); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right,#6DFC85 0%,#FFF 40%); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right,#6DFC85 0%,#FFF 40%); /* For Firefox 3.6 to 15 */ background: linear-gradient(right,#6DFC85 0%,#FFF 40%); /* Standard syntax */}.postname li { border-bottom: #DDD 1px dotted; margin-right:5px}a:link {text-decoration:none;}a:visited {text-decoration:none;}a:hover {text-decoration:underline;}</style>
<div id="sitemap"><script type="text/javascript" src="https://harunzoki.googlecode.com/svn/trunk/Sitemap.js"></script><script src="http://www.writingcraze.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadsitemap"></script></div>
- Now replace www.writingcraze.com with your blog's address.
- Finally, click the Publish button to finish the job.
