Posts Relacionados Usando Apenas HTML e CSS

 
Olá!!! Para concluir os 3 posts sobre como adicionar artigos relacionados em um blog, hoje trouxe a terceira forma que conheço e a mais prática de todas, que uso atualmente e há algum tempo.
Vimos anteriormente como adicioná-los com dois sites: o LinkWithin, super conhecido e usado por muitas pessoas, e o 2leep, que te fornece ferramentas profissionais e visual mais coloridinho.
Agora, faremos tudo na mão mesmo! Vamos adicionar um código ao nosso template que pode ser totalmente personalizado e feito sem nenhum site ou cadastro. Esse código foi criado pelo Blogger Widget, obtive os códigos no Ferramentas Blog e o personalizei. Lembrando que não funciona em blogs privados.
1. Acesse seu Modelo - Editar HTML e marque Expandir Modelos de Widgets.
2. Procure por </head> Quando encontrar cole ACIMA dele:

<!--Related Posts Start -->
<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: #fcc;
font-family:  "Verdana";
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#fcc;
}
#related-posts a:hover{
color:#fcc;
}
#related-posts  a:hover {
background-color:#fee;
}
</style>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!--Related Posts--> 

Vamos entender:
  • #related-posts = personalização do título;
  • float:center = posicionamento;
  • font-size: 1.6em = tamanho da fonte;
  • font-weight: bold = texto negrito;
  • font-family:  "Verdana" = tipo da fonte;
Aplique os estilos da forma que quiser. Se quiser que as postagens relacionadas apareçam quando o leitor abrir a postagem e não na home do seu blog, acrescente o código anterior neste aqui:
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
CODIGO ANTERIOR AQUI
</b:if> 

3. Procure por <div class='post-footer'> e cole ABAIXO dele ou <div class='post-footer-line post-footer-line-1'> e cole ACIMA dele:
<!--Related Posts Start-->
<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;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Posts Relacionados:&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div style='clear:both'/>
<!--Related Posts--> 

Em que:
  • O número 5 se refere a quantas miniaturas de postagens serão mostradas;
  • E o texto "Posts Relacionados:" vai aparecer como título e pode ser alterado. 

Novamente, se você configurar para aparecer apenas quando o leitor clicar na postagem, não se esqueça de deixá-lo assim:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
CODIGO ANTERIOR  QUE VAI NO POST-FOOTER AQUI
</b:if> 

O resultado será algo semelhante ao meu:

Simples não é? Há outra forma disso ser feito, mostrando apenas links e textos sem imagens, que você pode conferir aqui: Posts Relacionados sem imagens.
E no Candylland existem 2 modelos prontos também: Modelo 1:::::: Modelo2.
Pronto! Agora vocês têm muitas opções para mostrar aos seus leitores todos os seus posts.
Beijinhus...






Postar um comentário

14 Comentários

  1. Rô nenhum desses funcionaram no meu templante. :/
    Já tentei colocar com gadget, css tudo..

    Será porque? :/

    ResponderExcluir
    Respostas
    1. Dayane (não sou a Rô, se intrometendo um pouquinho...rs) mas as vezes isso acontece comigo tb, quando eu vou verificar a maioria das vezes já tem um código que adcionaram, daí não serve mais .-. hehe" mas melhor pesquisar mais um pouquinho '-'

      http://souotomeecomorgullhoo.blogspot.com.br/

      Excluir
    2. Não? Nem o LinkWithin? Quando eu te visitei tava ok.
      Bom, não sei o que pode estar ocorrendo. Vou dar uma pesquisada aqui. Sua plataforma é o Blogger também neh...porque se fosse wordpress aí teria que fazer diferente os tutoriais.
      Vou ver aqui ok?
      Beijus <3

      Excluir
  2. Adorei *o* estou oensandi em usa-los no meu proximo lay ^Z^

    http://souotomeecomorgullhoo.blogspot.com.br/

    ResponderExcluir
  3. Isso fica bom em qualquer lay, e é tão simples de fazer ^-^. Ro posta imagens para afiliados?

    ResponderExcluir
  4. Já conhecia esse que vc usa aqui><' Aliás já usei 1x no blog,mas já tirei u3u~Kissus
    unicornio-voador.blogspot.com

    ResponderExcluir
  5. Muito bonitinho esse acho que eu vou trocar para esse. bjs

    ResponderExcluir
  6. é muito interessante, mas você não teria um tutorial que ao invés de deixar a descrição abaixo da miniatura, deixaria em cima ao passar o mouse?

    ResponderExcluir
    Respostas
    1. Conheço um jeito que a Gizaa Veiga do Candylland postou que traz esse efeito. O link do Candylland tá ali na sidebar nos créditos e em meu perfil.
      Lá, vá em Índice e procure pelo post New Candy Posts Relacionados.
      Beijus ;3

      Excluir
  7. Roberta querida me ajuda!!! Já tentei fazer das 3 formas e não deram certo. Na verdade tinha dado certo da primeira vez que eu fiz pelo linkwithin e o problema ocorreu depois que tive que mudar o nome do blog, dai não consegui acessar mais ás páginas relacionadas, então exclui e tentei fazer de novo com o novo URL só que não me aparece as imagens só o titulo "poderá gostar também de:", por favor você sabe como resolvo esse problema???

    ResponderExcluir
  8. Roberta, o problema é que o código dos post relacionados já tá com o page type, que faz aparecer só quando o leitor clica no post. Se você retirar vai conseguir ajudar muita gente, beijos.

    ResponderExcluir
    Respostas
    1. Vc fala quando se insere dentro do b:if...? Deixei separadinho para quem quiser colocar dentro dos post ou na página principal...

      Excluir
  9. Já tentei colocar mas não dá certo, aparece apenas nos posts, mesmo sem os page type. Responde porfavor!

    ResponderExcluir
    Respostas
    1. O meu também não funcionou direito quando tentei usar há algum tempo. Vou rever o tutorial.

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up