Scroll Top

Assista Agora ao Treinamento Online Grátis com a Técnica que uso para Gerar um Faturamento de R$ 14.465,70 por Mês!

Blogger

Como colocar Artigos Relacionados no Blogger

Todo blogueiro que seus leitores encontrem com facilidade os conteúdos dentro de seu blog, para isso existem várias formas de melhorar a navegação

Todo blogueiro que seus leitores encontrem com facilidade os conteúdos dentro de seu blog, para isso existem várias formas de melhorar a navegação, são técnicas que vão desde fazer um menu de navegação com links para as principais categorias, até links inseridos no corpo de texto de forma contextualizada. Mas sem sombra de dúvidas um ótimo meio de fornecer acesso simples é uma lista de postagens relacionadas ao término do post.

Para fazer isso é simples, em apenas alguns passos seu blog estará com esta funcionalidade habilitada e em perfeitas condições. Bom, agora que você já sabe o quanto isso pode elevar a qualidade do seu blog, vamos aos passos para a implementação do código.

Vá em Design >> Editar HTML

1 – Procure pelo seguinte código (ctrl + F) “]]></b:skin>”, então cole logo após ele o código abaixo:

<script type='text/javascript'>
//<![CDATA[
 var relatedTitles = new Array();
 var relatedTitlesNum = 0;
 var relatedUrls = new Array();
 function related_results_labels(json) {
 for (var i = 0; i < json.feed.entry.length; i++) {
 var entry = json.feed.entry[i];
 relatedTitles[relatedTitlesNum] = entry.title.$t;
 for (var k = 0; k < entry.link.length; k++) {
 if (entry.link[k].rel == 'alternate') {
 relatedUrls[relatedTitlesNum] = entry.link[k].href;
 relatedTitlesNum++;
 break;
 }
 }
 }
 }
 function removeRelatedDuplicates() {
 var tmp = new Array(0);
 var tmp2 = new Array(0);
 for(var i = 0; i < relatedUrls.length; i++) {
 if(!contains(tmp, relatedUrls[i])) {
 tmp.length += 1;
 tmp[tmp.length - 1] = relatedUrls[i];
 tmp2.length += 1;
 tmp2[tmp2.length - 1] = relatedTitles[i];
 }
 }
 relatedTitles = tmp2;
 relatedUrls = tmp;
 }
 function contains(a, e) {
 for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
 return false;
 }
 function printRelatedLabels() {
 var r = Math.floor((relatedTitles.length - 1) * Math.random());
 var i = 0;
 document.write('<ul>');
 while (i < relatedTitles.length && i < 20) {
 document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
 if (r < relatedTitles.length - 1) {
 r++;
 } else {
 r = 0;
 }
 i++;
 }
 document.write('</ul>');
 }
 //]]>
 </script>


2 – Agora, visualize para se certificar de que não há nenhum erro, não havendo nada errado, salve e mande expandir modelos de widgets. Feito isso, encontre o seguinte código:

<span class='post-labels'>
 <b:if cond='data:post.labels'>
 <data:postLabelsLabel/>
 <b:loop values='data:post.labels' var='label'>
 <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
  

Após ele, cole o código em negrito abaixo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
 </b:if>
  </b:loop>
 </b:if>
 </span>

Repare que o código fica antes de </b:loop> que já faz parte do código nativo de seu blog, eu o citei aqui apenas para você saber exatamente onde deve acrescentar o código em negrito.

3 – Feito isso, procure pelo seguinte trecho: <div class=’post-footer-line post-footer-line-3′>

E logo após ele, cole o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='related-posts'>
 <h4>Posts Relacionados:</h4>
 <script type='text/javascript'>
 removeRelatedDuplicates();
 printRelatedLabels();
 </script>
 </div>
 </b:if>

Pronto, basta salvar e conferir o código em funcionamento!

Mas talvez você queira dar estilo para seus Arquivos Relacionados. Então, terá que acrescentar CSS.

.related-posts h4{
 margin: 0 0 0 10px;
 padding: 0 0 0;
 font-size: coloque aqui o tamanho da fonte;
 color: #...coloque aqui o valor da cor para o título;
 }

Para dar estilo à lista:

.related-post ul{
 margin: 0 0 0;
 padding: 0 0 0;
 list-style-type:none;}
.related-posts li{
 margin: 0 0 0;
 padding: 2px 0px 0px;
 list-style-type:none;
 font-size: tamanho da fonte;}
.related-posts li a{color: #....}
 .related-posts li a:hover{color: #.....; text-decoration:none;}

Repare que as partes CSS que estão em negrito devem ser devidamente alteradas, assim dando o estilo que você que para seu site!

Sobre o autor | Website

Olá! Sou Vinicius Horta e tenho 37 anos, trabalho com Marketing Digital a 6 anos (quase 7 já). Aqui você aprenderá como construir negócios rentáveis online trabalhando no conforto de sua casa, exatamente como eu faço a 6 anos. Sou Web Designer com formação pelo SENAC e apaixonado por Copywriting e análise de dados de campanhas de Marketing Digital.

Treinamento Online Grátis

Assista Agora ao Treinamento Online Grátis com a Técnica que uso para Gerar um Faturamento de R$ 14.465,70 por Mês!

Para enviar seu comentário, preencha os campos abaixo:

Deixe uma resposta

*

Seja o primeiro a comentar!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.