Figure: HTML Sitemap - Author: Seobility - License: CC BY-SA 4.0
O sitemap é um dos elementos mais essenciais que todo blogueiro deve adicionar ao seu blog. Não é apenas uma página, mas também ajuda a reduzir a taxa de rejeição imediatamente, fornecendo navegação direta para postagens específicas por rótulo. O widget de sitemap que vamos adicionar hoje mostra uma lista de artigos na ordem de publicação mais recente sob cada categoria. Este widget é baseado em AJAX, por isso ele carrega rapidamente e não afeta o desempenho do seu blog. Vamos seguir em frente e ver como adicionar um widget de sitemap em blogs do Blogspot.
Passo 1: Adicionando o CSS
Antes de editar, recomendamos que você faça um backup do seu modelo, para que, se algo der errado, você ainda tenha o design do seu blog salvo.
A primeira coisa que você precisa fazer é fazer login na sua conta do Blogger, ir para Tema > Clica na setinha ao lado de "Personalizar " > Editar HTML e procurar pela tag ]]></b:skin>. Logo acima dela, cole o seguinte código:
Passo 2: Adicionando o Script HTML
Agora, esta é a parte mais essencial do tutorial, e você deve fazê-la com muito cuidado. No modelo, procure pela tag </body> e, logo acima dela, cole o seguinte código HTML:
<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>
Agora, salve o seu modelo e vá para as páginas para adicionar o sitemap.
Nota: O widget funciona com jQuery, então você precisa instalar o plugin jQuery se ainda não o tiver instalado.
Passo 3: Adicionando o Sitemap nas Páginas - Mais Importante!
Agora, esta é a parte mais essencial do tutorial, e você deve fazê-la com muito cuidado. Vá para o painel do Blogger Páginas > Adicionar Nova Página.
Na nova página, depois de adicionar o título da página e ocultar os comentários usando as opções, adicione o seguinte código na área de conteúdo da página:
[sitemap]
Para melhor compreensão, verifique a área destacada na imagem abaixo.
Agora, clique no botão Publicar e confira a página publicada para ver o novo widget de sitemap em ação. ;)
Conclusão
Parabéns!! Você conseguiu. Agora você aprendeu como adicionar um widget de sitemap em blogs do Blogspot. Visite o seu blog e veja o incrível widget em ação. Esperamos que você tenha gostado deste tutorial. Se gostou, por favor, compartilhe com seus amigos. Estamos trabalhando arduamente para desenvolver mais widgets incríveis como este, então fique ligado!