Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Códigos e Scripts Vanessa S.

Artigos Relacionados com Imagem no final dos posts

Relacionar os artigos postados pode ser uma boa opção de mostrar ao leitor quais os outros conteúdos que existem no seu blog que se relacionam com o assunto que ele está lendo no momento.

Encontrei uma dica no Blogger Widget.

Lá eles ensinam como aplicar uma lista de artigos relacionados adicionado ao final de cada postagem e que usa imagens e textos aos assuntos contidos nos mesmos marcadores.
O código foi criado por eles, portanto os créditos são todos de lá.
O texto original é em inglês, traduzi a partir do publicado para facilitar o entendimento.
Importante lembrar que para o funcionamento correto deste código, suas postagens precisam conter Marcadores, e seu blog deve ter um Feed configurado, caso contrário, o código não funcionará.

[becape]Antes de tudo faça um backup do seu Template para evitar transtornos, se algo sair errado.[/becape]

1. Incluir o script e o CSS do código de Artigos Relacionados:

No painel do Blogger, acesse o menu “modelo” >> “Editar HTML” , marque “Expandir modelos de widgets” e localize a tag </head>
E cole ACIMA dela:


<!--Artigos Relacionados com Imagens Estilo e Script Inicio -->
 <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, “Times New Roman”, 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 com Imagens Estilo e Script Final-->

Salve!

2. Incluindo o segundo script e código HTML

Acesse novamente o menu “modelo” e clique em “editar html”, marque a opção “expandir modelos de widgets” e procure pela seguinte linha:


<div class='post-footer-line post-footer-line-2

Se não conseguir encontrá-la, procure por:


<p class='post-footer-line post-footer-line-2

Cole APÓS a linha encontrada, o código a seguir:


<!--Inicio do Codigo 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;'>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="Artigos Relacionados";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!--Fim do Código Artigos Relacionados-->

Salve as alterações!

[dica]Os códigos acima estão projetados para que os artigos relacionados apareçam apenas nas páginas internas. Caso queira que apareça também na página inicial, basta apagar a 1º e a última linha dos 2 códigos(destacado em vermelho).[/dica]

Se você preferir, você pode escolher outra opção de local mais adequado para instalar o código, mas instale sempre na linha do rodapé do post.
Sugiro que você dê uma lida no artigo:
Escolhendo o local para instalar elementos na área dos artigos

Você pode ajustar o número máximo de artigos relacionados que deverão aparecer ao final de cada post, basta alterar o número em negrito contido na parte destacada em azul.
Você também pode editar o titulo , alterando o texto destacado na cor verde.

Personalizando – Editar estilos

Você pode editar os estilos aplicados no código ,e para isso você precisará alterar alguns elementos no primeiro código que você colou logo acima da tag </head>
Se não se lembra qual é, procure pela linha:
<!–Artigos Relacionados com Imagens Estilo e Script Inicio –>

#related-posts -> se refere ao título.
font-size: 1.6em; -> tamanho da fonte
color: black; -> cor da fonte

Se quiser acrescentar um fundo (background) no titulo, acrescente a linha:
background: #fff; –> (Edite a cor conforme seu gosto)
Se quiser acrescentar uma imagem como background ao Titulo, acrescente:
background: #fff url(‘endereço da sua imagem’) repeat;

#related-posts a{
color:black;
-> se refere a cor do texto.
#related-posts a:hover{
color:black;
-> se refere a cor do texto quando passa o mouse em cima.

#related-posts a:hover {
background-color:#d4eaf2;
-> cor do plano de fundo quando passa o mouse em cima.

Lembrando que não é possível a visualização das alterações nos estilos , elas só ficam visíveis apos serem salvas.

 

Este código foi traduzido a partir do publicado no Blogger Widget em inglês.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

29 Comentários

  1. Thiane Valdez disse:

    Oi, Eu estou tentando editar o HTML do meu blog, mas agora as coisas mudaram bastante no Blogger. Não consigo achar nenhum dos códigos:

    nem nada! Não tem mais isso! O que eu faço? Onde coloco os códigos agora?
    Beijos!

  2. B-chan disse:

    No novo modelo do blogger nao funciona?

  3. silas disse:

    Por favor responda esta pergunta Clau, como eu quero que apareça também na página inicial, apaguei a 1º e a última linha do código() e
    (), mas não deu certo, continua aparecendo somente nas páginas internas.

    • Vanessa disse:

      Silas, vc tem que apagar os trechos que estão destacados em vermelho..mas tem que apagar nos 2 códigos.

  4. Luciana disse:

    Clau, como eu quero que apareça também na página inicial, apaguei a 1º e a última linha do código() e
    (), mas não deu certo, continua aparecendo somente nas páginas internas.

  5. Andrea Winchester disse:

    Não conhecia esse hack, sempre usai o Linkin. Mas esse hack é melhor que o Linkin, muito bom mesmo, recomendo!

  6. daivarela disse:

    O hack Linkin continua mostrando os artigos mesmo que já tenham sido eliminados do blog

  7. .:: Clau ::. disse:

    João V.
    Fico feliz que tenha gostado e mais feliz ainda pelo comentário e pelo retorno. Obrigada!

  8. Joao V. disse:

    Muito bom, deu certinho aqui!

  9. .:: Clau ::. disse:

    Natália
    Não sei. Vc terá que testar.

  10. Natália disse:

    Clau… Eu diminui a quantidade para aumentar o tamanho das imagens e ocupar todo o espaço da postagens. Tem como fazer isso?

  11. .:: Clau ::. disse:

    omelete100ovos
    Então dá uma lida no artigo "Twitter trackbacks" que lá tem o código para um elemento ficar abaixo da área de comentários. Pode ser que te ajude.

  12. omelete100ovos disse:

    Olá.
    Lamento incomodar mais uma vez. Já tinha lido esse artigo mas ele não menciona o local onde gostaria de colocar este código (depois dos comentários). Se puder indicar como fazê-lo, agradeço.
    Bom fim de semana.

  13. .:: Clau ::. disse:

    Natália
    Não tenho como saber o que ocorreu no seu template, a única coisa que posso sugerir é que vc tente instalar o código em outra linha. Dá uma relida no artigo.

    omelete100ovos
    Sugiro que você dê uma lida no artigo:
    "Escolhendo o local para instalar elementos na área dos artigos". O link está no post acima.

  14. omelete100ovos disse:

    Boa tarde Clau.
    Gostaria de colocar os "artigos relacionados" no fim do post (entre os comentários e os links de navegação). Não estou a conseguir encontrar o local correcto para colocar o código de modo que os artigos relacionados apareçam no local certo. Como posso fazê-lo?
    Obrigado.

  15. Natália disse:

    Clau… Socorro!
    Depois de aplicados os artigos se misturaram ao autor do blog, ou seja, postado por: (autor).
    Preciso dar uma linha de espaço.
    Como faço isso?

  16. Natália disse:

    Não consegui mudar o cabeçalho, ou seja, de artigos relacionados para Veja Também.
    Me ajuda?
    Grata.

  17. .:: Clau ::. disse:

    Cláudia Charão
    Pode ser que o local que vc esteja tentando instalar ele já esteja estipulado no seu template para aparecer apenas nas páginas internas.

  18. Cláudia Charão disse:

    Oi Clau!
    Desculpe incomodar, eu exclui as linhas vermelhas e ainda assim só aparece na página interna, é por que uso os novos templates do blogger?

    🙂

  19. Carlos Tomaz disse:

    Clau, obrigado!
    Era isso mesmo, o blog de teste estava aberto somente para leitores convidados…
    Vlww!

    @carlostomaz

  20. .:: Clau ::. disse:

    Next Level Games Brasil
    No tutorial eu inclui os trechos que podem ser personalizados. Eu procuro sempre publicar o que eu tenho conhecimento..se eu não informei algo no post é pq eu não sei.
    Neste caso, se eu não informei onde alterar isso q vc pediu, é pq eu não faço ideia de como alterar, mas acredito eu que deva ser no script sim. Agora descobrir onde altera isso, já é com vc.
    Dá uma fuçada no js e boa sorte.

  21. .:: Clau ::. disse:

    Carlos Tomaz
    Vc por acaso está usando um blog de testes pra instalar este recurso? Se estiver, verifique se o blog está fechado para visualizações por qualquer pessoa, se estiver, esta é a razão que os artigos relacionados não aparecem, pois este recurso só fica visivel em blogs "públicos" (abertos) e que contenham um feed.

  22. Next Level Games Brasil disse:

    Código muito bom, só gostaria de saber se tem como aumentar a quantidade de texto que aparecem abaixo das figuras? Se for no código java me diz onde mudo isso!

    Obrigado!!!

  23. Carlos Tomaz disse:

    Clau, me ajuda?
    Tentei instalar esse hack em um novo template que estou personalizando pro blog mas não aparece nada,
    fiz tudo certo e também testei outros hacks de postagens relacionadas sem imagem e também não aparece, até o LinkWithin não deu certo,
    Será que há no template algum outro script que pode não deixar esse funcionar? Foi a única coisa que pensei…

  24. Dorothy Lavigne disse:

    oie, como vai?

    Olha eu enchendo o saco de novo, hehehehe

    Clau, tem como instalar esse Widget junto com o "Leia Mais", mas de fomra que só apareça nos artigos extendidos e economize espaço na pagina inicial?

    Bjoookkkksssss!!!

  25. ::Clau:: disse:

    @Dani:
    Eu vi, vc usa o gadget do Linkin, ele realmente nunca faz a contagem correta mesmo..eu não gosto dele, mas muita gente usa.
    Tenta sim, e espero q dê certo!
    Beijos pra vc tb amiga.
    .::Clau::.

  26. Das disse:

    Clau, coloquei um – já deve ter visto, creio -, mas foi adicionando um gadget e às vezes nem aparece o número de artigos que deveria…
    Eu não gosto muito disso, sabe? Quando começa a dar erro, mesmo os pequenos, e piora tudo quando não consigo arrumar! rsrs
    acho que vou aderir a este, parece bem legal!
    Te digo o resultado, claro!
    Beijo! o/

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