Como adicionar o widget Sitemap nos Blogspot Blogs

Como adicionar o widget Sitemap nos Blogspot Blogs

fonte: sorabloggingtips 

Sitemap é a coisa mais essencial que cada blogueiro deve adicionar no seu blog. Não é apenas uma página, mas ajuda muito a reduzir a taxa de rejeição imediatamente, fornecendo navegação direta para rotular a publicação específica. O widget de mapa do site que vamos adicionar hoje mostra uma lista de artigos sobre a última ordem publicada em cada categoria. Este widget é baseado em ajax para que ele seja carregado rapidamente e não afetará o desempenho do seu blog. Permite avançar e veja como adicionar o widget do sitemap nos blogs do Blogspot . Você pode verificar uma visualização ao vivo do widget Caixa do autor clicando no botão abaixo.

Veja DemoLive Preview

Vamos começar o Passo 1 ( adicionando CSS ) 

Antes de editar, recomendamos que você faça um backup do seu modelo, para que tudo der certo, você ainda tem o seu projeto de blog seguro.

A primeira coisa que você precisa fazer é fazer login na sua conta do Blogger e ir para >> Modelos >> Editar HTML e procurar o fim ]]> </ b: skin> tag e logo acima, cole o seguinte código.

/* ######## 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: $(primary.color);
    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
}

Passo 2 ( adicionando script HTML ) 

Agora, esta é a parte mais essencial do tutorial e você tem que fazê-lo com muito cuidado. No modelo, procure a marca </ body> e apenas acima, cole a seguinte codificação 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/AVvXsEgJRRAZHphnJkWAjmjLiaXap4wVPvdE39-qXSo4bUyDKzO2TgUn_CopmdNqcZ4ggNq64qAY5l-ttikhEfIagYXmhGCXLImAXtqMXkwbbI2ROWsKfpYE7b9ayS9SN-5eRjhYKYsTqLPHf1E/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 seu modelo e vá às páginas para adicionar o sitemap.

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

Passo 3 ( Adicionando Mapa do Site nas Páginas ) - Mais Importante!

Agora, esta é a parte mais essencial do tutorial e você precisa fazê-lo com muito cuidado. Acesse seu painel do blogger> Páginas> Adicionar nova página. 
No novo conteúdo da 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 uma melhor compreensão, verifique a área destacada na imagem abaixo.

Agora, 

clique no botão Publicar e 

marque a página publicada para ver o 

widget do sitemap recentemente adicionado. 

Conclusão

"Parabéns !! 

Você conseguiu. agora você aprendeu isso como adicionar o widget Sitemap nos 

Blogspot Blogs . 

Visite o seu blog e verifique o incrível widget em ação, se 

você gostou deste tutorial, se você gostou, então, 

compartilhe com seus amigos, estamos trabalhando duro para 

desenvolver mais widgets incríveis, fique atento conosco. "