A sitemap is a navigation view of website functions that make a user-friendly view of many web posts at one point. Blogger supports sitemaps and its a requirement for Adsense and other posts on the web. Today, we have different blogger sitemap widgets that you can implement in a sitemap blogger page which we will learn how to make in this tutorial.
There are different kinds of sitemaps in which we are going to implement one which is the most paramount to set up on a blogger page.
Types Of Blogger Sitemaps.
1. Website Planning Sitemaps.
When starting up your blogger blog, before considering any other exercise hosting it or buying a domain, then you will need to write the topics that you are going to tackle and in which you will make tags for. Planning is a cornerstone for your blogger blog.
2. Structured Blogger Listing.
Its a crawler necessity that we must implement in blogger for search engine bots use to go through your website pages. This is the one we are going to implement. Just from the word structured, the blogger sitemap arranges the blogger posts in a way that crawlers will know every page and index them for ranking in search results. Without the structured blogger website listing, it will be so hard for your blogger posts and pages to rank in search results.
Blogger Sitemap Widgets.
1. Clean Grid View Sitemap For Blogger Websites.
This widget gives the blogger posts in grid columns with the date, label, and author which will bring about a clear view of your sitemap page. The below representation gives a responsive view of how the widget will look like in your blogger blog sitemap page.
The sitemap looks responsive to every website. Follow the below steps to implement it into
Steps To Add SitemP To Blogger Sitemap Page.
1. Log in to your Blogger website profile.
2. Click on pages on the left side of the blogger platform options.
3. Click on Create New Page and at the title add the name Sitemap.
4. Click on the content area and don’t type a thing.
5. Next to compose, click on the HTML option where you will paste the below code.
<style type=”text/css”>
.grid-sitemap {
overflow: hidden;
position: relative;
height: 565px;
margin: 20px 0 40px 0;
}
.grid-sitemap iframe {
display: block;
width: 100%;
height: 680px;
margin-top: -115px;
margin-left: -5px;
}
</style>
<div class=”grid-sitemap”>
<iframe src=”https://joecalih.com/view/flipcard”></iframe>
</div>
After pasting the Above code at the HTML writing part, Then change the URL joecalih.com to your own website URL.
2. Label List Blogger Sitemap Page Widget.
This kind of sitemap widget looks so responsive as it expands post links from the clicked label. To add it to your blogger blog, you will need to have the CSS code placed in the template and the HTML placed in the sitemap page.
Copy The CSS Below and add it before ]]></b:skin>
/* ######## Navigation Menu Css by joecalih.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
}
After adding the CSS code above and saving the template theme, then make a page called sitemap and click on the HTML next to compose button and paste the below HTML code and save.
Copy and paste the HTML code below and paste it in the HTML view of your new sitemap page.
<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>
That’s all with adding sitemaps to blogger with responsive widgets to style up the sitemap page. You may also be interested with the below posts.
How To Add Sitemap Widget To Blogspot Blogger Blogs.
1. Go to your blogger website dashboard in blogger.
2. Click on pages.
3. Create New Page and name it Sitemap-page.
4. Click on HTML compose view.
5. Copy and Paste the preferred blogger sitemap widget code.