Gadget de Artigos Relacionados para Blogger - Passo a passo

segunda-feira, dezembro 07, 2020

A imagem mostra um foto com uma pessoa mexendo no computador, com o título do post ao centro, por cima de um retângulo branco

Oi pessoal! Essa semana resolvi trazer um tutorial de Gadget de artigos relacionados para blogger, um código criado pelo blog Code It Pretty, que estou traduzindo, com autorização da autora. Mencionei esse Gadget no post 4 opções de gadgets de artigos relacionados para blogger, sendo um dos Gadgets mais completos que encontrei, e muitos leitores têm entrado em contato comigo pedindo ajuda com esse código em específico. Sei como é difícil para quem não está familiarizado com HTML e CSS mexer nessas coisas, principalmente em outra língua, então resolvi fazer a tradução. 

Esse código foi usado por mais de 2 anos aqui no blog, e eu o considero um dos melhores gadgets desse tipo, por diversos motivos, que explico abaixo. No post em que menciono esse modelo, 4 opções de gadgets de artigos relacionados para blogger, tem também outras três opções, caso queira tentar outro Gadget que não seja esse. Antes de mais nada, uma pequena contextualização, para quem não conhece o Gadget de artigos relacionados:

O que é o Gadget de Artigos Relacionados?

Nada mais é do que um Gadget que aparece no final do seu post, com publicações sugeridas, que procuram direcionar o leitor para outro post. Muitas vezes esse Gadget aparece como "leia mais" ou "você também poderá gostar de...". Se você rolar essa publicação até o final, vai perceber que meu blog sempre aparece algumas publicações, como na imagem abaixo:

A imagem mostra um Gadget de artigos relacionados que aparece no final do post, mostrando três publicações relacionadas a postagem em questão
Publicações que foram sugeridas no post Diário de Quarentena #1

Por que usar o Gadget de artigos relacionados?

  • Direciona o visitante a um artigo específico do seu blog, ao invés de deixá-lo perdido em uma única publicação;
  • Contribui para que publicações antigas continuam recebendo visitas, evitando que posts antigos caiam no esquecimento;
  • Mantém os leitores mais tempo no blog;
  • Diminui a taxa de rejeição;
  • Direciona conteúdo interessante para o leitor que acabou de ler o post, consequentemente também aumentam as visualizações de páginas e impressões;
A imagem mostra um infográfico listando, de forma resumida, algumas vantagens de usar o Gadget de arquivos relacionados. Essas informações estão escritas na publicação, logo acima da imagem

O que o Gadget que estou ensinando tem de especial:

  • Não aparece na página inicial e páginas estáticas;
  • É totalmente grátis, não possui anúncios nem links para o site da desenvolvedora;
  • Não necessita de cadastro;
  • Mostra artigos relacionados as tags do post;
  • Permite vincular seu Gadget com o Google Analytics, que é uma ótima forma de descobrir se seu Gadget está de fato trazendo o retorno esperado;
  • Permite customização pelo CSS, em que você pode escolher entre imagens quadradas e redondas, o título que irá aparecer no seu Gadget, número mínimo e máximo de postagens, entre outras coisas. O CSS é muito básico e não interfere no Template atual do seu blog, o que é ótimo tanto para quem está familiarizado com CSS quanto para quem é leigo no assunto;

O que você precisa para instalar esse Gadget em seu blog?

  • Seu blog precisa estar hospedado na plataforma Blogger;
  • Para a instalação, você precisa de marcadores em suas publicações. O código usa os marcadores que você adiciona em suas publicações para encontrar relações entre seus posts. Os marcadores precisam estar visíveis, e de preferência organizados, para que o Gadget funcione melhor;
  • Esse Gadget usa as imagens do Blogger para definir as miniaturas, assim, funciona melhor quando você faz o upload de suas imagens no próprio Blogger, e não em links externos, como o Flickr ou Photobucket. Você pode definir uma imagem padrão para todas as publicações que estão sem imagens ou que a imagem está hospedada em um site externo;
  • Esse código funciona em todos os Templates padrão do Blogger, com exceção dos Templates de visualização dinâmica, que não permitem customização;
  • Seu blog precisa estar aberto para o público, ou seja, ele não funciona em blogs privados;

Qual a aparência desse Gadget?

Depois de realizar a instalação do código, seguindo as instruções abaixo, seu Gadget vai ficar asssim (você pode fazer alterações no tamanho da imagem, quantidade de publicações ou se quer imagens quadradas ou redondas, ensino isso logo após o tutorial com o código):

A imagem mostra um exemplo do Gadget de artigos relacionados para blogger, que aparecerá após a instalação desse código

Instruções para instalação do Gadget

Primeiro, faça backup do seu Template. Você pode ler um tutorial de como fazer backup aqui. Não pule essa etapa, qualquer erro pode trazer problemas para seu blog depois.

Após fazer backup. Vá até a parte de editar HTML do seu layout, indo em: Blogger > Tema > Personalizar > editar HTML. 

A imagem mostra o caminho que se faz para chegar a parte de editar HTML no layout do blogger


Clique uma vez no HTML do seu blog, abra a caixa de busca apertando CRTL+F (ou F, no MAC) e procure por:

</body>

Aperte enter. O código irá aparecer destacado na sua tela. Copie o código abaixo, exatamente como aparece.

<!-- INÍCIO DO CÓDIGO DE ARTIGOS RELACIONADOS POR CODE IT PRETTY - TRADUÇÃO MARINA MENEZES -->
<b:if cond='data:blog.pageType == "item"'>

<style>
.related-posts {
  width: 100%;
  margin: 2em 0;
  float: left;
}

.related-posts ul li {
  list-style: none;
  margin: 0 5px;
  float: left;
  text-align: center;
  border: none;
}
</style>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>

//<![CDATA[
$(document).ready(function() {



  //OPÇÕES DO CÓDIGO

  var maxSearched = 500;
  var minimum = 3;
  var maximum = 5;
  var imageSize = 150;
  var roundImages = false;
  var relatedTitle = true;
  var labelInTitle = true;
  var relatedTitleText = "Você também poderá gostar de:";
  var defaultImage = "";
  var campaignTracking = false;
  var campaignSource = "";
  var campaignMedium = "";
  var campaignName = "";
  var postLabels = $('.post-labels a');
  var insertBefore = $('.post-footer');


  //FIM DAS OPÇÕES - NÃO EDITE ABAIXO DESSA LINHA

  var labels=[];var label;var alternateLabel;var minposts=minimum-1;if(postLabels.length===1){label=postLabels.text().trim()}else if(postLabels.length>1){$(postLabels).each(function(){labels.push($(this).text().trim())});label=labels[Math.floor(labels.length*Math.random())];var labelLocation=labels.indexOf(label);if(labelLocation===labels.length-1){alternateLabel=labels[labelLocation-1]}else{alternateLabel=labels[labelLocation+1]}}if(label!==undefined){var title=$(".entry-title").text().trim();var labelCount=0;var alternateLabelCount=0;var matches=[];var url=$('link[rel="alternate"][title*="Atom"]').eq(0).attr("href");$.ajax({url:url,data:{"max-results":maxSearched,alt:"json-in-script"},dataType:"jsonp",success:function(e){$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){labelCount++}if($.inArray(alternateLabel,r)!==-1){alternateLabelCount++}}});if(labelCount<=minposts&&alternateLabelCount>=minposts){label=alternateLabel}$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){var s=e.feed.entry[t].title.$t.trim();if(s!==title){var o;for(var u=0;u<e.feed.entry[t].link.length;u++){if(e.feed.entry[t].link[u].rel==="alternate"){o=e.feed.entry[t].link[u].href}}var a;if(e.feed.entry[t].media$thumbnail!==undefined){a=e.feed.entry[t].media$thumbnail.url.split(/s72-c/).join("s"+imageSize+"-c")}else{a=defaultImage}if(matches.length<maxSearched&&campaignTracking===false){matches.push('<li><a href="'+o+'"><img src="'+a+'" alt="'+s+'" nopin="nopin">'+s+"</a></li>")}else if(matches.length<maxSearched&&campaignTracking===true){matches.push('<li><a href="'+o+"?utm_source="+campaignSource+"&utm_medium="+campaignMedium+"&utm_campaign="+campaignName+'"><img src="'+a+'" alt="'+s+'" nopin="nopin">'+s+"</a></li>")}}}}});if(matches.length>=minimum){if(relatedTitle===true&&labelInTitle===true){insertBefore.before('<div class="related-posts"><h5>'+relatedTitleText+' <span class="related-term">'+label+"</span></h5><ul></ul></div>")}else if(relatedTitle===true&&labelInTitle===false){insertBefore.before('<div class="related-posts"><h5>'+relatedTitleText+"</h5><ul></ul></div>")}else{insertBefore.before('<div class="related-posts"><ul></ul></div>')}matches.sort(function(){return.5-Math.random()});for(var t=0;t<maximum;t++){$(".related-posts ul").append(matches[t])}}insertBefore.css("clear","both");$(".related-posts ul li").css({"max-width":imageSize,"border":"none","padding":"0"});if(roundImages===true){$(".related-posts ul li img").css({"width":imageSize,"height":imageSize,"border-radius":"50%"})}else{$(".related-posts ul li img").css({"max-width":imageSize,"height":"auto"});}}})}
});
//]]>
</script>

</b:if>
<!-- FIM DO CÓDIGO DE ARTIGOS RELACIONADOS POR CODE IT PRETTY - TRADUÇÃO MARINA MENEZES -->

Cole o código copiado exatamente ACIMA da tag </body>, pesquisada anteriormente. Clique em visualizar, para ver se o blog apresenta algum erro, e caso não aconteça, salve as alterações. Em caso de erro, reverta as alterações e repita o processo. 

A imagem mostra um printscreen da imagem do HTML do blog, mostrando onde colar o código, visualizar o template e salvar as alterações
Clique na imagem para ver maior

Após salvar, vá até seu blog, abra uma publicação e verifique se seu Gadget aparece. Lembre-se que ele só funciona em publicações com marcadores, e só aparece se o marcador tem no mínimo três publicações marcadas com ele. Verifique as opções de customização abaixo, caso queira fazer modificações no seu Gadget.

Opções de personalização

Cada opção de personalização começa com "var" e termina com um ponto e vírgula (;). Cuidado para não apagar os pontos e vírgula das opções, isso vai causar erro no gadget. Sempre que fizer uma alteração, clique em visualizar o layout para ver se não ocorreu algum erro, e salve somente após verificar que nenhum erro ocorreu.

As opções de personalização estão listadas abaixo, com uma pequena explicação do que se trata cada uma, e de como modificá-las. No código, aparecem logo abaixo de //OPÇÕES DO CÓDIGO (veja na imagem abaixo) e podem ser encontradas dando um CTRL+F na caixa de editar HTML do seu blog.

A imagem mostra uma lista com todos os códigos possíveis de serem personalizados no Gadget. Esses códigos estão listados logo abaixo, no post

Número máximo de publicações

Aparece no código como: var maxSearched = 500;

Esse número indica a quantidade de publicações que o Gadget vai pesquisar no marcador relacionado a postagem que ele aparece. O número máximo é 500 publicações, ou seja, se uma publicação estiver com o marcador "cultura", ele vai procurar até 500 publicações com o marcador "cultura" para sugerir no final dessa postagem. Se você quiser que ele mostre publicações mais recentes, altere esse número para um número menor, de acordo com a quantidade de publicações que você adicionou aos seus marcadores.

Número mínimo e máximo de publicações que podem ser mostradas

Aparece no código como:
var minimum = 3;
var maximum = 5;

O número três indica a quantidade mínima de posts que vão aparecer como artigos relacionados no final da sua publicação. O número cinco mostra a quantidade máxima de publicações que podem aparecer como relacionadas a sua publicação. Altere essa quantidade de acordo com seu gosto, lembre-se que você precisa ter publicações suficientes para se ajustar aos números que escolheu.

Tamanho das imagens

Aparece no código como: var imageSize = 150;

Esse código altera a largura e altura das imagens que aparecem no final da publicação. Altere o número 150 para um número que deseja, lembrando que ele não deve ser maior que a imagem do post original.

Deixar as imagens redondas

Aparece no código como: var roundImages = false;

Troque a palavra false por true para que as imagens fiquem redondas em navegadores como Chrome, Firefox, Safari, e as versões mais recentes do Internet Explorer.

Remover o título do Gadget

Aparece no código como: var relatedTitle = true;

Troque a palavra true por false para remover o título do Gadget. O título é uma frase que aparece logo acima das publicações sugeridas.

Remover o marcador do título

 Aparece no código como: var labelInTitle = true;

Troque a palavra true por false para remover o nome do marcador no final do título do Gadget. Esse marcador aparece logo após o título, caso deixe-o ativado (ex: [mais posts sobre cultura] No exemplo, o mais posts sobre é o título do Gadget, e cultura é o marcador).

Trocar o título do Gadget

Aparece no código como: var relatedTitleText = "Mais posts sobre";

Troque a frase dentro das aspas (mais posts sobre) pela frase desejada, lembre-se de manter as aspas ("). Caso deixe os marcadores aparecendo no final (código acima), lembre-se de colocar uma frase que se encaixe nessa opção.

Adicionar uma imagem padrão

Aparece no código como: var defaultImage = "";

Adicione a URL da imagem a sua escolha dentro das aspas (") para que essa imagem apareça quando a publicação não possui imagens. Para um resultado mais agradável, adicione uma imagem no tamanho que você definiu para as imagens do Gadget; Veja como copiar a URL de uma imagem aqui.

Habilite o acompanhamento do Google Analytics

Aparece no código como:

 var campaignTracking = false;
 var campaignSource = "";
 var campaignMedium = "";
 var campaignName = "";

Troque a palavra false por true na primeira linha para habilitar o acompanhamento das estatísticas pelo Google Analytics. Após isso, preencha as linhas abaixo com os parâmetros da campanha do Google Analytics.

Trocar a classe de seleção de marcadores

Aparece no código como: var postLabels = $('.post-labels a');

Esse código serve para quem está usando um Template personalizado, que usa uma classe diferente para os marcadores do blog. Você precisa encontrar a classe usada para definir os marcadores do seu blog, e colocar o código entre as aspas. Não mexa nessa opção caso seu Template seja nativo do blogger ou você não saiba o que está fazendo. Você pode ler mais sobre como encontrar elementos no CSS aqui.

Mudar o local onde o Gadget aparece

Aparece no código como: var insertBefore = $('.post-footer');

Esse código muda o local onde o código aparece. No caso acima, está no rodapé das postagens, você pode modificar para o local desejado, conforme o CSS do seu blog, colocando o código do local desejando entre as aspas. Não mexa nessa opção caso não saiba o que está fazendo. Você pode ler mais sobre como encontrar elementos no CSS aqui.

Fim dos códigos de personalização

É isso pessoal. Sei que o post ficou imenso, mas sempre tenho essa preocupação de trazer os códigos de forma mais detalhada possível, para que mesmo quem não saiba mexer com CSS consiga seguir o tutorial, e também aprender um pouco enquanto faz as modificações, não só copiar e colar os códigos no próprio blogger. Caso tenha interesse, você também pode conferir o post original no blog Code It Pretty, além de outras publicações relacionadas a CSS que a Marie escreveu em seu blog (em inglês). 

Espero que tenham gostado do tutorial, e qualquer dúvida deixem nos comentários, que faço o possível pra ajudar!

Você também pode gostar

15 comentários

  1. Hello Marina!!!

    Menina, eu amo esses tutorias que nos salva na hora que precisamos. E o seu é o melhor dos que ja vi até hoje, esta tudo super bem detalhadinho. Eu mesmo sou dessa que se enrola toda quando o assunto é mexer nesse em código. Eu acabo ate desistindo as vezes, mas com o seu tutu a proxima vez que eu for me aventurar nos códigos, ele com certeza vai me salvar.

    Bjinhos 😘

    My universe Otaku

    ResponderExcluir
    Respostas
    1. Eu amo deixar tudo explicadinho principalmente pq quando eu era iniciante nesse assunto passava muita dificuldade com esses códigos, nada mais justo que compartilhar o que aprendi pra ninguém passar pelo mesmo ♥

      Fico muito feliz que tenha gostado

      Bjs!!

      Excluir
  2. Gostei bastante, nunca vi um tutorial HTML tão bem explicadinho assim!

    https://tagarelando-livros.blogspot.com

    ResponderExcluir
    Respostas
    1. Oi Laura! Que bom que gostou ♥ eu adoro deixar as coisas explicadinhas, facilita muito a vida de quem está lendo

      Bjs!

      Excluir
  3. Este comentário foi removido pelo autor.

    ResponderExcluir
  4. oii mariana!! eu gosto muito desse tipo de gadget porque geralmente consigo fuçar mais rápido no blog da pessoa, principalmente se for a primeira vez djskdhsj adoro aquela stalkeada básica! quem sabe no meu próximo layout profissional eu não use?

    ps.: surpresa! tirei você no amigo secreto do together!!

    { https://1.bp.blogspot.com/-sMCxZ683I0s/X9QWInrhkuI/AAAAAAAAVwA/PY1PatjfUhoBsMF9y6Cqh8xMmOzD7Q8KQCLcBGAsYHQ/s3072/IMG-20201211-WA0030.jpeg }

    estive tentando guardar pro natal mas nao me aguentei jdksdhskdj beijo!

    ResponderExcluir
    Respostas
    1. Que coisa mais lindaaaa ♥♥♥♥♥♥ fez meu dia!! Amei a cartinha e os desenhos, tá lindo demais ♥♥♥

      Eu também adoro stalkear o blog dos outros, às vezes fico até sem graça de ir comentando de tanto post que eu li suhaushauh'

      Excluir
  5. Oiee Marina!

    Realmente esse estilo de gadgets atraem os públicos e faz eles manter no site!
    Achei legal seu tutorial, bem explicado e fácil de entender!

    Kiss
    Tsuki no Shita

    ResponderExcluir
    Respostas
    1. Obrigada Pamu! Eu gosto bastante quanto tem esse gadget nos blogs que eu leio porque aí fico pulando de post em post rsrs por mim todo mundo usava!

      Bjs!

      Excluir
  6. Olá Marina!!
    Obrigada pelo comentário no meu blog! ♡

    Caramba, faz muito tempo que eu não vejo alguém ensinando um tutorial tão explicadinho. E esse é bem útil mesmo, fica bem fácil de fuçar as postagens no blogs.
    Eu uso o modelo antigo do blog, então não sei se ele funcionaria no meu. De qualquer forma, eu gostei bastante de como você explicou tudo, parabéns!

    Beijos e até mais!

    ResponderExcluir
    Respostas
    1. Dependendo do antigo funciona sim, porque tem aquele antigo de antes de 2012 e um antigo mais recente, pós 2012. Se for esse mais recente, sem ser os novos que saíram em 2019, funciona sim, inclusive eu também uso esse, mas com uma cara mais moderninha

      Bjs!!

      Excluir
  7. Realmente Mari, e estou sempre buscando mudanças, tenho buscado um tema que eu goste mais ainda não achei, amei as suas dicas, amo fazer testes e vou fazer esse no meu blog de teste, beijos!

    www.mulhernovaera.com.br

    ResponderExcluir
  8. Olá Marina!!
    Gostei muito do seu blog, fácil de ler e bem explicado.
    Tentei inserir esse gadget no meu site, que tem plataforma blogspot, porém, não consegui! Você pode me ajudar com alguma dica?
    Obrigado!
    Cezar
    www.interacoesmundanas.com.br

    ResponderExcluir
    Respostas
    1. Oi tudo bem?

      Obrigada pelo elogio! Então, geralmente esse código não costuma dar erro, se for copiado igualzinho está nessa publicação. Você está usando qual modelo do blogger? Fez alguma modificação no código? Pra ele funcionar o blog precisa estar aberto e com tags que possuam no máximo três publicações vinculadas a ela

      Excluir
  9. Oi Marina, obrigado pelo retorno. Tentei e... nada! Verifiquie a quantidade de postagens vinculas, fiz testes e não foi. O tema que uso é Custom. Meu email é interacoesmundanas@hotmail.com , se você puder me indicar alguma outra maneira! Agradeço muito pela sua atenção! Cezar

    ResponderExcluir

Leio tudo com carinho e respondo sempre que posso. Não escreva aquilo que você não gostaria de ler ♥ Para dúvidas ou sugestões use a página de contato;

No mais, agradeço o comentário e a visita. Volte sempre! ♥

Arquivo do blog

Publicidade