How to Add Sitemap Widget In Blogspot Blogs
When it comes to Blogspot SEO optimization, one of the most powerful yet underrated tools is the Sitemap Widget. Many bloggers think sitemap means only a technical XML sitemap submitted to Google Search Console, but that’s only half the truth.
A Blogspot Sitemap Widget is different—it’s a visual navigation page that organizes all your blog posts category-wise (based on labels). This not only improves user experience but also helps to reduce bounce rate and increase page views, which directly boosts-Adsences CPC earrnings.
In this detailed guide, I’ll show you step by step how to add Sitemap Widget in Blogger (Blogspot) with SEO benefits, CSS design, HTML script, and live demo instructions.
Why You Need a Sitemap Widget in Blogspot Blogs?
Before jumping to the technical part, let’s understand why a sitemap widget is so important:
- Boosts SEO Ranking – Internal linking is a key factor for ranking. Sitemap widget automatically links every post under its respective label.
- Reduces Bounce Rate – Visitors can directly navigate to related posts, keeping them longer on your site.
- Improves User Experience – A clean navigation menu makes it easier for readers to find content.
- Adsence-Revenue Growth – High CPC ads-perform better on blogs with structured navigation and more page views.
- Faster Indexing by Google – Helps Google crawl your content better, increasing organic search visibility.
Step 1: Adding Sitemap CSS in Blogspot
The first step is to style your sitemap widget with CSS. This CSS ensures a responsive, mobile-friendly design with interactive navigation.
👉 Go to Blogger Dashboard > Theme > Edit HTML.
👉 Search for ]]></b:skin> and paste the following CSS code just above it.
Navigation Menu CSS
/* ######## 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 we need to add the main AJAX-powered script to pull posts dynamically from Blogger feed.
👉 Go to Blogger Dashboard > Theme > Edit HTML.
👉 Search for </body> tag and paste the following script just above it.
Sitemap Script Code
<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/AVvXsEi-mq-uYnI-eIHOyYkLu-ZZlw7C9xo76MQNmQCX1qK2fuSrFmTys6DNinpSCS2YT0XeC6j3JV9oerlHtJgMPKUZu6Kvx9U-schhbl5y5La9dLW-15Gdo5hqcKPeiYtY5RPlQcI1YYAM5P8/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>
This script uses AJAX + Blogger Feed API to dynamically generate a sitemap under each label.
Step 3: Adding Sitemap in Blogger Pages
Now it’s time to publish the sitemap page.
👉 Go to Blogger Dashboard > Pages > Add New Page.
👉 Title Name “Sitemap”.
👉 In the content area, paste this shortcode:
"[sitemap]"
.png "Sitemap widget preview")
👉 Publish the page and check your blog—your sitemap widget will be live. 🎉
That’s it! You’ve successfully learned How to Add Sitemap Widget in Blogspot Blogs. By following these steps—adding CSS, script, and page shortcode—you can create a dynamic sitemap that boosts SEO, improves navigation, and increases Adsences CPC earrnings.
🚀 Now go ahead, implement this widget, and watch your Blogspot blog traffic and income grow.
0 Comments