How to add Beautiful HTML SITEMAP page to Blogger Blog?

A sitemap is a directory that comprises a website’s content organized by topics, published date or by labels to help both search engines and users navigate through the site easily. It helps in fast indexing of your contents and increases crawl rate. There are two types of sitemaps: XML Sitemap and HTML Sitemap. In this article, firstly I will explain about these sitemaps and secondly share the code to add beautiful HTML Sitemap page to blogger.

What is a XML Sitemap Page?

A XML Sitemap is a .xml file attached to your web address. It consists of all pages URL with additional information about each URL that a search engine crawler (bot) uses to navigate the page contents. For instance, is a XML Sitemap page for our blog. Copy the address, load it, and you’ll have a file downloaded. Open that file to see the contents. The search engine uses the same file to know about published contents. Submission of XML Sitemap page to Google Webmaster Tools assures that the Google bot crawls pages.

What is a HTML Sitemap Page?

An HTML Sitemap Page is a .html webpage, made up of all published contents organized by labels, dates, or topics. It helps users navigate through the contents easily. For instance, you can check the sitemap page of our blog to find out all published articles organized by labels. Isn’t that cool? Today I’ll share a simple trick to add beautiful HTML Sitemap page to blogger.

Features of this premium sitemap page

  • Lists articles based on labels.
  • Automatically adds "New" tag to latest articles.
  • Labels are neatly separated.
  • A lightweight Javascript used.
  • Beautiful color combination.
  • Articles are numbered automatically on each labels.
  • Easy for users to navigate through the posts.
  • Sorted alphabetically (A to Z).

Live Demo Of HTML Sitemap for blogger
    add html sitemap page in blogger
    Fig 1: HTML Sitemap Page For Blogger -without hover
    stylish sitemap page for blogger
    Fig 2: HTML Sitemap Page For Blogger - with hover

    How to add HTML Sitemap Page to blogger?

    First of all, we will create a sitemap page from blogger dashboard, and later add the codes.

    Step 1: Create a Sitemap Page On Your blog

    Go to Blogger > Pages > New Page and Enter the title "Sitemap" . Click on Page Settings, modify the page settings as shown below.

    create and add a stylish sitemap to blogger

    Step 2: Adding HTML Sitemap page to blogger

    Switch to HTML Editor and Press CTRL + A, remove existing code and paste the following code. Hit Publish and you're done. Now, you have a fresh, stylish, beautiful and premium HTML Sitemap page in blogger.
     * ---------------------------------------------------
     * by Taufik Nurrohman
     * URL:
     * Modified by TwistBlogg
     * URL:
     * ---------------------------------------------------
    <div dir="ltr" style="text-align: left;" trbidi="on">
    <style type="text/css">
    .tb-sitemap {
        background-color: #222;
        color: #ddd;
        font-family: Verdana,Geneva,Tahoma,Arial,Sans-serif;
        font-size: 14px;
        font-weight: 410;
        overflow: hidden;
        border-radius: 5px;
        box-shadow: 0 0 9px rgba(0,0,0,.1);
    .tb-sitemap .toc-header {
        color: #fff;
        font-family: inherit;
        font-weight: 410;
        font-size: 14px;
        background-color: #1A1B1E;
        margin: 0;
        padding: 13px;
        overflow: hidden;
        cursor: pointer;
        border-top: 1px solid #5c5c5c;
        border-bottom: 1px solid #5c5c5c;
        transition: initial;
    .tb-sitemap .toc-header:hover {
        background: rgb(0,52,52);
        background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(3,106,30,1) 38%, rgba(0,182,182,1) 100%);
    .tb-sitemap .toc-header:before {
        content: '';
        width: 0;
        height: 0;
        position: relative;
        top: 10px;
        right: 10px;
        border: 5px solid transparent;
        border-color: #aaa transparent transparent;
        transition: all .3s ease;
    .tb-sitemap {
        background: #1a1b1e;
        color: #fff;
    .tb-sitemap {
        border-color: #fff transparent transparent;
        top: 5px;
        -webkit-transform: rotateundefined-180deg);
        -moz-transform: rotateundefined-180deg);
        -ms-transform: rotateundefined-180deg);
        -o-transform: rotateundefined-180deg);
        transform: rotateundefined-180deg);
    .tb-sitemap .loading {
        display: block;
        padding: 14px;
        text-decoration: blink;
    .tb-sitemap ol {
        margin: 0;
        padding: 0;
        list-style: none;
        transition: initial;
    .tb-sitemap li {
        counter-increment: step-counter;
        line-height: normal!important;
        margin: 0!important;
        padding: 7px 7px 7px 16px!important;
        white-space: nowrap;
        text-align: left;
        overflow: hidden;
        transition: initial;
    .tb-sitemap li:first-child {
        background: rgb(0,52,52);
        background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(0,0,0,1) 38%, rgba(71,62,62,1) 100%);}
    .tb-sitemap li:nth-child(2n) {
        background: rgb(71,62,62);
        background: linear-gradient(90deg, rgba(71,62,62,1) 19%, rgba(0,0,0,1) 38%, rgba(0,52,52,1) 100%);}
    .tb-sitemap li:nth-child(2n+3) {
        background: rgb(0,52,52);
        background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(0,0,0,1) 38%, rgba(71,62,62,1) 100%);}
    .tb-sitemap li::before {
        content: counter(step-counter)'.';
        margin-right: 5px;
    .tb-sitemap a {
        color: #fff!important;
        text-decoration: none;
        font-size: 90%;
        transition: initial;
    .tb-sitemap a:visited {
        color: #fff!important;
        transition: initial;
    .tb-sitemap a:hover,.tb-sitemap a:visited:hover {
        color: #fff!important;
        text-decoration: underline!important;
        transition: initial;
    <div class="tb-sitemap" id="tb-sitemap">
    <span class="loading">Sitemap Loading..</span>
    <script type="text/javascript">
    var toc_config = {
     url: '',
     containerId: 'tb-sitemap',
     showNew: 12,
     newText: ' <strong style="font-weight:normal;font-style:normal;color:#000;font-size:11px;background:#fff000;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">New!</strong>',
     sortAlphabetically: {
      thePanel: true,
      theList: true
     maxResults: 9999,
     slideSpeed: {
      down: 400,
      up: 400
     slideEasing: {
      down: null,
      up: null
     slideCallback: {
      down: function() {},
      up: function() {}
     clickCallback: function() {},
     jsonCallback: '_toc',
     delayLoading: 0
    <script src="" type="text/javascript"></script>
    Change Blog address.

    Done !! You've successfully installed beautiful HTML sitemap page in blogger.

    Here are a hand picked tutorials for you to read next:

    Trending Posts