How to Add an HTML Sitemap Page in Blogger

Are you looking to create an HTML Sitemap in WordPress? HTML Sitemaps are different from XML Sitemaps that you submit to search engines to improve your crawelling rate or get a quick indexsation of your new posts. HTML Sitemaps, shows an organized list of your published posts, just like a table of content. In this article, we will show you how to add an HTML sitemap page in Blogger

XML Sitemaps vs HTML Sitemaps

An XML 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.

You can check the demo of this widget here.

Adding an HTML Sitemap With All Posts in Blogger:

To add a HTML sitemap in blogger please follow the below instructions correctly:
  1. The very first thing you need to do is to  add the CSS codes so you can make your sitemap look attractive. Go to Blogger >> Template >> Edit HTML >> Search for ]]></b:skin> tag and just above it paste the following code. You can also customize the below codes to match your style of template color scheme:

    /* Sitemap plugin By MyBloggerLab */
    #bp_toc {
        color: #666;
        margin: 0 auto;
        padding: 0;
        border: 1px solid #d2d2d2;
        float: left;
        width: 100%;
    span.toc-note {
        display: none;
    #bp_toc tr:nth-child(2n) {
        background: #f5f5f5;
    td.toc-entry-col1 a {
        font-weight: bold;
        font-size: 14px;
    .toc-header-col3  {
    .toc-header-col1 {
        padding: 10px;
        width: 250px;
    .toc-header-col2 {
        padding: 10px;
        width: 75px;
    .toc-header-col3 {
        padding: 10px;
        width: 125px;
    .toc-header-col1 a:link,
    .toc-header-col1 a:visited,
    .toc-header-col2 a:link,
    .toc-header-col2 a:visited,
    .toc-header-col3 a:link,
    .toc-header-col3 a:visited {
        font-size: 13px;
        text-decoration: none;
        color: #fff;
        font-weight: 700;
        letter-spacing: 0.5px;
    .toc-header-col1 a:hover,
    .toc-header-col2 a:hover,
    .toc-header-col3 a:hover {
        text-decoration: none;
    .toc-entry-col3 {
        padding: 5px;
        padding-left: 5px;
        font-size: 12px;
    .toc-entry-col1 a,
    .toc-entry-col2 a,
    .toc-entry-col3 a {
        color: #666;
        font-size: 13px;
        text-decoration: none
    .toc-entry-col1 a:hover,
    .toc-entry-col2 a:hover,
    .toc-entry-col3 a:hover {
    #bp_toc table {
        width: 100%;
        margin: 0 auto;
        counter-reset: rowNumber;
    .toc-entry-col1 {
        counter-increment: rowNumber;
    #bp_toc table tr td.toc-entry-col1:first-child::before {
        content: counter(rowNumber);
        min-width: 1em;
           min-height: 3em;
        float: left;
        border-right: 1px solid #fff;
        text-align: center;
        padding: 0px 11px 1px 6px;
        margin-right: 15px;
    td.toc-entry-col2 {
        text-align: center;

  2. Once everything is done, press Save Template button present at the very top of your screen.

  3. Now Simply create a new page where you want to display your sitemap. Go to Blogger >> Pages >> New page. In the Blogger page editor, select HTML tab and paste the following code in the HTML code editor:

    <div id="bp_toc">
    <script src=''  type="text/javascript"></script>
    <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

  4. After pasting the above code, you can write a title of your page. If you wish you can also disable comments because you would not like people posting comments on your sitemap. Once everything is done, press Publish button.
We hope this article helped you learn how to add an HTML sitemap page in Blogger. If you enjoyed this article please share your thoughts in comments section below.

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
Choose Wisely!


August 23, 2016 at 1:02 PM

This is the cleanest good looking sitemap I've ever seen. Good job MyBloggerLab!

Editorial Team MOD
August 27, 2016 at 6:20 AM

I am glad that you liked it.


August 29, 2016 at 3:34 PM

Great info.
All the best!

September 1, 2016 at 9:49 AM

In instruction 1,u said . Go
to Blogger >> Template >> Edit HTML
>> Search for ]]> tag and
just above it paste the following
code.....Please can you illustrate with picture what you meant by JUST ABOVE IT..because i have tried but its bringing something ealse...

Editorial Team MOD
September 3, 2016 at 12:22 AM

From Above I mean over.

<--Here comes the code-->


Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.