One of my client using WinBlogTem asked a very important question that how to display all blog posts in a single static blog page. What is sitemap? Is it possible to create sitemap page in Blogger blogs? Yes! Definitely. Actually, she doesn’t know well about sitemap and its key concept. If you are a blogger and have a BlogSpot blog then read this tutorial which might help you to understand the concept behind adding a site map to your blogger blogs.
Before, we discuss about site map, you should ask yourself why have you created your blog? Is it for personal use or for public at large throughout the web world? If you have created it only for private purpose then ignore this tutorial as it is not for you. However, if your blog is for everyone on the internet, you must go through these guidelines which will definitely help to push your blog to the next level.
OK! Now, you are ready to fetch a blog page for your users to navigate your blog and all search engine bots to find all pages on your blogger blog. Most of you have a misconception about the name Sitemap. I am here discussing about Site map and not Sitemap. Are you too confused? Actually, there are two different versions of a sitemap viz. an HTML site map and XML Sitemaps. Today, we are discussing about an HTML site map page to be included on each and every page of your blogger blog. Later on I will also provide you a complete tutorial on XML sitemaps.
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:
“Make pages primarily for users, not for search engines.”
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).
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.
I am pleased to announce that SWT Blogger HTML Sitemap is ready for use on your BlogSpot.com blogs. The main features of BloggerSitemapbySWT are listed below:
A) 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.
B) 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.
C) 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.
D) 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.
E) 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.
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.
Step-2:
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
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.
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.
<!—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.