HOT!Join Our Community For Exclusive Blogging IdeasClick Here

How to Add Sitemap Widget In Blogspot Blogs


Sitemap is the most essential thing which every blogger should add in his/her blog. Its not just a page but helps a lot to reduce bounce rate immediately by providing direct navigation to label specific post. The sitemap widget we're going to add today shows a list of articles on the latest published order under each categories, This widget is based on ajax so it will load blazing fast and will not affect the performance of your blog. Lets move further and see How to Add Sitemap Widget In Blogspot Blogs. You can check a live preview of the Author Box widget by clicking the button below.

Let's Start Step-1 ( Adding CSS

Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.

/* ######## Navigation Menu Css by sorabloggingtips.com ######################### */
.mapasite {
    margin-bottom: 10px;
    background-color: #F8F8F8
}
.mapasite.active .mapa {
    display: block
}
.mapasite .mapa {
    display: none
}
.mapasite h2 {
    background-color: #EEE;
    color: $(primary.color);
    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
}

Step-2 ( Adding HTML Script

Now this is the most essential part of the tutorial and you have to do it very carefully. In the template, search for the </body> tag  and just above it paste the following HTML Coding.

 <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 Save your template and go to pages to add sitemap.

Note :- the widget works on jquery so you have to install jquery plugin if you haven't installed it yet..

Step-3 ( Adding Sitemap In Pages ) - Most Important !!

Now this is the most essential part of the tutorial and you have to do it very carefully.Go to your blogger dashboard > Pages > Add New Page.
On the new page content after adding the page title and hiding the comments using options, add the following code in the page content area.
[sitemap]
For better understanding check the highlighted area in the below image.




Now click publish button and check the published page to see the newly added sitemap widget. ;)

Conclusion

Congrats !! You have made it. now you have learned that How to Add Sitemap Widget In Blogspot Blogs. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us. Goodbye !! (Goodbye in English!! hahaha).
How to Add Sitemap Widget In Blogspot Blogs How to Add Sitemap Widget In Blogspot Blogs Reviewed by Sora Blogging Tips on January 22, 2017 Rating: 5

137 comments:

  1. Did not work for my blog and it is one of your templates. http://www.blastedgist.ml/p/sitemap.html

    ReplyDelete
    Replies
    1. We can't see proper codes in your blog.

      Delete
    2. http://marsyamochi13.blogspot.co.id/p/site-map.html not working :"(

      Delete
    3. the page you were trying to view does not exist

      Delete
  2. Replies
    1. What kind of problem are you facing.

      Delete
    2. Sir, how to install the jquery plugin? please provide the code. Thanks a lot

      Delete
    3. It's only important if your blog doesn't have one.
      http://www.sorabloggingtips.com/2017/07/how-to-add-jquery-in-blogger-and-blogspot-blogs.html

      Delete
  3. how to install jquery plugin for sitemap?

    ReplyDelete
    Replies
    1. Very Soon we will publish a tutorial about it, stay tuned.

      Delete
  4. what does "for unlimited domains" Mean?
    I installed your theme on my blog Http://humptechtips.com please tell me

    ReplyDelete
    Replies
    1. You can Use it for as many domains as you can.

      Delete
  5. SITEMAP PLEASE SORA ...http://ancestral70.blogspot.pt/

    ReplyDelete
    Replies
    1. Follow the above tutorial, to install sitemap.

      Delete
  6. it is showing the [sitemap] when i view the page nothing more and nothing less ??

    ReplyDelete
  7. Hi sir, I followed your instruction but the sitemap is not working on my website https://content2seo.blogspot.in/ please help

    ReplyDelete
  8. not working you see : http://blog.chutuananh.com/p/bptoc-backgroundffaaa4color666margin0.html

    ReplyDelete
  9. not working!!!

    http://4techblogger.blogspot.com/p/sitemap.html

    ReplyDelete
  10. It's works.....thank you! [terima kasih! (in Bahasa Indonesia)]

    www.chakrasinatriya.blogspot.com

    ReplyDelete
  11. please help... didnt work for me.

    https://gkmade-easy.blogspot.com/p/sitemap.html

    ReplyDelete
    Replies
    1. https://military-choice.blogspot.in/p/sitemap_57.html

      my jquery code - https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

      Delete
    2. We have updated the code please replace the code with older one.

      Delete
  12. This tutorial I have applied to my blog blogonDOTid, and works well, thanks Sora

    ReplyDelete
  13. didnt work http://www.jamzok.com/p/sitemap.html

    ReplyDelete
    Replies
    1. You have to publish the codes in content tab instead of HTML.

      Delete
  14. Hey! Thanks for the tutorial! It works fine with my blog with flora theme
    Check my blog!
    Thank again!!

    ReplyDelete
  15. not working please bro please update this it will only work sora tamplet other not

    link : http://www.bdtv.ml/p/sitemap.html not work

    ReplyDelete
    Replies
    1. You have to publish the codes in content tab instead of HTML.

      Delete
  16. Blog: https://lowtech-pt.blogspot.pt - The "* ######## Navigation Menu Css by sorabloggingtips.com ######################### */ ..." code apear on the head of the blog :(

    ReplyDelete
    Replies
    1. Copy the css carefully, you may have missed anything.

      Delete
  17. i unable to find ]]> code on my html. please help to make site map

    ReplyDelete
  18. thank you a lot its working

    ReplyDelete
  19. would you please help me out with this

    http://pakistanifox.blogspot.com/p/blog-page.html

    not working for me, no answer brother

    ReplyDelete
    Replies
    1. You have to publish the codes in content tab instead of HTML.

      Delete
    2. I did both ways contact tab also not working for me dont know why...

      Delete
    3. sorry a lot so now i delete it

      Delete
  20. Works great, thanks!
    Here's my blog sitemap url >> http://playnoroid.blogspot.com/p/sitemap.html

    ReplyDelete
  21. is there any limit of posts under this sitemap

    ReplyDelete
    Replies
    1. No it will show every single post based on categories.

      Delete
  22. s there any limit of labels under this sitemap
    how costimaze this sitemap to get it from specific labels only
    my url is http://www.archiworldz.ml/p/sitemap_28.html

    ReplyDelete
    Replies
    1. Sorry but the purpose of site map is to show posts from entire blog.

      Delete
  23. Awesome, works fine here. Would it be possible to include Pages too?

    ReplyDelete
  24. http://pusatbacaku.blogspot.co.id/p/sitemap_7.html

    not working bro...

    ReplyDelete
  25. Not Working https://www.earlycts.com/p/sitemap.html

    ReplyDelete
  26. not working for site www.ezonetoday.com
    it shows as plain text only .. I wanted to buy paid version ,but don't have a paypal a/c. Any other alternative payment method

    ReplyDelete
    Replies
    1. Follow this tutorial
      http://www.sorabloggingtips.com/2017/03/fix-recent-random-label-post-widget-in-blogger.html

      Delete
  27. Sir Which Size Of Image WIll Look Fit In This Theme. I Upload In Post Many Photos With Difffrent Sizes But No Any Are Fit.. So Please SUggest Me And This Is My Blog URL: www.OnlineFarazAcademy.com

    ReplyDelete
  28. Not Working
    http://www.jetadoloaded.tk/p/sitemap.html

    ReplyDelete
  29. already instal jquery 1.11.0 but still not working, please help.
    Thanks.
    http://wajoo.blogspot.co.id/p/daftar-isi.html

    ReplyDelete
  30. why not working on seohub?
    http://wajoo.blogspot.co.id/p/daftar-isi.html

    ReplyDelete
  31. Thanks for this!

    gizmoandroid.blogspot.in

    ReplyDelete
  32. Thanks for your tutorial now my blog have been looks good with your sitemap :)

    ReplyDelete
  33. Added the sitemap to my blog @ http://www.civdigitech.com/ and it worked fine.

    ReplyDelete
  34. facing problem in your coupon template, related posts are not showing. in site hostkro.com

    ReplyDelete
    Replies
    1. Your post must have atleast one label.

      Delete
    2. i ill pay u 10$ can u give me the premium theme and customize my blog ?

      Delete
  35. It is not working on my site
    http://nishu-creation.blogspot.in/p/sitemap.html

    ReplyDelete
  36. i tried setting up the sitemap page but this is what i got http://www.gatgist.com/p/sitemap.html

    ReplyDelete
    Replies
    1. Some of your post's doesn't carry label also you haven't activated the recent and featured widgets.

      Delete
  37. My sitemap doesn't work at all.
    It show Label but can not click one it.
    https://luckdeelaundry.blogspot.com/p/sitemap_78.html

    ReplyDelete
    Replies
    1. Activate every single widget we have mentioned in documentation and then follow this.
      http://www.sorabloggingtips.com/2017/03/fix-recent-random-label-post-widget-in-blogger.html

      Delete
  38. It's not working on basil, so navbar menu disappear and not scrolling.
    http://indobiji.blogspot.co.id/p/sitemap.html

    ReplyDelete
    Replies
    1. Activate every single widget we have mentioned in documentation and then follow this.
      http://www.sorabloggingtips.com/2017/03/fix-recent-random-label-post-widget-in-blogger.html

      Delete
  39. Hello,
    Please how do I input button in my posts e.g download button.

    Check here to know what I'm saying.

    ReplyDelete
    Replies
    1. We include button shortcodes in our templates.

      Delete
  40. its working thanks.
    www.alakbarcenter.com

    ReplyDelete
  41. its working?

    ??????
    http://www.caminhandonaluz.com/p/sitemap.html

    ReplyDelete
  42. Please help sora, its not working.. I'm not sure if its on jquerry...
    this is the current default jquery code
    ajax/libs/jquery/1.10.2/jquery.min.js

    and here is my site http://asiatraveller87.blogspot.com/p/sitemap.html

    ReplyDelete
    Replies
    1. Activate every single widget we have mentioned in documentation and then follow this.
      http://www.sorabloggingtips.com/2017/03/fix-recent-random-label-post-widget-in-blogger.html

      Delete
  43. can you help me..
    http://www.ngrakit.com/p/sitemap.html

    ReplyDelete
    Replies
    1. It's working ut there are some bugs because you haven't activated the recent post, latest comments, and label featured widget.

      Delete
  44. Pls how can I remove the page on the sidebar www.crashsolution.net. The sitemap works fine but pages is showing on the side bar

    ReplyDelete
  45. Please Check is mines working correctly https://movilologia.blogspot.com/p/sitemap.html

    ReplyDelete
  46. can I change the Color of in Title Header1 ?

    http://www.jasaplafon.com/

    change Color of this text
    " JASA PASANG PLAFON AMANAH "

    ReplyDelete
    Replies
    1. Search for this css in your template,
      #header h1
      then change the value of color.

      Delete
  47. sir i did every thing same mentioned in your tutorial to add a site map i installed jquery in my html before closing head tag this line
    script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" script
    but still not getting the result please check my blog
    http://crankyview.in/

    ReplyDelete
    Replies
    1. Activate every single widget we have mentioned in documentation and then follow this.
      http://www.sorabloggingtips.com/2017/03/fix-recent-random-label-post-widget-in-blogger.html

      Delete
  48. Error in google Webmaster - Your Sitemap appears to be an HTML page. Please use a supported sitemap format instead. I am trying to index my pages . Please Help

    ReplyDelete
    Replies
    1. This is only a table of content page widget, for webmaster tools you have to submit XML sitemap.

      Delete
  49. hello sir/mam,
    i have done sitemap but face a problem with search console please help about this.

    Errors
    Sitemap is HTML
    Your Sitemap appears to be an HTML page. Please use a supported sitemap format instead.
    1 Tag: html
    2 Nov 12, 2017

    https://furniture-works.blogspot.in/p/sitemap.html

    ReplyDelete
    Replies
    1. This is only a table of content page widget, for webmaster tools you have to submit XML sitemap.

      Delete
  50. http://www.simsekblog.com/p/site-map.html

    I have problem :(

    ReplyDelete
    Replies
    1. Activate every single widget we have mentioned in documentation and then follow this.
      http://www.sorabloggingtips.com/2017/03/fix-recent-random-label-post-widget-in-blogger.html

      Delete
  51. http://www.nilakaviyan.com/p/sitemap.html

    not working...

    ReplyDelete
    Replies
    1. The blog has 0 posts, how will it work ?

      Delete
  52. Hola, he comprado la plantilla Sofhie y no funciona bien el site map
    http://blog.colchonesymas.es/p/site-map.html
    Gracias

    ReplyDelete
    Replies
    1. Hi Sora, sorry bat donts working well
      http://prntscr.com/hn0rte
      I have a label that does not work
      I bought the template,
      How can I contact you to solve a couple of questions?

      Delete
    2. Use this link to contact the creator.
      http://www.way2themes.com/p/contact-us.html

      Delete
  53. How to add space betwen author and date sir?
    https://1.bp.blogspot.com/-wxJA5dHBUo8/WitioAOAkKI/AAAAAAAACTU/o6lzOYudKT01ShBwd8v5ePNB4y9kJtmZwCLcBGAs/s1600/Untitled.png

    ReplyDelete
    Replies
    1. Search for this code and increase the value.
      .p-date {
      margin-left: 10px;
      }

      Delete
  54. Yuhu... Thx brother.. I have updated the sitemap...

    Thx a lot...
    this is my blog
    http://natnusantara.blogspot.co.id/

    ReplyDelete
  55. not working properly...
    http://www.nationaltimes.in/p/sitemap.html

    ReplyDelete
    Replies
    1. Neither you have added css nor you have added the javascript.

      Delete
  56. Good day, Sora! I need to fix my sitemap which shows some labels are not properly put in sitemap. Please check this site: https://sirm-academy.blogspot.com/p/site.html

    ReplyDelete
    Replies
    1. Its because some of your posts doesn't have image and some of then aren't hosted on blogger.

      Delete
  57. Hi, Can help me to resolve the sitemap issue. For my blogger it is not working. I followed your post but not working. I am trying from last 4 days. I am using Treasury Blogger Template and Url: www.pharmariim.com. And one more issue is Latest post are not align properly like side by side. If you see the blog you fill find the issue in Latest post. And one more thing is i want replace the current social share icons in every post with elegant share buttons with whats app. How to replace also suggest me. Awaiting for your help.

    ReplyDelete
    Replies
    1. You haven't added the css or javascript for sitemap.

      Delete
  58. not working, please check
    https://information657.blogspot.in/

    ReplyDelete

Powered by Blogger.