Artigos relacionados no Blogger - Related Posts

E não somente é importante o artigo ou post que você lê hoje, mais os artigos que são referentes ao mesmo assunto ou ainda os mais antigos artigos também são importantes e tem sua relevância. Dar visibilidade ao artigo é algo que não se encontra facilmente em qualquer blog por isso o blog 'Bau das idéias' nos perguntou (comentando neste artigo) como colocar no blog o famoso recurso 'Artigos relacionados'. Assim como ele, acreditamos que outros blogueiros tem a mesma dúvida e vontade de melhorar.

IMPORTÂNCIA DE USAR LINKS INTERNOS

  Em um blog com bastante conteúdo, ou com conteúdo crescente tem a necessidade de mostrar aos leitores artigos que podem complementar as informações visíveis em tela ou ainda mostrar informações a mais que ele (o leitor) pode gostar. Algumas vezes, são tantas informações que quando criamos um novo artigo nos esquecemos de mencionar textualmente falando este artigo antigo, por isso, quando o leitor terminar de ler tudo, ele poderá gostar de outros e desta forma, passar mais tempo em seu blog e mais tempo representa um possível clique nos seus anúncios e anúncios representam.... Bem, já sabemos do resto né. Vale entender que gerar links internos no seu blog é bom por muitas coisas, até para os buscadores que 'entendem' a visitação nos artigos mais antigos de seu blog.

PONTOS POSITIVOS

• Fácil acesso a outros artigos e informações;
• Você mesmo pode acessar o artigo novo e rever os artigos relacionados;
• Maior tráfego de pessoas em seu blog e mais comentários;

PONTOS NEGATIVOS

Não há exatamente pontos negativos que devam ser mencionados, mais acreditamos que se o seu leitor for afixionado por títulos de artigos, então se prepare para ter um tráfego alto mais um pequeno tempo do leitor no blog. Mais muita calma, isso acontece muito pouco, visto que um leitor normal lê 75% do conteúdo antes de sair do artigo, a não ser que o artigo não seja nada do que ele gosta ou espera. Se você tiver alguma informação que possa complementar este parágrafo / artigo, fique a vontade para comentar neste artigo.

IMPLEMENTANDO O CÓDIGO

 Antes de você continuar, caso não saiba nada de HTML e não quer fazer grandes mudanças em seu blog poderá gostar do recurso linkwithin que tem a mesma função deste código. Com ele, você só precisa copiar e colocar (basicamente falando) um script em sua página, podendo ser até pela página de Configurações de seu blog. A nossa experiência informa que este recurso porém pode desconfigurar um pouco o blog e antes de tudo, o seu link vai no site do LinkWithin para depois retornar ao seu blog, sendo para o seu blog não tão bom assim. Para o Google, o site externo lhe traz tráfegos ao invez de ser um tráfego interno literalmente.

1. Logado no painel do Blogger, vá em 'Layout' depois 'Editar HTML' e marque a opção 'Expandir modelos de widgets'. Esta ação leh permitirá ver o código fonte (HTML) do seu blog.

2. Procure pela linha com a informação:

</head>

Antes dela cole o seguinte código:

<!--Artigos Relacionados Estilo e Inicio do código-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Artigos Relacionados Estilo -- código Final-->

3. Agora encontre a linha:

           <div class=’post-footer-line post-footer-line-1′>

Caso ainda não conseguir encontrar, tente encontra essa linha:

         <p class=’post-footer-line post-footer-line-1′>

4. Depois de encontrar a linha, Antes dela, cole o seguinte código:

<!--Inicio Artigos Relacionados -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Posts relacionados para blogger |</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a> | <a href='http://www.arrumablog.com/' target='_blank' style='display:none;'>Arruma Blog</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Você pode gostar:";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!--Fim Artigos Relacionados -->

Atenção

Há possibilidade de mudar a quantidade de artigos que aparecem relacionados no final de artigo. Para tal, mude o número 5 (em azul) pela quantidade que mais se enquadra em seu blog. Você também pode mudar as informações da linha seguinte 'Você pode gostar:' para a frase que mais chama a atenção de seu leitor. As cores também podem ser editadas, normalmente são representadas pelas linhas que contém a palavra 'color'. Não a troque caso não saiba usar as codificações.

Recomendamos que não retire os créditos.

Para saber mais: Blogger Plugins (inglês) e Ferramentas Blog