#edihittagregadorinformativo: Widgets

▼Seguir por e-mail - grĂĄtis - edihittagregadorinformativo




▼Seguir este site!
Mostrando postagens com marcador Widgets. Mostrar todas as postagens
Mostrando postagens com marcador Widgets. Mostrar todas as postagens

Como adicionar widget de sitemap nos blogs do Blogspot

Como adicionar widget de sitemap nos blogs do Blogspot


Como adicionar widget de sitemap nos 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 navegação direta para rotular postagens especĂ­ficas. O widget de sitemap que adicionaremos hoje mostra uma lista de artigos sobre o Ășltimo pedido publicado em cada categoria. Esse widget Ă© baseado no ajax, portanto, ele carregarĂĄ rapidamente e nĂŁo afetarĂĄ o desempenho do seu blog.
Vamos seguir em frente e ver Como adicionar widget de mapa do site nos blogs do Blogspot . VocĂȘ pode verificar uma visualização ao vivo do widget Caixa de autor clicando no botĂŁo abaixo.
Veja a demonstração ao vivo

Vamos começar a etapa 1 ( adicionando CSS

Antes de editar, recomendamos que vocĂȘ faça um backup do seu modelo, para que tudo dĂȘ errado, vocĂȘ ainda tem o design do seu blog seguro.

A primeira coisa que vocĂȘ precisa fazer Ă© fazer login na sua conta do Blogger e acessar >> Modelos >> Editar HTML e procurar o final ]]> </ b: skin> e, logo acima, colar o cĂłdigo, somente o que estĂĄ entre aspas ("), a seguir.


/* ######## 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: #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 }


Etapa 2 ( adicionando script HTML ) 

Agora, esta Ă© a parte mais essencial do tutorial e vocĂȘ deve fazer isso com muito cuidado. No modelo, pesquise a tag </body> e logo acima dela, cole a seguinte codificação  HTML, somente o que estĂĄ entre aspas (");



<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>


Agora salve seu modelo e vĂĄ para as pĂĄginas para adicionar o mapa do site.

Nota : - o widget funciona no jquery, portanto vocĂȘ precisa instalar o plugin jquery, se ainda nĂŁo o tiver instalado.


Etapa 3 ( adicionando sitemap nas pĂĄginas ) - o mais importante!

Agora, esta Ă© a parte mais essencial do tutorial e vocĂȘ deve fazer isso com muito cuidado. VĂĄ para o painel do 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.


[Mapa do site]

Para um melhor entendimento, verifique a ĂĄrea destacada na imagem abaixo.






"Agora clique no botão publicar e verifique a pågina publicada para ver o widget de mapa do site recém-adicionado."





Saiba + em: sorabloggingtips



Pesquisar aqui o que procura:






Voltar ao Topo da PĂĄgina