Saiba como: Como adicionar o widget de sitemap em blogs do Blogspot

Saiba como: Como adicionar o widget de sitemap em blogs do Blogspot
.

Sitemap é a coisa mais essencial que todo blogueiro deve adicionar em seu blog. 

Não é apenas uma página, 
mas ajuda muito a reduzir a taxa de rejeição imediatamente, 
fornecendo uma navegação direta para rotular uma postagem específica. 

O widget do mapa do site que iremos  adicionar , 
mostra-nos
uma lista de artigos 
sobre o último pedido publicado em cada categoria.

Esse widget é baseado no ajax, 
então ele carregará rapidamente 
e não afetará o desempenho do seu blog. 

Então,
como adicionar o Sitemap Widget 
nos blogs do Blogspot . 

Para verificar 
e ter uma visualização 
ao vivo 
do widget ,
basta clicar  em: ►Acesse Aqui para Visualizar demonstração◄


Então, agora, comecemos a executar o presente tutorial:

passo 1/3
( adicionando CSS ) 

Antes da Edição, e recomendado que  você faça um backup do seu modelo, para que caso aconteça algo de errado,  você ainda terá o design do seu blog seguro.

A primeira coisa 
que você precisa fazer é 
acessar sua conta do Blogger e ir até 
>> Modelos 
>> Editar HTML e 
pesquisar por :
]]> </ b: skin> 

e logo acima
de ]]> </ b: skin> 
...colar o seguinte código, a seguir:
▼

/* ######## Navigation Menu Css  ######################### */
.mapasite {
    margin-bottom: 10px;
    background-color: #FAEBD7;
}
.mapasite.active .mapa {
    display: block
}
.mapasite .mapa {
    display: none
}
.mapasite h2 {
    background-color: #e87a9d;
    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: #0000ff;
}
.mapapost {
    overflow: hidden;
    margin-bottom: 20px;
    height: 70px;
    background-color: #FFE4E1;
}
.mapa {
    padding: 40px
}
.map-thumb {
    background-color: #FFcccc;
    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: #006401;
    text-decoration: underline
}
.map-meta {
    display: block;
    float: left;
    overflow: hidden;
    padding-left: 25px;
}
.mapasite h2 .botao {
    float: right
}

Clicar em  em Salvar tema

.;.


Em seguida

Passo 2/3 

( Adicionando Script HTML ) 


Agora esta é a parte mais essencial do tutorial 
e você tem que fazer isso com muito cuidado. 


No modelo, pesquise por
</body> 
e, logo acima, 
de </body>
...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/AVvXsEhF6BOuN4jQ-fjMGzUXUxYzJA4xTxI9u0v3hzgKM9pJOYtN1UdST2ruf2wC48ck3pTdVdrKboPkx-OQhLgz6kXXZw3Ja5kaclU5VvzxVbXY9Zo-tQk_cZLiK-_8j0O2OMhM_8xXNkKdmicK/s1600/sitemaped.gif";

           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 seu modelo e vá para páginas ,de seu blog,para adicionar o sitemap.

Nota : 
- o widget funciona no jquery 
então você tem que instalar o 
plugin jquery 
se você ainda não instalou.

Passo-3/3 
( Adicionando Sitemap Nas Páginas ) - Mais Importante !!

Agora, essa é a parte mais essencial do tutorial 
e você precisa fazer isso com muito cuidado. 

Vá para o painel do seu blogger
> Páginas
> Adicionar nova página. 

No novo conteúdo da página 
após 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 
verifique a página publicada 
para ver o widget do sitemap 
recém-adicionado.

"Visite o seu blog e confira o widget incrível ao vivo em ação, espero que você tenha gostado deste tutorial" 
...................

sitemap

. . ///
. ; .