Are you trying to create an HTML Sitemap page for your blogger blog? HTML Sitemap are different from XML Sitemap that you submit to search engines to improve your crawling rate or get a quick indexing of your new posts. HTML Sitemaps, shows an prepared list of your published posts, just like a table of content.
Blogging experts says, a google sitemap page is one of the most important pages on every blog. It helps to increase the user engagement on our blog and makes it more user friendly.
By using the html script sitemap page, visitors of your blog can easily navigate through the all of your published post under different groups they are interested in.
After all your blog's page-views increase and bounce rate decrease. Good for SEO :)
I personally use the sitemap page on my own blog for a long time, so I can say it is one of the most visited pages on my blog. When visitors find out the content on your blog more useful, they search for more content like this on your blog and if a sitemap page is available on your blog.
XML Sitemaps vs HTML Sitemaps
An XML sitemap created with the help of an XML markup language and are especially intended for search engines. You can create and submit your site's XML sitemap in webmaster tools, which will not only improve your site's crawling rate but also quick indexation of your site.
On the other hand, HTML sitemaps are created with plain Hyperlink Text Markup Language and are especially intended for your website visitors. It is usually used to list all the post or pages that are published on your site.
Creator of this HTML Sitemap codes:
The code I am going to share is issued by +Taufik Nurrohman. He is an Indonesian and he has done so much for blogger platform users by releasing the amazing scripts for free. We owe to him.
Most of the template designers who are selling blogger templates on ThemeForest.com use his scripts to add amazing functionalities and awesome features to their templates.
Demo Screenshot of Sitemap Page We Are Going To Add
How to add an HTML sitemap page in BlogSpot blog
Step-1:
Login to your blogger account and go to the Dashboard.
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 Ex: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.
Loading, please wait…...
", // Enter your blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Default thumbnail size
noThumb: "", // A "no thumbnail" URL
monthNames: [ // Array of month names
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true, // Open link in new window. `false` to open in same window
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts or
//define how many recent posts are to be marked by changing the number
newText: " - New!" // HTML/CSS for
//the "New!" text
};
Customize: -
1) To change the message which appears before the sitemap is loaded, change this "Loading, please wait ..." line to your own.
2) Replace my blog URL with your blog URL by replacing http://blogsnucleus.blogspot.com/ and those who are using the custom domain name, change your country specific extension to .com at the end of the URL.
For example, change http://yourblog.blogspot.in to http://yourblog.blogspot.com where .in is a country specific TLDN for Indian users, got it?
3) Color scheme is BLUR and you may like to change it to your blog's color scheme. To change the yellow color just replace this #0384ff color code to your own which appears two times in the CSS code above.
Finally, publish your Site Map page and Enjoy!
Recommended: Add Blogger Contact Form to Any Static Page. link this HTML sitemap page to every page of your blog i.e. either at the end of each blog posts or in header/footer or sidebar etc.
