How to Add Sitemap Widget In Blogspot Blog

Hello friends! Today in this article we are going to talk about How to Add Sitemap Widget In BlogSpot Blog. We will know all the How to Add Sitemap Widget In BlogSpot Blog. So stay with this article to know in more detail.


It is very important to include the sitemap in the block on your blog. A sitemap is not just a page but it minimize the bounce rate by providing navigation to label a blog post. The sitemap widget given in today post will not affect the speed of your blog and will complete your loading faster.


How to Add a Sitemap Widget to Your Blog You must follow the steps below to successfully add a Sitemap widget to your blog.

$ads={2}

How to Add Sitemap Widget In BlogSpot Blog (Step by Step)

Before you know the steps to add Sitemap Widget in Blogger Blog, we would recommend you to make a backup of your Blog template, because if anything goes wrong then you have save your blog design safely.

  • Login to your Blogger.com dashboard
  • Click on Theme Section and then click on the Customize arrow
  • Now click on Edit HTML
  • Now click on the code section and press Ctrl+F, you will see a search bar on the display screen.
  • Copy the below code
  • Search for ]]></b:skin>, Paste the code above to this ]]></b:skin> code


.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

}


  • Now again press Ctrl+F and search for </body> and copy the below code.
  • Paste this code just below to the </body> code.

$ads={2}


<script type='text/javascript'> 

            //<![CDATA[

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

var no_image_url = "http://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/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>


  • Now click on Save theme icon.
  • Now, Again open your Blogger Dashboard
  • Click on Pages Section
  • Click on New Page
  • Give the Suitable Title of your page and paste here the following Code in content area.

[sitemap]

  • I hope you guys enjoyed the Sitemap Widget in your Blogger Blog. Now enjoy this Sitemap Widget in your Blogger Blog.


Conclusion:

The purpose of today post is to provide you with the How to Add Sitemap Widget In BlogSpot Blog. Did you like these How to Add Sitemap Widget In BlogSpot Blog? You must definitely give us your feedback in the comment box below. If you also want to give us any kind of Suggestion, then share your opinion with us in the Comment Box.

Thank You!

Post a Comment

Please do not enter any spam link in the comment box.