Tuesday , November 21 2017

How to Create Sitemap Page in Blogger

A few days ago I published two posts about submitting a blog sitemap to Google and Bing webmaster tools, but this sitemap only for search engines, and this also good idea if you make a sitemap page for visitors too. You will be noticed that many bloggers created a sitemap page in their blog. This page helpful for visitors to easily reach a blog all articles as well as for search engine crawling bots to quickly index your blog posts. In this post, I would like to show how to create awesome CSS sitemap page in a blogger.

Create Sitemap Page in Blogger

How to Create Beautiful CSS Sitemap Page in Blogger blog

1. Login to your blogger account
2. Go to create new page >> blank page. Write sitemap in the title
3. Paste the below code in HTML tab and publish the page.
 /* 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 {
 .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;}
 <div id="bp_toc">
 <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;}
So friends you learned how to create a beautiful CSS sitemap page in blogger with help CSS. Well, I am waiting for your feedback in the comment section.

Check Also

social media share button for blogger

Responsive Social Media Share Buttons for Blogger

Are you looking for social media share button for blogger? In this post, I want …


  1. Frankly i have no idea about any of these languages but i have used your post to create a beautiful sitemap page ! FINALLY ! :p

    thanks mate….

Leave a Reply

Your email address will not be published. Required fields are marked *