Skip to main content

How to Add Sitemap Widget In Blogspot Blogs

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: #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
}

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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4I_9yS5DnyC-9yjq98cqdH8GZmzv-ri4TYQxhYj9HG-rosTLbB3sngTVWNAHgjKjAd0Zm1Ko7dh2Il8S8mWKl6-S6_jpsMpV47Pmes0KqUSKmOTH-elszkdfFCp4jRtc5YOtd1EnsimA/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. ;)
Labels:

Comments

Post a Comment

Add your comment here.

Popular posts from this blog

CSS Comments

Comments are used to explain the code and may help when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment is placed inside the  <style>  element, and starts with  /*  and ends with  */ : Example /* This is a single-line comment */ p  {   color :  red ; } Try it Yourself » You can add comments wherever you want in the code: Example p  {   color :  red ;    /* Set text color to red */ } Try it Yourself » Comments can also span multiple lines:  Example /* This is a multi-line comment */ p  {   color :  red ; } Try it Yourself » HTML and CSS Comments From the HTML tutorial, you learned that you can add comments to your HTML source by using the  <!--...-->  syntax. In the following example, we use a combination of HTML and CSS comments: Example < !DOCTYPE  html > < html > < head > < style > p  {   color : ...
Post a Comment
Read more

พยางค์

การที่เราเปล่งเสียงออกมาจากลำคอครั้งหนึ่ง ๆ นั้น เราเรียกเสียงที่เปล่งออกมาว่า “พยางค์” แม้ว่าเสียงที่เปล่งออกมาจะมีความหมายหรือไม่มีความหมายก็ตาม เช่น เราเปล่งเสียง “สุ” ถึงจะไม่ รู้ความหมาย หรือไม่รู้เรื่องเราก็เรียกว่า ๑ พยางค์ หากเราเปล่งเสียงออกมาอีกครั้งหนึ่งว่า “กร” จะ เป็น “สุกร” จึงจะมีความหมาย คำว่า “สุกร” ซึ่งเปล่งเสียง ๒ ครั้ง เราก็ถือว่ามี๒ พยางค์ เสียงที่เปล่ง ออกมาครั้งเดียวมีความหมาย เช่น นา หมายถึง ที่ปลูกข้าว เสียงที่เปล่งออกมาว่า “นา” นี้เป็น ๑ พยางค์ ลองดูตัวอย่างต่อไปนี้ ไร่ มี๑ พยางค์ ชาวไร่ มี๒ พยางค์ (ชาว-ไร่) สหกรณ์ มี๓ พยางค์ (สะ-หะ-กอน) โรงพยาบาล มี๔ พยางค์ (โรง-พะ-ยา-บาน) นักศึกษาผู้ใหญ่ มี๕ พยางค์ (นัก-สึก-สา-ผู้-ใหญ่) สหกรณ์การเกษตร มี๖ พยางค์ (สะ-หะ-กอน-การ-กะ-เสด) จากตัวอย่างข้างบนนี้สรุปได้ว่า พยางค์ คือ เสียงที่เปล่งออกมาครั้งหนึ่ง จะมีความหมายหรือไม่มีความหมายก็ตาม ถ้าเปล่ง เสียงออกมา ๑ ครั้ง ก็เรียก ๑ พยางค์ สองครั้งก็เรียก ๒ พยางค์ องค์ประกอบของพยางค์ พยางค์เกิดจากการเปล่งเสียงพยัญชนะ สระ และวรรณยุกต์ออกมาพร้อม ๆ กัน พยางค์ที่มี ความหมายอาจจะเป็นพยา...
Post a Comment
Read more

OENG Sometri: Lecturer, IT Expert, and Public Administrator

👑 Welcome to the Official Blog of Dr. Candidate OENG Sometri 👑 I am a highly dedicated and experienced professional and educator with a strong foundation in Public Administration , Information Technology Engineering , and Foreign Languages . My commitment is to foster a joyful and supportive learning environment, encouraging students to become creative and problem-solving professionals . 💼 Professional Experience & Current Roles Lecturer of Fundamentals of Computer Networking at IIC, Phnom Penh (Aug 2025 – Present) Lecturer of Web Design & C# Programming at WiDCy Institute, Phnom Penh (Sep 2025 – Present) Instructor of ICT at PSIS, Phnom Penh (Sep 2025 – Present) ICT Trainer & Vice-Manager at Postal Operational Department, Cambodia Post (Mar 2025 – Sep 2025) IT Vice-Manager at IT Center, Cambodia Post (Feb 2023 – Mar 2025) Lecturer (Education/English) at Preah Sihamoniraja Buddhist University (PSBU) (2017 – 2025) Vice-Manager, Postal Operational Department at Camb...
Post a Comment
Read more