Add HTML Site map to Blogger Blog for visitors and Search Engines

HTML site map basically created for users. If you read the very first line of basic principles under Quality Guidelines provided by Google for Webmasters you will see the following point. Many website owner provides related posts widget to the users at the end of each posts to keep live visitors engaged with more contents. You may also link to your site map page similarly to navigate the large archive of content pages from a single static blog page.

Features :

• This HTML sitemap will display all posts title of your blog with links along with its published/ last modified dates and tagged labels in a tabular form. It also shows the number of posts in your blog.

• Automatic updating is one of the best feature of this site map page i.e. all your future blog posts will automatically added to this sitemap. Additionally, this SWT blogger sitemap will also work even you are using a responsive blogger template.

• I have inserted a user friendly sorting options in the Headings named Post Titles, Post Date and Labels. In other words, your blog readers may sort posts title from ascending (i.e. 0 to 9, A to Z) to descending (i.e. 9 to 0, Z to A) order. He/she may sort the blog posts with the newest to oldest dates and vice versa.

• Your blog readers may filter all posts filed under a specific label/category. That means if your live visitors want to see only posts with label (say SEO) then he/she can filter all blog posts tagged with label SEO. It also display the number of blog posts associated with that filtered label i.e. SEO.

• Last but not least I have also manage to show the blog posts snippets on hover your mouse cursor over the posts titles.

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.

• 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.

• Select Pages from the left Navigation bar and click on New Page.

• 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

• 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

• 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.

Tags:

html sitemap for blogger, html sitemap generator for blogger