There are dissimilar kinds of sitemaps inwards which nosotros are going to implement i which is the most paramount to develop on a blogger page.
Types Of Blogger Sitemaps.
1. Website Planning Sitemaps.
When starting upwardly your blogger blog, earlier considering whatever other practice hosting it or buying a domain, thence you lot volition involve to write the topics that you lot are going to tackle too inwards which you lot volition brand tags for. Planning is a cornerstone for your blogger blog.2. Structured Blogger Listing.
Its a crawler necessity that nosotros must implement inwards blogger for search engine bots usage to acquire through your website pages. This is the i nosotros are going to implement. Just from the give-and-take structured, the blogger sitemap arranges the blogger posts inwards a agency that crawlers volition know every page too index them for ranking inwards search results. Without the structured blogger website listing, it volition hold upwardly thence difficult for your blogger posts too pages to order inwards search results.Blogger Sitemap Widgets.
1. Clean Grid View Sitemap For Blogger Websites.
This widget gives the blogger posts inwards grid columns amongst the date, label, too writer which volition select most a clear persuasion to your sitemap page. The below representation gives a responsive persuasion of how the widget volition await similar inwards your blogger weblog sitemap page.
Steps To Add SitemP To Blogger Sitemap Page.
1. Login to your Blogger website profile.
2. Click on pages on the left side of the blogger platform options.
3. Click on Create New Page too at the championship add together the elevate Sitemap.
4. Click on the content expanse too don't type a thing.
5. Next to compose, click on the HTML pick where you lot volition glue the below code.
<style type="text/css">After pasting the Above code at the HTML writing part, Then alter the URL www.seoclive.com to your ain website URL.
.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://ngeblognow.blogspot.com/view/flipcard"></iframe>
</div>
2. Label List Blogger Sitemap Page Widget.
This variety of sitemap widget looks thence responsive every bit it expands post service links from the clicked label. To add together it to your blogger blog, you lot volition involve to select the CSS code placed inwards the template too the HTML placed inwards the sitemap page.
Copy The CSS Below too add together it earlier ]]></b:skin>
/* ######## Navigation Menu Css past times www.seoclive.com ######################### */After adding the CSS code higher upwardly too saving the template theme, thence brand a page called sitemap too click on the HTML adjacent to compose clit too glue the below HTML code too save.
.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
}
Copy too glue the HTML code below too glue it inwards the HTML persuasion of your novel sitemap page.
<script type='text/javascript'>That's all amongst adding sitemaps to blogger amongst responsive widgets to mode upwardly the sitemap page. You may too hold upwardly interested amongst the below posts.
//<![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/AVvXsEgh_trh6FLk9suMM9e0VIimtv2gDSNn2iiQ-Wx_-7LN8YEo4SbSjW7EhEexfIILqgGjJOs5uEOOlo0lOyA0Wea_2ru1Oxo-i5_hv03cyOohbuhO6DJEvfa8KdbS3WDjWVJs032uO09MR2Q/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; acquire < 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 writer = data.feed.entry[i].author[0].name.$t;
var get_date = data.feed.entry[i].published.$t,
twelvemonth = get_date.substring(0, 4),
calendar month = get_date.substring(5, 7),
solar daytime = get_date.substring(8, 10),
engagement = text_month[parseInt(month, 10)] + ' ' + solar daytime + ', ' + 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 catch center;background-size: cover"/></div></div><h3 class="wrp-titulo"><a href="' + posturl + '">' + posttitle + '</a></h3><div class="map-meta"><span class="p-author">' + writer + '</span><span class="p-date">' + engagement + '</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>
How To Add Sitemap Widget To Blogspot Blogger Blogs.
1. Go to your blogger website dashboard inwards blogger.2. Click on pages.
3. Create New Page too elevate it Sitemap-page.
4. Click on HTML compose view.
5. Copy too Paste the preferred blogger sitemap widget code.
3 komentar:
Great article and definitely helpful.
Great Blog and Great Post' you have share very informative information Sitemaps Pages.
Los Angeles SEO
attractive full sitemap for blogger: https://kirohan-thetechboy.blogspot.com/2021/03/add-sitemap.html
Please comment if there are any that need to be asked.