Add HTML Site map to Blogger Blog for visitors and Search Engine
How to create and add HTML site map static page to your blogger BlogSpot blogs which helps both website live visitors as well as Search Engine bots.
Moreover, Matt cuts, the head of Google’s Web spam team also emphasis on creating HTML site map. That means google loves those sites which are user friendly and gain better user experience rather than those website owners who
wastes their precious time in finding loopholes so that they rank well in SERPs
(Search Engine Results Pages).
How to create and add HTML site map static page to your blogger BlogSpot blogs which helps both website live visitors as well as Search Engine bots.
Moreover, Matt cuts, the head of Google’s Web spam team also emphasis on creating HTML site map. That means google loves those sites which are user friendly and gain better user experience rather than those website owners who
wastes their precious time in finding loopholes so that they rank well in SERPs
(Search Engine Results Pages).
Which is better: an HTML site map or XML Sitemap
HTML site map
HTML site map
How to create SWT HTML Site map page in Blogger Blogs
With these simple steps you may create a HTML site map for your blog readers as well as search engine bots.
Step-1:
Login to your blogger account and go to the Dashboard of the particular blog in which you want to add the static HTML site map page.
Login to your blogger account and go to the Dashboard of the particular blog in which you want to add the static HTML site map page.
Step-2:
Select Pages from the left Navigation bar and click on New Page.
Select Pages from the left Navigation bar and click on New Page.
Step-3:
Give page title “Sitemap” without quote and hit the Publish menu button. This process will create your blog static site map HTML page with the exact sitemap URL like –
http://YourBlogName.blogspot.com/p/sitemap.html
Give page title “Sitemap” without quote and hit the Publish menu button. This process will create your blog static site map HTML page with the exact sitemap URL like –
http://YourBlogName.blogspot.com/p/sitemap.html
Step-4:
From the opened window, click on the name of that sitemap page so that page editor will open again. Now, you may change the title again as you wish viz. Site Map and Archive of All Posts at a Glance.
From the opened window, click on the name of that sitemap page so that page editor will open again. Now, you may change the title again as you wish viz. Site Map and Archive of All Posts at a Glance.
Step-5:
Now, go to the HTML mode of that page and paste the following codes. You may also write something on this page for your users before publishing it.
Now, go to the HTML mode of that page and paste the following codes. You may also write something on this page for your users before publishing it.
- <!—SWT Blogger Site Map START --><style> #swtBPT { background: transparent; width: 100%; color: #999; margin: 0 auto; padding: 5px; } span.swtBPT-MessageBox { display: block; background: #0A6474; color: #ECF1F4; text-align: center; font-family: cursive; font-size: large; } #swtBPT table { width: 100%; margin: 0 auto; border: 1em solid #0A6474!important; border-collapse: collapse; border-spacing: 0; border-color: transparent; } .swtBPT-Header-Posts, .swtBPT-Header-Dates, .swtBPT-Header-Labels { padding: 1em !important; line-height: 1em; text-align: center; color: azure; transition: all .4s ease-in-out; } .swtBPT-Header-Posts { background: #23A596; } .swtBPT-Header-Dates { background: #23AE84; } .swtBPT-Header-Labels { background: #18A993; } .swtBPT-Header-Posts:hover, .swtBPT-Header-Dates:hover, .swtBPT-Header-Labels:hover { background: #0A6474; color: #FAFBFC; } .swtBPT-Header-Posts a:link, .swtBPT-Header-Posts a:visited, .swtBPT-Header-Dates a:link, .swtBPT-Header-Dates a:visited, .swtBPT-Header-Labels a:link, .swtBPT-Header-Labels a:visited { font-size: 1em; text-transform: uppercase; text-decoration: none; color: #fff; font-family: Georgia, serif; font-weight: 800; letter-spacing: 1px; } .swtBPT-Header-Posts a:hover, .swtBPT-Header-Dates a:hover, .swtBPT-Header-Labels a:hover { text-decoration: none; } tfoot.swtBPT-Right, tfoot.swtBPT-Right a { background: #0A6474; color: #FAFBFC; text-align: center; font-family: -webkit-body; font-size: small; } #swtBPT tbody:nth-child(even) { background: #9FD7D2; color: #34887E; } #swtBPT tbody:nth-child(odd) { background: #8BD0CA; color: #34887F; } .swtBPT-PostsTitles, .swtBPT-PostsDates, .swtBPT-PostsLabels { font-size: 88%; padding: 10px; transition: all .3s ease-in-out; } .swtBPT-PostsTitles:hover, .swtBPT-PostsDates:hover, .swtBPT-PostsLabels:hover { background: #fff; } .swtBPT-PostsTitles a, .swtBPT-PostsDates a, .swtBPT-PostsLabels a { text-decoration: none; color: #666; transition: all .3s ease-in-out; } .swtBPT-PostsTitles a:hover, .swtBPT-PostsDates a:hover, .swtBPT-PostsLabels a:hover { color: #f65476; } </style><div id="swtBPT"> Loading SWT Blogger HTML Sitemap. Please wait....</div> <noscript>Either you have disabled scripts in your browser or your browser does not support JavaScript!</noscript><script src="https://9e03e74125fb7ace004443ce27e5dcd1808a3961.googledrive.com/host/0B-tJ1weveGVDQWsyWjRNbHhtWFk/swtBPT.js"></script>
- <script src="/feeds/posts/default?alt=json-in-script&max-results=500&callback=BloggerSitemapbySWT" type="text/javascript"></script>
- <!—SWT Blogger Site Map END -->
Finally, Publish your Site Map page and Enjoy!
As you have created this HTML site map page for your blog users, I strongly recommend you to link this page to every pages of your blog i.e. either at the end of each blog posts or in header/footer or sidebar etc.