ADD HTML SITEMAP PAGE TO BLOGGER BLOG | GOOGLE SITEMAP.

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 create HTML sitemap page in Blogger.

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.

<div id="tabbed-toc">
<span class="loading">Loading, please wait…...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://blogsnucleus.blogspot.com/", // 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: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>New!</em>" // HTML/CSS for
//the "New!" text
};
</script>
<script src="http://yourjavascript.com/51107864021/tabbed-toc-defaults.js" type="text/javascript"></script>
<style>
/*Sitemap  */
#tabbed-toc {
 width: 99%;
 margin: 0 auto;
 overflow: hidden !important;
 position: relative;
 color: #222;
 border: 0;
 border-top: 5px solid #FC0204;
 background-color: #1D1D1D;
 -webkit-transition: all 0.4s ease-in-out;
}
#tabbed-toc .loading {
 display:block;
 padding:5px 15px;
 font:normal bold 11px Arial,Sans-Serif;
 color:#FFF;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
 margin:0;
 padding:0;
 list-style:none;
 }
#tabbed-toc .toc-tabs {
 width: 24.8%;
 float: left !important;
}
#tabbed-toc .toc-tabs li a {
 display:block;
 font:normal bold 10px/28px Arial,Sans-Serif;
 height:28px;
 overflow:hidden;
 text-overflow:ellipsis;
 color:#ccc;
 text-transform:uppercase;
 text-decoration:none;
 padding:0 12px;
 cursor:pointer;
  -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .toc-tabs li a:hover {
 background-color: #515050;
 color: #FFF;
 }
#tabbed-toc .toc-tabs li a.active-tab {
 background-color: #0384ff;
 color: #222;
 position: relative;
 z-index: 5;
 margin: 0 -2px 0 0;
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
 width: 75%;
 float: right !important;
 background-color: #F5F5F5;
 border-left: 5px solid #0384ff;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .divider-layer {
 float:none;
 display:block;
 position:absolute;
 top:0; right:0; bottom:0;
}
#tabbed-toc .panel {
 position:relative;
 z-index:5;
 font:normal normal 10px Arial,Sans-Serif;
}
#tabbed-toc .panel li a {
 display: block;
 position: relative;
 font-weight: bold;
 font-size: 11px;
 color: #222;
 line-height: 2.8em;
 height: 30px;
 padding: 0 10px;
 text-decoration: none;
 outline: none;
 overflow: hidden;
 -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li time {
 display:block;
 font-style:italic;
 font-weight:400;
 font-size:10px;
 color:#666;
 float:right;
}
#tabbed-toc .panel li .summary {
 display:block;
 padding:10px 12px;
 font-style:italic;
 border-bottom:4px solid #275827;
 overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
 float:left;
 display:block;
 margin:0 8px 0 0;
 padding:4px;
 width:72px;
 height:72px;
 border:1px solid #dcdcdc;
 background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
 background-color: #DBDBDB;
 font-size: 10px;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
 background-color:#222;
 color:#FFF;
 outline:none;
 -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
 background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
 background-color:#fff;
 border:0 solid #888;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
 overflow:hidden;
 width:auto;
 float:none !important;
 display:block;
}
#tabbed-toc .toc-tabs li {
 display:inline;
 float:left !important;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
 background-color:#222;
 color:#ccc;
}
#tabbed-toc .toc-tabs li a.active-tab {
 color:#000;
}
#tabbed-toc .toc-content {
 border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
 display:none;
}
}
</style>

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.

Share This!

If you find this useful, we would appreciate a link from your website or a mention on your social network. Thanks!

<a href="https://blogsnucleus.blogspot.com" title="Blogger Blog Tips and Tricks"> Blogger Blog Tips and Tricks </a>

The above HTML code will produce the following link:

Blogger Blog Tips and Tricks