How to create automatic sitemap for blogger | Just in 3-Steps

Automatic Sitemap for blogger

(toc) Table of Content

What is a sitemap?

A sitemap is a file or a web page on which each and every link of your website is visible. It is used to navigate through your complete website from a single page. If you are running an e-commerce store, a blog, or a service website, you will tend to attract visitors for everything you have.

Why do we use sitemaps on websites?

We create our website with sleek and decent designs and hence everything is not visible to a visitor on first look. Imagine creating a page that can serve as a key house to your website. On the sitemap page, you will find each and every link to the page or posts. 

What is an automatic sitemap on websites?

We all know, that updating each and every link of page and post is not feasible and possible. So we have a simple solution for you here. You just have to follow only 3 given steps and your automatic sitemap will be ready. You don't have to update every link, the sitemap code will automatically detect the new post and pages, then add the new links to the page. 

Step 1: Adding CSS to the theme.

You don't have to worry about the code editing, we will guide you to do it properly.

Log into your blogger account > Go to Themes > Click pencil icon > Click edit HTML. (alert-success)

You will see the theme code, just find ]]></b:skin>  by pressing CTRL + F and pasting it in the search bar.

Paste this code just before ]]></b:skin> and click save.

/* ######## Navigation Menu Css by umairacademy.com ######################### */

.mapasite {

    margin-bottom: 10px;

    background-color: #F8F8F8

}

.mapasite.active .mapa {

    display: block

}

.mapasite .mapa {

    display: none

}

.mapasite h2 {

    background-color: #EEE;

    color: #000;

    font-size: 15px;

    padding: 10px 20px;

    border-radius: 2px;

    margin-bottom: 0;

    cursor: pointer;

    font-weight: 700

}

.mapasite h2 .botao {

    font-size: 18px;

    line-height: 1.2em

}

.botao .fa-minus-circle {

    color: #f30

}

.mapapost {

    overflow: hidden;

    margin-bottom: 20px;

    height: 70px;

    background-color: #FFF

}

.mapa {

    padding: 40px

}

.map-thumb {

    background-color: #F0F0F0;

    padding: 10px;

    display: block;

    width: 65px;

    height: 50px;

    float: left

}

.map-img {

    width: 65px;

    height: 50px;

    overflow: hidden;

    border-radius: 2px

}

.map-thumb a {

    width: 100%;

    height: 100%;

    display: block;

    transition: all .3s ease-out!important;

    -webkit-transition: all .3s ease-out!important;

    -moz-transition: all .3s ease-out!important;

    -o-transition: all .3s ease-out!important

}

.map-thumb a:hover {

    -webkit-transform: scale(1.1) rotate(-1.5deg)!important;

    -moz-transform: scale(1.1) rotate(-1.5deg)!important;

    transform: scale(1.1) rotate(-1.5deg)!important;

    transition: all .3s ease-out!important;

    -webkit-transition: all .3s ease-out!important;

    -moz-transition: all .3s ease-out!important;

    -o-transition: all .3s ease-out!important

}

.mapapost .wrp-titulo {

    padding-top: 10px;

    font-weight: 700;

    font-size: 14px;

    line-height: 1.3em;

    padding-left: 25px;

    padding-right: 10px;

    display: block;

    overflow: hidden;

    margin-bottom: 5px

}

.mapapost .wrp-titulo a {

    

}

.mapapost .wrp-titulo a:hover {

    color: #f30;

    text-decoration: underline

}

.map-meta {

    display: block;

    float: left;

    overflow: hidden;

    padding-left: 25px;

}

.mapasite h2 .botao {

    float: right

} (code-box)

Step 2: Adding HTML to the theme. 

In the theme code, just find </body> and paste the following code just before it.

<script type='text/javascript'> 

            //<![CDATA[

var text_month = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];

var no_image_url = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwkL7TrJLfwWBYNafmbcnQXk0qHx9xCwvuOvdNNjlgT9yiqNmlP3iXMrgeF9_Y64KV4NVjFqn-Qtbq8lGPYCJikI_Y8YrjOW0ww35SusPbzayAhyphenhyphenk2COoVrC9cKiaOB6NUhlYWTsZNTLk/s1600-r/nth.png";

           var static_page_text = $.trim($('.static_page .post-body').text());

if (static_page_text === "[sitemap]") {

    var postbody = $('.static_page .post-body');

    $.ajax({

        url: "/feeds/posts/default?alt=json-in-script",

        type: 'get',

        dataType: "jsonp",

        success: function(dataZ) {

            var blogLabels = [];

            for (var t = 0; t < dataZ.feed.category.length; t++) {

                blogLabels.push(dataZ.feed.category[t].term)

            }

            var blogLabels = blogLabels.join('/');

            postbody.html('<div class="siteLabel"></div>');

            $('.static_page .post-body .siteLabel').text(blogLabels);

            var splabel = $(".siteLabel").text().split("/");

            var splabels = "";

            for (get = 0; get < splabel.length; ++get) {

                splabels += "<span>" + splabel[get] + "</span>"

            }

            $(".siteLabel").html(splabels);

            $('.siteLabel span').each(function() {

                var mapLabel = $(this);

                var mapLabel_text = $(this).text();

                $.ajax({

                    url: "/feeds/posts/default/-/" + mapLabel_text + "?alt=json-in-script",

                    type: 'get',

                    dataType: "jsonp",

                    success: function(data) {

                        var posturl = "";

                        var htmlcode = '<div class="mapa">';

                        for (var i = 0; i < data.feed.entry.length; i++) {

                            for (var j = 0; j < data.feed.entry[i].link.length; j++) {

                                if (data.feed.entry[i].link[j].rel == "alternate") {

                                    posturl = data.feed.entry[i].link[j].href;

                                    break

                                }

                            }

                            var posttitle = data.feed.entry[i].title.$t;

                            var author = data.feed.entry[i].author[0].name.$t;

                            var get_date = data.feed.entry[i].published.$t,

                                year = get_date.substring(0, 4),

                                month = get_date.substring(5, 7),

                                day = get_date.substring(8, 10),

                                date = text_month[parseInt(month, 10)] + ' ' + day + ', ' + year;

                            var tag = data.feed.entry[i].category[0].term;

                            var content = data.feed.entry[i].content.$t;

                            var $content = $('<div>').html(content);

                            var src2 = data.feed.entry[i].media$thumbnail.url;

                            htmlcode += '<div class="mapapost"><div class="map-thumb"><div class="map-img"><a href="' + posturl + '" style="background:url(' + src2 + ') no-repeat center center;background-size: cover"/></div></div><h3 class="wrp-titulo"><a href="' + posturl + '">' + posttitle + '</a></h3><div class="map-meta"><span class="p-author">' + author + '</span><span class="p-date">' + date + '</span></div></div>'

                        }

                        htmlcode += '</div>';

                        mapLabel.replaceWith('<div class="mapasite"><h2>' + mapLabel_text + '<span class="botao"><i class="fa fa-plus-circle"></i></span></h2>' + htmlcode + '</div>');

                        $(document).on('click', '.mapasite h2', function() {

                            $(this).parent('.mapasite').addClass('active');

                            $(this).find('.botao .fa').removeClass('fa-plus-circle').addClass('fa-minus-circle');

                        });

                        $(document).on('click', '.mapasite.active h2', function() {

                            $(this).parent('.mapasite').removeClass('active');

                            $(this).find('.botao .fa').addClass('fa-plus-circle').removeClass('fa-minus-circle');

                        });

                    }

                });

            });

        }

    });

}

            //]]>

</script> (code-box)

Step 3: Adding Sitemap Page in Blogger. 

Now almost we are done, just we need to use this code on our pages.

Go to Pages > Add New Page > Hide Title & Comments > Write this code and then BLOCKQUOTE it. (alert-success)

[sitemap] (code-box)

After you have done all three steps, your sitemap is ready to view. You can see how it looks. 

CLICK HERE TO SEE SITEMAP EXAMPLE