How To Create A Beautiful SiteMap For Your Blog Visitors

Sitemap helps your visitor to easily navigate through your blog or website to find what he is looking for in an instant. It contains the list of all your blog content. There are two types of Sitemap, the first one is .XML Sitemap for search engines only to index your blog contents, that type of sitemap cannot be read by human.

The second type of sitemap is CSS sitemap which is specifically made for humans i.e your blog visitors. In this short lesson, you will learn how you can finally create a beautiful sitemap for your blog visitors without any coding knowledge.

This sitemap contains the list of all your blog post and the date they were published, to make it more awesome, it contains the labels (categories) so that your site users can easily find what they are looking for. This sitemap will help you get approved for adsense quickly, as you may have learnt, adsense will not approve your site if you do not have an easy navigation, which sitemap clearly provides.

Add CSS Sitemap To Blogger

To create sitemap in blogger:
1. Go to your blog and click on "Pages" > "New Page"
2. Switch to "HTML" editor of your blogger editor
3. Type "Sitemap" in the title area
4. Copy the code below and paste in HTML editing space in your editor.

CODE :

<style> /* CSS Full Sitemap */ #bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;} span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;} .toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;} .toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;} .toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;} .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px; text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;} .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { text-decoration:none;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%} .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;} .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;} #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;} .toc-entry-col1 {counter-increment:rowNumber;} #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;} td.toc-entry-col2 {background:#fafafa;} </style> <div id="bp_toc"> </div> <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script> <style scoped="" type="text/css"> #comments {display:none;} </style>

5. Publish your page

You can now view the sitemap. You can change the background to match the desgin of your blog
To change the background colour, find this code: background:#ffaaa4;
And change the colour code, You can generate the code for any colour of your choice using our colour code generator here



Hope it works out for you, this awesome sitemap will give some professionalism to your blog, enjoy it and share with your friends.
Let me know how it works out for you in the comment section.