Gadget de Artigos Relacionados com imagens para Blogger

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+

Uma das coisas mais importantes para manter o interesse de seus leitores em seu conteúdo e oferecer o que eles estão buscando, dar visibilidade aos artigos, de preferência aqueles que têm a ver com o que estão lendo naquele momento. Inter-relacionar os artigos de um determinado tema ou assunto é a melhor maneira de fazer isso e descobri um ótimo gadget – elemento de página para blogs do Blogger – que pode ser adicionado ao final de cada artigo e que usa imagens e textos interligados.

Siga o [Ferramentas Blog] no Youtube
Clique no botão ao lado para se inscrever no nosso canal.



Estou usando recurso semelhante aqui no [ Ferramentas Blog ], como pode ser visto na imagem também, no roda-pé de meus artigos e é exatamente isso que vou ensinar a fazer aqui neste tutorial.

gadget-artigos-relacionados-blogger

Já ensinamos um outro modelo, que você pode avaliar para escolher qual ficará melhor aplicado em seu blog:

Mas esse novo modelo é melhor integrado ao Blogger, funciona mais leve e é bem personalizável, o que te dá mais controle. Ele usa os marcadores de seus artigos para determinar a relação entre os textos e exibir opções de leitura complementar mais compatíveis.

Este gadget funciona em qualquer template e é bem simples de implantar. Será preciso adicionar algumas linhas de código no código-fonte e, por isso mesmo, lembramos da importância de fazer um backup de seu blog antes de prosseguir, bem como use um blog de testes para visualizar o resultado e verificar se funcionará bem em seu modelo de layout.

Adicionando o “Artigos Relacionados”.

1. Vá ao painel do Blogger e abra o menu “Modelo” e clique no botão “Editar HTML” que fica abaixo da miniatura do seu template, quando ver o código fonte do blog, marque a opção “Expandir modelos de widgets”, para poder visualizar todo o código-fonte de seu template.

Caixa do código fonte do Blogger

2. No código fonte procure pela linha “</head>” e, imediatamente ANTES dela, insira o código abaixo sem modificar nada:

<!--Artigos Relacionados 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, &#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://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>
<!--Artigos Relacionados Estilo e Script Final-->

3. Agora procure por uma linha semelhante a:

<div class='post-footer-line post-footer-line-1'>

ou, se não conseguir encontrar, procure por algo semelhante ou:

<p class='post-footer-line post-footer-line-1'>

4. Imediatamente ANTES de uma dessas que você encontrar em seu código, cole os linhas a seguir, modificando apenas o que for indicado (siga as orientações):

<!--Codigo Artigos Relacionados Inicio-->
<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>
<!--Codigo Artigos Relacionados Final-->

Indicado de vermelho está o número “5” que é a quantidade de elementos que aparecerá. Aqui no meu blog cabem até 7 elementos, então veja qual a melhor quantidade para o seu blog. Já em verde está o título que aparecerá para dar destaque à esta parte de seu blog.

Então salve o modelo e veja o resultado em seu blog.

Lembrando que só funcionará se você estiver usando Marcadores em seu blog. Para aprender a adicionar Marcadores aos artigos e como usar esta funcionalidade, veja os artigos abaixo:

Fonte: Blogger Widgetsurl_icon (inglês) e Gem@Blog (espanhol).

288 Comentários

  1. Boa dica, gostei muito. Tentei implantar no meu blog mas não localizei as linhas… meu template não é padrão do Google e deve ser isso.
    Ao inserir, notei que as linhas de comentário ficam no meio da página, aparecendo, ou seja o blogger não entende < – – acho que só * / nas linhas que você falou pra colocar o código. Dê uma olhada legal nesta parte…

    Responder

  2. @Arrumablog, realmente é preciso mudar as linhas de comentários porque elas estão em HTML e a língua do template do Blogger é XML.

    Responder

  3. e ai meu amigo.
    to com um problema aqui
    apos fazer o indicado acima não consigo salvar o template. da o seguinte erro:

    Não foi possível salvar o modelo
    Corrija o erro abaixo e envie o seu modelo novamente.
    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The string "–" is not permitted within comments.

    Responder

  4. Olá Marcos,

    Este artigo veio mesmo a calhar. Estava a pensar colocar o LinkWithin no meu blog, mas acho que vou experimentar este primeiro.

    Vamos vêr como fica.

    Abraços

    Responder

  5. Começou a votação para a escolha do Blog do Mês no Informação Virtual e o Ferramentas Blog está participando por ter sido escolhido como Blog da Semana no mês de setembro.

    Boa sorte!!!

    Responder

  6. Olá, eu cheguei aqui através da fonte do Dicas Blogger (sou leitora da Juliana Sardinha).

    Bem, eu realmente detesto pedir ajuda, mas é que quando eu instalei o Hack (e qualquer outro dos Artigos Relacionados), ele entra em conflito com o fomulario e os comentários exibiveis do meu blog (ficando as imagens por baixo dos comentários do blog), e não consigo arrumar esse erro que ele dá quando instalo o Hack, (e qualquer outro código).

    Bem, você poderia me dar uma dica do que posso fazer para normalizar a exibição do Hack? Se você puder pode acessar meu blog e ver o erro que ele dá de perto. Me desculpe o incômodo e agradeço a sua atenção.

    Responder

  7. No WordPress dá para colocar dessa forma, pois o Linkwhitin no meu template ficou bugado apresentando 2 vezes as thumbmails>

    Se esse codigo dá para wordpress como seria?

    obrigado e parabén pelo ótimo conteúdo, já está add em favoritos aqui.

    abraços

    Responder

  8. É legal, pena que não ficou bem no meu blog. Primeiro por causa da qualidade das imagens, segundo por causa dos títulos que utilizo.

    No momento, vou deixar os artigos relacionados em lista, como está.

    Um grande abraço,
    Prof_Michel

    Responder

  9. O meu template não tem p ­class='post-footer-line post-footer-line-1' e nem div­ class='post-footer-line post-footer-line-1'. Pesquisando "post-footer" também não encontro nada.

    Você sabe como encontrar o rodapé do meu post?

    Responder

  10. @Otto,

    Nesse caso a melhor solução é entrar em contato com quem criou seu template para saber, pois eu nunca vi nenhum layout para Blogger que não tenha essas linhas.

    Mas tem outras duas opções (Trocando "[]" por "<>":

    1. Procure por: [div class='post-footer']
    E cole os códigos antes dela.

    ou

    2. Procure essas linhas: [div style='clear: both;'/] [!– clear for photos floats –]
    [/div]
    E abaixo disso cole os códigos.

    Espero que resolva e descubra pq seu template não seguiu os padrões do Blogger.

    Responder

    • Já usava essa gadget “artigos realacionados” que aliás é muito melhor que o do linkwithin, pois não mostra artigos repetidos ou excluídos, porém depois de trocar o template do blog não consegui fazer ele voltar a funcionar, mas quando coloquei o código no trecho [div style=’clear: both;’/] funcionou perfeitamente. valeu mesmo!!!

      Responder

  11. Marcos,
    há tempos tinha um problema de indexação de alguns links. Resolvido com finalmente com o "Resync Now" do FeedBurner, e instalei finalmente este Gadget que favoritei! Muito bom mesmo!
    A.:.S

    Responder

  12. Olá!
    Instalei e funcionou,só gostaria de saber pq não aparecem os relacionados sem imagem "no imagem", como no seu aqui.
    Pelo que notei ele só está trazendo os posts com imagens!
    Eu mantenho uma lista de Artigos Relacionados convencional e por isto notei a falta dos posts sem imagem.
    Obrigada.

    Responder

  13. Olá!
    Depois de alguns dias pesquisando, fazendo e desfazendo, verifiquei que os artigos (relacionados) postados sem imagens "no imagem" só irão aparecer se no blog em configurações a aba Site Feed estiver com sua primeira opção (Permitir Feeds no Blog)selecionada como "Completa", do contrário não irá funcionar adequadamente. Pelo menos este foi o meu caso e talvez ajude a mais alguém.
    De qualquer forma, obrigada pela atenção, fica aqui meus parabéns pelo excelente blog.

    Responder

  14. Hi, Marcos…

    Acabei de instalar este gadget, simples e fácil.

    Feitas as alterações relativas a BG color e Text colors, ficou tudo muito bom. Melhor do que o que eu usava antes (BRPS – JS)!

    Resta-me, porém, um pequeno probleminha para o qual não consigo visualizar solução nos códigos implementados:

    -Como "chamar" uma imagem específica para os posts que não tenham foto? (Condicional?)
    -No meu blog aparece uma imagem de RSS/FEEDS.

    Grato pela atenção, e parabéns por mais este belo post, o que não é novidade nenhuma, em se tratando de [Ferramentas Blog]!

    []'s @inaciorolim

    Responder

    • Olá, @inaciorolim
      Há duas soluções pro caso de postagens sem imagens no texto:

      1) Alterar a imagem padrão definida para “sem imagem” (noimage)

      Você pode alterar no script a variável que define a imagem padrão para posts sem imagem:
      antes da linha “var maxresults”, insira esse código:
      var defaultnoimage=”ENDEREÇO DA SUA IMAGEM AQUI”;

      2) Usar imagem oculta.

      A imagem utilizada no thumbnail será sempre a primeira inserida no texto (vale pros resultados de busca do Google também). A dica abaixo vale para textos com ou sem imagem (que ficará oculta):
      Logo no início do texto (modo HTML) coloque sua imagem assim

      Pronto! Irá aparecer na miniatura sem alterar a apresentação do seu texto ^^
      (Era algo que me irritava isso rss. Porque gosto de usar mais de uma imagem e às vezes a miniatura não era a que eu queria. Passei a inserir a imagem desejada também no início do texto, caso ela não fosse a primeira)

      Compensa fazer as duas coisas.

      Espero ter ajudado.

      Responder

      • Vixe, não passou o código html da segunda dica kkk
        Bem, abra e feche a tag aí:
        (img src=”ENDEREÇO DA SUA IMAGEM AQUI” width=0 height=0 style=”width:0; height:0″ /)

        Responder

  15. @inaciorolim,

    Infelizmente não sei como ter ajudar nessas duas questões. Mas vou tentar aprender e se descobrir te falo aqui mesmo.

    Responder

  16. Nossa amigo vlw msmo, já havia tentado diversos jeitos de colocar artigos relacionados e nenhum funiconava no meu template… .
    Brigdão.

    Responder

  17. aew marcos sou mais um dos seus milhares de leitores.
    Tenho um blog de downloads, e uso atualmente o linkwhittim, ai vi esse aki em seu blog e resolvi esperimentar, removi o linkwhittin e coloquei esse, achei todas as linhas no meu template coloquei tudo certinho como pede no tutorial acima, so que na hora que abri meu blog para ver como tinha ficado nao apareceu nada, foi como se eu nao tivesse colocado.
    E ai marcos tem alguma dica ai para me ajudar ?

    Responder

  18. @Pedro,

    Certifique-se de ter colocado os códigos exatamente onde descrevi. As vezes colocar em outro lugar, não vai funcionar.
    Outra coisa é saber se seu blog está usando os marcadores de costagem, pois o gadget funciona vasculhando os marcadores.

    Responder

  19. Muito bom esse gadget marcos, estou usando no meublog!
    alias,aproveito pra parabenizar pelo blog, que além de bonito tem um conteudo muito interessante e relevante.
    sucesso ae!

    Responder

  20. Olá Marcos, estou aqui no teu blog á dias lendo quase tudo….
    mas infelizmente meu blog não tem p class='post-footer-line post-footer-line-1' e nem div class='post-footer-line post-footer-line-1, e as alternativas que você deu para Otto ão serviram para mim, estranho não ter essas linhas, e quem fez meu Template ão se encontra mas os endereços para contato. Você teria alguma salvação?

    Desde já Obrigado!

    Edu Marques, do blog Planeta Vegetariano (http://planetavegetariano.blogspot.com/)

    Responder

  21. @Edu Marques,

    Tente encontrar então a linha:

    div class='post-footer'

    Pode ser que funcione colocando o segundo código acima dela. Fiz o teste aqui e dá certo tb.

    Responder

  22. Eu achei muito bacana e já implementei no meu blog, só que tive alguns problemas. Nada graves, mas não sei se são bugs, tipo, eu não consigo configurar mais que 5 na quantidade deartigos a ser mostrada. Eu coloco 8 mas ele mostra apenas 4.

    Também notei que por exemplo, se eu estiver visualizando um post de vídeo e tiver apenas mais um post de vídeo relacionado, ele mostra apenas um thumbnail.

    E o que achei mais chatinho, ele não diversifica muito as postagens relacionadas. Não mostra posts muito antigos, só os 5 últimos que eu postei.

    Responder

  23. Ficou ótimo, já tinha tentado um código de outra fonte e não tinha funcionado. Esse ficou bom. Obrigada, Carol May.

    Responder

  24. @Rafael,

    Funciona sim, mas não é recomendável pelo espaço que ocupa.

    Mas se quiser tentar, retire do último código a segunda e a penúltima linhas do "b:if" e "/b:ig" que são as linhas condicionais.
    Faça testes antes de aplicar em seu blog principal.

    Responder

  25. Eu já várias dicas como esta, mas a do seu blog foi a única que serviu em meu template, parabéns, deu uma rasteira até no UsuarioCompulsivo em relação a este templete, lá eu não consegui instalar.

    Responder

  26. Já tentei 2 vezes, seguindo milimetricamente seu turorial. A essa altura eu já me recuso a aceitar que é erro meu, auahuaha… Não consigo por nada! Como pode me ajudar? Pq nem o gadget LinkWithin funciona no meu blog! O q faço?

    Responder

  27. @Juh,

    Desculpa dizer assim: mas com certeza vc está errando em alguma coisa.
    É extremamente importante seguir o passo 3, que diz exatamente onde se deve adicionar o código do passo 4. Se colocar em outro lugar isso não vai funcionar.

    Outra coisa importante é que seus artigos deve estar com marcadores de conteúdo. Esses que usamos para classificar os tipos de artigos. Pois é com os marcadores que o Gadget define o que será exibido na lista.
    Se não sabe como usar marcadores, pesquise aqui no meu blog por "Criar marcadores".

    Responder

  28. As vezes pode acontecer de não aparacer as postagens relacionadas, isso acontece quando não tem nenhuma postagem relacionada.

    Responder

  29. Marcos,
    de grande utilidade este recurso, obrigado por compartilhar.
    Eu usava o LinkWithin, mas esse é bem melhor!

    No entanto, não conseguí um ajuste perfeito na visualização do firefox, somente IE e chrome. Solicito uma orientação, por obséquio.

    Agradecido,
    – laion.

    Responder

  30. Olá Marcos, aqui deu certinho pra mim.
    Atenção Pessoal:
    Para quem está com dificuldade de encontrar a linha:
    class='post-footer-line post-footer-line-1'

    basta apenas procurar por:
    class='post-footer-line post-footer-line-2'

    caso mesmo assim n ão consiga encontrar, porcure por:
    class='post-footer-line post-footer-line-3'

    E assim sucessivamente.
    Foi assim que aconteceu comigo, resolvi seguir esses passos e deu 100% certo.

    WLW ferramentasblog.com!!!

    Responder

  31. Posso falar?!? Vc é SEN-SA-CI-O-NAL!!!!
    Suas dicas sao maravilhosas. Obrigada por ajudar quem esta começando nessa vida blogueira.
    Se o meu blog esta bonitinho a culpa é sua! hehehehe
    Mas eu estou aqui pra pedir ajuda, alem de agradecer é claro.
    Eu fiz tudo do jeito que voce falou, mas ai eu coloquei la no blog e os escritos ficaram pretos. Porem o layout do meu blog é escuro, entao ficou estranho. O que eu devo fazer?

    Responder

  32. Para mudar as cores dos textos, basta procurar pelas linhas na primeira parte do código que dizem:

    color:black;

    troque o "black" pelo código de cor desejada!

    Responder

  33. Não sei o que acontece com a layout do meu blog, mas não consigo visualizar esse gadget! Faço tudo como segue no tutorial, mas quando salvo simplesmente não aparece nada!

    Responder

  34. Para exibir mais de cinco tem que alterar também

    pt&callback=related_results_labels_thumbs&max-results=6

    No caso a chamada do feed esta em 6, então altere para o número que quiser, além de onde esta indicado em vermelho no tutorial.

    Responder

  35. ►Vicio MiniFazenda
    Também acontece o mesmo problema com o meu template.

    Porém com o linkwithin eu consigo

    Já com o outbrain eu consigo, mas ele aparece só em alguns posts.
    Mesmo quando ambos tem o mesmo marcador.

    Optei pelo linkwithin.

    Talvez isso poderia ser uma solução pra você também.

    Responder

  36. Ótimos tutorias que você apresenta aqui Marcos, post relacionados são muito importantes para quem quer ter um fluxo no seu blog.

    Parabéns mais uma vez

    Responder

  37. Até que enfim consegui colocar essa gadget no meu blog , tentei várias vezes e nada, mas seu tutorial deu certo.

    Responder

  38. Boa Marcos! Como sempre um ótimo post. Substitui meu linkwithin por esse, pois só estava dando pra colocar 4 post relacionados com ele, agora com esse consegui completar até o final com 7 também.

    Pessoal, funciona perfeitamente, agora tem uns templates que são diferentes, não são em todos que vão dar certo, será preciso fazer ajustes, tem que entender bem de HTML pra saber onde seu código pode ser colocado sem que dê erro, no meu mesmo, se eu colocasse onde o Marcos indicou, os "posts relacionados" ficariam acima da postagem, tive que coloca-los abaixo de "post-body" na estrutura do blogger para dar certo.

    Responder

  39. Cara… muito bom, o Link Within funcionava bem, mas ele era baseado nos feeds, então se eu apagava alguma postagem ela ainda aparecia no link within, mas com esse não, ele é perfeito pois ele considera os marcadores do blog por categoria! Perfeito!

    Responder

  40. Eu demorei pra conseguir utilizar esse hack, mas percebi que estava seguindo os passos certos, contudo não tinha percebido o mecanismo. Então vou dar algums dicas pra quem não "percebeu" ele funcionando.
    1) Os "artigos relacionados" só aparecem quando é exibido apenas um artigo na página do blog. Se quiser que apareça em vários artigos ao mesmo tempo recomendo o uso do Linkwithin.
    2) ele só traz artigos relacionados exatamente com os marcadores do artigo exibido (diferente do Linkwithin que rastreia qualquer marcador). Então por exemplo, se você estiver visualizando um artigo relacionado com um marcador X e que não tenha mais nehum post ligado a ele, não aprecerá nada.
    3) Complementando o iten (2) se vc configurar para aparecer até 05 artigos relacionados e só tiver mais dois posts associados aquele marcador X, irá aprecer apenas dois.

    Responder

  41. Olá Marcos. A principio tentei utilizar o script em meu blog porém não tive sucesso. Nenhuma mensagem de erro era exibida, porém o gadget simplesmente não era mostrado. Resolvi ler a parte de comentários inteira sobre este gadjet e solucionei o problema e sua resposta ao comentário do otto me deu a luz, procurei por "div style='clear: both" no html e colei o código após este trecho de código, acabei obtendo sucesso e estou satisfeito com desempenho do script. Obrigado desde já.

    Responder

  42. Nossa eu tenho que dizer: ficou perfeito!
    Sua explicação foi excelente, seus artigos são ótimos, e acho que não vou deixar de passar por aqui para conferir as novidades.
    Obrigada.

    Responder

  43. Parabéns pelo trabalho, Marcos. Porém acho que, com base no original em inglês, você poderia modificar o código para que uma imagem definida pelo usuário seja exibida em postagens que não contenham imagens.

    Responder

  44. Marcos
    Para mim, não deu certo, nada apareceu.
    Mas, estou lendo todos os comentários e visitando os blogs dos comentaristas deste artigo, para ver cada dica, ir tentando resolver pois eu uso o LinkWithin em um blog e aparecem 5 artigos, Já em outro, com a mesma largura, configurei 5 mas só aparecem 3.
    Então eu quero muito que este que você indica aqui dê certo!
    Vou aguardar os resultados e voltarei para dizer no que deu!
    Obrigada!

    Responder

  45. Marcos,
    Sou fiel leitor deste blog que considero um dos "TOP" no seguimento. Parabéns! Há alguma alteração para o Blogger de forma que permita os "Artigos Relacionados" ficarem sempre visíveis no radapé das postagens (e não apenas quando aquele post está sendo lido)? Pelo que acompanho parece ser algo que muitos estão precisando.
    Um abr4ço
    Natanael

    Responder

  46. @Natanael,
    É possível minimizar os problemas na migração. Já tenho um artigo tratando sobre isso. Procurar aqui que você acha.

    Responder

  47. Gostei do contéudo aqui..
    Muito interessante que até então aderir o gadget de artigos relacionados com imagens do blogger..

    Que de tal forma segui passo a passo para colocar uma outra ferramenta em meu blog.
    E nada a conteceu.
    Minha dúvida é a seguinte, o que faço após salvar o contéudo para ser válido no meu blog?

    Ficarei grato se poder ajudar.

    Responder

  48. Amigo,
    Certifique-se de que seus artigos publicado têm marcadores de postagem. Só assim os artigos podem ser relacionados e aparecerem no gadget.

    Responder

  49. Marcos,
    no meu blog só funcionou depois que coloquei o site feed no modo completo.
    Minha pergunta é: gostaria que o nome do texto saisse completo e não cortado pela metade. Como faço para aumentar a quantidade de letras que saem no título?

    grato

    Responder

  50. marcos no caso dos artigos relacionados
    deu tudo certo muito obrigado por essa valiosa dica
    estou aprendendo a mecher em blogs e me ajudou muito

    mas uma duvida
    como eu coloco uma imagem la
    la fico uma imagem escrito
    "NO IMAGE" como eu altero isso?

    se poder me ajudar fico grato
    FERNANDO HENRIQUE.

    Responder

    • Olá, Fermando. Acabei de responder isso ao @inaciorolim aqui nos comentários
      Não vou colar aqui pra não saturar hehe. Dê uma olhada aí

      Responder

  51. @Fernando,
    Isso não tem como alterar. O Blogger precisa detectar automaticamente as imagens que estão no artigo e escolher qual será exibida no gadget.

    Responder

  52. então quer dizer que só aparece foto se existir uma
    postagens só de texto
    não há como colocar fotos?

    mas então ta bom valeu maninho que Deus te abençoe cada vez
    mais

    seu blog é show to aprendendo muito com ele Té mais.
    FERNANDO HENRIQUE.

    Responder

  53. Oi Marcos, obrigada por esta dica! Pois não é que consegui implementá-la nomeu blog Pedaços. Tou feliz!!!! Lais.

    Responder

  54. Olá Marcos, em 9 de Outubro te perguntei sobre como fazer para os Artigos Relacionados ficarem sempre visíveis. Você me respondeu sobre migração e disse que bastava eu procurar a resposta aqui nos comentários e no blog. Já li várias vezes, segui todas as dicas relativas a este problema (tem uma no dia 17 de Dez 2009) e ainda não obtive o resultado esperado. Os Artigos aparecem quando estou nas postagens mas não aparecem na primeira página do Blogger. O que fazer?
    Obrigado mais uma vez
    Natanael

    Responder

  55. @Natanael,

    Eu não recomendo que se use esse gadget fora das páginas do post, pois vai deixar seu blog pesado e ocupará muito espaço.

    Mas se mesmo assim quiser tentar, retire do último código a segunda e a penúltima linhas do "b:if" e "/b:ig" que são as linhas condicionais.
    Faça testes antes de aplicar em seu blog principal.

    Responder

  56. Ficou perfeito. No blogger tem a opção de salvar todo templates, fazendo assim um backup e pus em minha área de trabalho do computador, mas não foi necessário usá-lo. Obrigado!

    Responder

  57. Olá Marcos,
    Seu blog é maravilhoso, consegui colocar "artigos relacionados" sem grandes dificuldades
    Obrigada por dividir…
    abraço!

    Responder

  58. Obrigado por mais essa dica, a princípio achei que não funcionara ai resolvi olhar uma das postagens e no final lá estava com imagens e tudo. Amei!
    Coloquei seu link me em meu blog para que outros tenham a mesma chance que eu.
    Espero um dia ter tantos seguidores e leitores quanto você.
    Regina
    http://ladyclic.blogspot.com

    Responder

  59. muito bom ! naum estava achando as linhas..foi quando vi que tinha esquecido de marcar o "expandir modelos de widgets" lol

    Responder

  60. Pingback: 5 dicas para reavaliar e melhorar o layout do Blog | [ Ferramentas Blog ]

  61. Pingback: Customizar, modificar e criar Templates para Blogger | [ Ferramentas Blog ]

  62. Nossa, estava vendo uns tutos aqui no site, e achei esse daqui.
    É que eu peguei uma template de um amigo meu e veio com os artigos relacionados, e estava com bugs :/
    E eu queria tirar, seguindo esse tutorial, eu consegui tirar.
    HAHAHA

    Vlw ae!

    Responder

  63. Ficou simplesmente sensacional. Quando estava justamente pensando em procurar informações a respeito desse assunto, recebi esse seu post pelo feed que assinei, e veio exatamente a calhar. Timing perfeito, devo dizer!

    Já usei no meu blog, assim como 90% do que eu vi aqui em seu blog.

    Adorei, e te aconselho uma coisa: indique mais para seu público (como eu) sobre essas matérias de gadgets e outras coisas. Sei que tem milhares delas e tal, mas às vezes eu não sei porque não procuro, e não procuro porque não sabia que um problema poderia ser solucionado. Eu não sabia, por exemplo, que tinha um código específico para “artigos relacionados”, então eu nunca iria nem sequer procurar.

    Mostra mais matérias com coisas legais assim!!!

    Sou seu fã

    Responder

  64. Seguinte: Eu fiz tudo certinho como manda o figurino acima, sem esqueçer de nenhum detalhe, mas simplesmente não funciona como se eu não tivesse feito alteração alguma no código.
    Alguma dica???

    Abraços,
    Kami

    Responder

    • @Kami,
      Nào sei o que pode ter acontecido no seu caso.
      Esse código funciona rastreando os marcadores dos posts do seu blog e quando há conteúdo para os mesmos marcadores, eles são exibidos como relacionados.
      Refiz os testes do código e está funcionando perfeitamente. Veja se vc realmente cumpriu todas as etapas descritas.

      Responder

  65. Olá Marcos,

    Você é o cara, não tem pra ninguém no que diz respeito às ferramentas e melhorias de blogs. Parabéns pelo trabalho, espero que esteja rendendo um bom dinheiro para vc, assim vc continuará ajudando as pessoas. 🙂

    Bom, minha dúvida com relação à este gadget é, como posso alterar o tamanho da fonte do texto (títulos dos posts)? No meu blog ficou meio estranho, os textos ultrapassando o local devido…

    Obrigado.

    Responder

    • Olá, Lucas.

      Localize esse trecho do código utilizado:

      #related-posts a:hover {
      background-color:#d4eaf2;
      }

      Imediatamente depois, cole:
      #related-posts div { font-size: 10px !important;}

      Coloquei em 10px, mas você pode definir o tamanho que quiser.
      Quanto aos títulos mais longos, o script permite apenas até 35 caracteres (mesmo que você mude o tamanho da fonte) e o que passar é substituído por reticências…

      Responder

  66. Olá, Marcos.
    Pow, mais um tutorial bem mastigadinho, hein? Muito bem explicado e objetivo. Valeu mesmo, cara!
    Só tenho uma pequena dúvida. As imagens que aparecem em miniaturas, se forem retangulares, ficam achatadas. Queria que não ficassem distorcidas. Tem como solucionar isso? Se possível, dá uma olhadinha pra ver como ficou no meu blog.
    Desde já agradeço pela atenção. Parabéns pelo ótimo site.
    Sucesso!

    Responder

  67. Segui as dicas, deu tudo certo. Ocorre que excluí uma postagem e continua aparecendo o post relacionado. Será que devo deletar o linkwithin e reiniciar os passos. Como faço então para deletá-lo?
    Tenho usado todas as suas dicas, que são de fácil entendimento e resultado garantido. Valeu.

    Responder

  68. Pessoal… descobri que se o blog estiver configurado com leitura “somente para autores” não aparece mesmo nada. Se mudar para “qualquer pessoa” aparece na hora!!! Não sei se ajudei alguém, mas espero que sim…

    Responder

  69. Olá Marcos! Muito bom esse código, estou usando ele junto com o LinkWithin; assim eu fico com os últimos artigos relacionados de cada marcador e ainda adiciono mais 5 artigos aleatórios do LinkWithin.
    Tem um detalhe interessante ali no último código, que você esqueceu de destacar; além do número “5”, que você destacou na cor vermelha há um número “6” um pouco mais acima. No caso, se você quiser que apareçam 8 imagens, basta trocar o “5” que você destacou na cor vermelha por “8”, e o número mais acima, no caso o “6”, deve ser trocado por “9”; se trocar somente o “5” por “8”, vai continuar aparecendo 5 imagens. O número de cima deve ser sempre 1 a mais do que o segundo, caso contrário não funciona direito. Bom, pelo menos eu tive que fazer isso no meu blog, para funcionar direito. Espero estar ajudando algum(a) leitor(a) que tenha algum problema com o código!

    Forte Abraço.

    Responder

    • Olá, Paulo.

      Esse número “6” vai indicar quantos artigos do mesmo marcador ficarão disponíveis, caso você tenha vários artigos para somente um tipo de marcador.

      Explico:

      Digamos que você resolva aumentar o número de artigos relacionados a serem apresentados no rodapé do post para, por exemplo, 8. Digamos também que você tem 10 artigos somente para um marcador chamado, por exemplo, “culinária”. Se você não alterar o número 6 do código acontecerá que, por mais que você tenha aumentado o número de artigos a serem exibidos (8, no caso), o número máximo de artigos a serem relacionados para somente um tipo de marcador será 6. Então, digamos, se você possui 10 artigos no marcador “culinária” mas deixa o 6 lá no script, como esses 10 artigos têm somente um marcador, o número máximo de artigos relacionados para este único marcador será somente 6, não chegando a preencher os 8 artigos. Já quando há mais marcadores para um mesmo artigo, o número máximo de artigos apresentados no rodapé dos posts geralmente é preenchido (a menos que você tenha poucos artigos publicados para tais marcadores que não atinja o número máximo requerido).

      Concluindo, se você quiser que apareça os 8 artigos relacionados no rodapé do posts, é bom alterar o número 6 para pelo menos um valor igual ou maior que o número de artigos que você escolheu para serem relacionados (no caso, se você escolheu o número 8 como quantidade máxima de artigos a serem relacionados nos rodapés dos posts, sugiro colocar o número 8 ou 9 no lugar do número 6).

      Desculpe-me pela longa explicação, mas descobri isso ontem, enquanto testava os códigos e tentava mudar algumas coisas.

      Espero que minha explicação não tenha ficado confusa.

      Responder

  70. Nossa Parei de pesquisar tutoriais no google agora venho direto no seu site, aqui tem tudo e é muito bem explicado

    Responder

  71. Primeiramente, parabéns pelo blog que é muito bom.

    Gostei muito desde gadget pois os links são diretos para o meu blog, e não redirecionados pelo linkwhitin e assim ele tem uma vantagem em SEO.

    Mas para o meu blog, as imagens estão pequenas e o texto algumas vezes estão cortados, gostaria de saber se existem algum outro desenho do gadget e onde eu posso encontrar.

    vLw!

    Responder

  72. A princípio deu errado, mas percebi que foi por falta de conteúdo no meu blog. Agora deu tudo certinho! valeu!

    Vou postar mais pra ficar show de bola!

    Abraço!

    Responder

  73. Muito obrigado por essa super dica.

    Antes eu utilizava o Linkwithin, mas aconteceu um problema que não consegui solucionar. Apaguei diversas postagens, contudo o Linkwithin continuava a indicá-las. Por óbvio isso estava causando um transtorno aos meus leitores que eram direcionados para páginas inexistentes.

    A solução foi esse código disponibilizado por você. O tutorial ficou muito bom e com atenção e calma é possível instalar sem maiores problemas.

    Para o pessoal que vai usar o código, nunca é demais lembrar: FAÇA O BACKUP DO BLOG OU SITE.

    Grande abraço à todos.

    Responder

  74. Olá, Marcos!

    Eu gostaria de saber se há algum código neste script (tentei de tudo e não descobri) que deixa os títulos inteiros dentro dos retângulos, sem “resumi-los” com reticências. Vi que o seu gadget de assuntos relacionados estão com os títulos na íntegra, mas no blogger não fica assim. Dá para mudar isso?

    Responder

    • Oi, Melissa, tem e não tem (calma, explico).
      >>> NÃO tem porque:
      O script automático limita o texto a 35 caracteres para caber no espaço reservado dentro do layout criado (72 por 65px).
      Até dá pra mudar essa largura/altura via CSS, mas o texto não.

      >>> Mas tem SIM:
      Uma solução seria incorporar esse script ao blog, ou seja, pegar todo o código do arquivo que contém as funções que criam quadrinhos dos artigos relacionados:
      http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js
      Daí então editar e jogar o código editado no blog.
      Não creio que seja viável. Além de muito trabalho, você perde qualquer atualização que for feita no arquivo original.

      >>> Ou seja, melhor não 🙂

      Responder

  75. Eu fiz no meu blog e não tava dando certo, quando chegava no último código não dava certo até que lendo os comentários aqui encontrei uma pessoa que falou que procurou pelo código “div style=’clear: both”, aí sim deu super certo no meu blog. Bom o meu ainda não deu tão certo porque ainda tem poucos post e marcadores, mas em algumas post funcionou. Espero ter ajudado alguém que passou ou que está passando pelo mesmo problema que eu. Esse é um dos melhores blog’s que existe para ajudar pessoa que como eu tem certa dificuldade em configurar o seu blog! Marcos vc está de parabéns!!!!

    Responder

  76. Show professor Marcos! Funcionou. Eu gostaria de saber como fazer para aumentar o tamanho dos anúncios e como disponibilizar uma imagem padrão de minha escolha para os anúncios sem imagens. Obrigado! =]

    E parabéns.

    Responder

  77. Poxa isso quebrou um galho danado, os widgets de artigos relacionados não estavam servindo no blog que pertenço, mas esse código caiu como uma luva, muito obrigado.

    Responder

  78. muitíssimo obrigada por ensinar o uso dessa ferramenta de maneira tão didática.
    estou adorando o seu blog e aproveitando as dicas para melhorar o meu. vou inclusive recomendar a todos que conheço.
    um abraço,
    miriam

    Responder

  79. Eu já uso esse código ha algum tempo, e sempre acontece um pequeno defeito de vez em quanto, os titulo se sobrepõem ao texto “postado por” quando o titulo do post relacionado e grande, alguém sabe com resolver isso ou já aconteceu com alguém?

    Responder

  80. Ola, otimo gadget, funcionou perfeitamente em meu blog, exceto por um problema, e creio que seja o mesmo do Gabriel Cirino, coloquei para aparecer 7, mas o maximo que vai é 5… sera q poderia nos ajudar ?

    Responder

    • Allan,

      Algumas vezes o número é menor por conta de não terem tantos posts relacionados em seu blog. Ele sempre vai mostrar um máximo que você escolher, mas desde que você tenha número suficiente de posts em seu blog para serem exibidos como relacionados ao post.

      Responder

      • Sim Marcos, Já aprestei atenção nisso antes, e já verifiquei nos meus marcadores que tenha mais de 10 post’s, e mesmo assim…o mesmo que vai é até 5, ou devo ter um numero muito superior a 10 de post’s?, Meu blog é novo, tem poucos post realmente.

        Responder

        • Brilhante Marcos! Primeiramente parabéns por todos seus maravilhosos trabalhos! Em relação ao comentário acima de aparecer só cinco miniaturas, acabei percebendo que leva um certo tempo para aparecer mais miniaturas(conforme você seleciona), logo o melhor é esperar, pra mim levou algumas horas para atualizar esta funcionalidade, sendo assim um recado a todos não desistam dos seus trabalhos e tenham paciência! Pois o Marcus Lemos pra mim é um guru da blogosfera!
          Lembrando que só funcionará se você estiver usando Marcadores em seu blog. Para aprender a adicionar Marcadores aos artigos e como usar esta funcionalidade, veja os artigos abaixo:

          Criar Marcadores de postagem do Blog
          Gadget Marcadores do Blogger – Novidades

          Responder

  81. Parabens pelo artigo.

    Tem um problema, meu blog o fundo é negro, pelo que só se consegue ver o que está escrito abaixo da página depois de passar o rato em cima dela.

    Pode dizer em que parte do código, está a opção para para alterar a côr do texto, ou simplesmente alterar a côr de fundo?

    Obrigado.

    Responder

    • Entretanto consegui descobrir a resposta sozinho 🙂

      No entanto notei que o link para o artigo, se muito grande, pode ficar ligeiramente fora da borda. Tem maneira de corrigir isso?

      Obrigado.

      Responder

    • 0a300 Procure pelo codigo q começar por
      e susbstitua tudo por esse :


      #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: white;
      font-family: Georgia, “Times New Roman”, Times, serif;
      margin-bottom: 0.75em;
      margin-top: 0em;
      padding-top: 0em;
      }
      #related-posts a{
      color:white;
      }
      #related-posts a:hover{
      color:yellow;
      }
      #related-posts a:hover {
      background-color:#d4eaf2;
      }


      Responder

  82. Marcos, finalmente funcionou. Não estava dando certo porque no meu blog tenho 3 post-footer-line, e só funcionou no último “line 3”.

    Agora meu blog ficou perfeito!!!

    Valeu demais!!!

    @tolstoy

    Responder

  83. Já estava desistindo quando vi o comentário acima do colega Toltoy! o meu blog também tem “line 3” hehehe testei e não é que deu certo? No line 1 não aparecia. Agora sim!

    Responder

  84. Como mudo o tamanho das imagens??

    Não acho o campos Height e Width nos códigos para poder fazer as alterações.

    No meu blog as imagens ficaram um pouco pequenas 🙁

    Responder

  85. Pingback: Posts relacionados com o plugin Similar Posts | Criar Sites

  86. Marcos o que voce usa é qual? Consegui por aqui amigo só que não aparece o titulo completo do artigo em cada um. Tem como aumentar o tamanho na vertical para caber o titulo do post em cada quadrinho ?, pelo codigo?
    fico atento na resposta

    Responder

  87. Agradeço e faço questão de mencionar isso, pois estive em vários sites e fiz várias tentativas, algumas bem desastrosas, inclusive. Aqui encontrei conteúdo direto e honesto. Era tudo que queria. Valeu!

    Responder

    • As vezes não aparecem muitos artigos relacionados por não existirem tantos artigos relacionados no seu blog. Por exemplo se você publicou 5 artigos sobre “Futebol”, não tem como aparecer mais do que 5 artigos relacionados.

      Responder

  88. Olá, eu coloquei esse sistema de post relacionado em meu blog e funcionou legal, mas depois de algum tempo ele parou de funcionar. Isso começou depois que o google acrescentou .br nos blogspot brasileiros, tem alguma coisa haver?

    Responder

  89. Olá Marcos, continui seguindo suas dicas e, claro, me dando muito bem com elas.
    Essa dica do post relacionado também funcionou de primeira, mas desde ontem parou de funcionar. Não teve alteração na imagem do blog, simplesmente só não aparecem mais os outros artigos.
    O que será que aconteceu.

    Não tenho mexido no HTML, a única coisa que eu fiz foi ativar as ferramentas de SEO no próprio blog, mas não no HTML. Será que isso influencia?

    Responder

  90. Olá Marcos, pelo dois últimos comentários o que dá a entender é que houve alguma atualização no blogger ou alguma modificação remota que fez com que o código não funcione mais… No meu blog estava funcionando perfeitamente, mas desde a semana passada parou de funcionar, já reinstalei os códigos e nada, testei em outros blogs de teste e também nada! E agora?

    Responder

    • O que mudou foi a nova estrutura de URL do Blogger que está afetando negativamente muitos elementos de página e códigos. Ainda não dá pra saber se isso é permanente.
      Alguns blogs não foram afetados assim e tudo continua funcionando sem problemas. Assim que eu encontrar uma solução para os afetados, publicarei aqui.

      Responder

  91. Olá Marcos Lemos… estou com um probleminha, fiz exatamente tudo o que vc recomendou, inclusive estava funcionando perfeitamente, mas quando alterei o Blog (fiz modificações) e refiz desde o principio, parou de aparecer os Artigos Relacionados… Sabe me dizer se este problema é comum? Seria este gadget apenas para um tipo de modelo? Aguardo e parabéns pelo Blog!

    Responder

  92. Olá Marcos… Desde ontem estou revisando. Cheguei a desfazer e refazer pelo menos umas 7 vezes. Como disse eu já usava este plugin, mas como mudei de modelo, tive q recolocar alguns plugins q usava… Pra variar tbm o plugin do facebook não esta mais funcionando (like-box – fan page)… Grato pela resposta!

    Responder

  93. Olá Marcos!
    Conferi todos os códigos e está tudo certo. Mas os posts relacionados realmente não aparecem mais. Será que isso é permanente?

    Obrigada,
    Débora

    Responder

    • Débora,
      Algumas pessoas perceberam problemas com esse gadget quando da mudança das URLs do Blogger. Pode ser que seja temporário e é bom manter ativo no blog para ver se aparecerá alguma correção.

      Responder

  94. Ao que parece e um problema generalizado, já que alguns quem não tinha o problema (eu por exemplo) passaram a ter neste mês de abril.

    Responder

  95. meu Deus! Sofri como louco por que o meu sumiu também do nada! Pensei ter feito algo que tivesse excluido os códigos mas nada. Refis tudo de novo e não apareceu mais… Ainda bem que tive a ideia de vir aqui. Marcos, será que o problema não tem haver com a mudança de endereço agora com o blogspot.com.br? o meu blog está com domínio próprio mas de vez em quando está aparecendo erro 505, estou acreditando que isso é por que quando comprei o domínio meu blog ainda era blogspot.com… Gente nãoa acredito que vou ter que voltar pro linkdiin

    Responder

  96. Infelismentte eu não consegui. Eu quero muito colocar essa ferramenta em meu blog. Me ajuda por favor?!

    Desde já agradeço.

    Responder

    • Amanda.
      Aparentemente alguns blogs estão com um conflito nesse código que não está funcionando bem, em função de algumas mudanças na estrutura do Blogger. Estamos esperando para ver se vão corrigir esses conflitos.

      Responder

  97. Olá Marcos,

    primeiramente obrigado por algumas dicas que usando no meu blog ele é o que é hoje.

    Marcos eu tenho o Link e está sem problema mas como fiz uma mudanca no layout de duas para uma coluna eu ganhei espaço para colocar ao inves de 4 colocar 5 miniaturas mas nao consigo ver essa opcao no html. Ja ate tentei refazer pelo site do Link e nada.

    So quero adicionar 1 miniatura.

    Alguma dica?

    Responder

  98. Eu usava e depois parou de funcionar e pelo que vejo aconteu com varios blogs isso nao so com o meu o linkwinht muito ruim arranja outro legal ai pra gente vlw

    Responder

  99. O Meu tambem parou de funcionar ! Estou tentando resolver a algum tempo mas nao consigo !!! Vou seguir essa página até sair uma atualização do problema!

    Att,
    Erison Meira

    Responder

  100. Pingback: Como voltar a URL do Blogger para o padrão “blogspot.com” sem o país | [ Ferramentas Blog ]

  101. Marcos,

    Meu blog já não tem mais a extensão “blogspot.com.br” e sim, agora, somente “.com.br”

    Tentei instalar o código de artigos relacionados e não deu certo, segui as instruções para alterar o URL para o padrão sem país, e a pagina do blog simplesmente desapareceu, aparendo apenas um frase, que se não me engado era algo como ” … artigo relacionado …”, sem a possibilidade de entrar novamente no blog e reverter o código para o normal.

    Felizmente, eu outra aba tinha deixado a pagina antiga aberta e consegui fazer a alteração.

    Poderia me ajudar nesse problema? como posso instalar devidamente a caixa de artigos relacionados?

    Responder

    • Jeferson,
      Faltou um pouco de atenção da sua parte. Aquele código para alterar a URL é apenas para quem usa o endereço padrão do Blogger. Se você tem domínio próprio não tem que usar aquilo.

      Realmente o sistema de artigos relacionados parou de funcionar e estamos trabalhando para encontrar uma solução. Ainda não sabemos o motivo do erro, mas vamos descobrir. Assim que tiver uma solução, publico aqui.

      Responder

  102. Olá Marcos! O teu site é muito bom e já várias vezes vim buscar algumas ferramentas. Tal como esta dos artigos relacionados.

    No início o código não estava a funcionar mas substituí a parte antes do no script onde diz http://blogergadgets.googlecode.com/files/relatedthumbs21.js por uma nova e passou a funcionar.

    A nova é http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js

    Aconselho a todos aqueles que tiveram problemas a fazer esta troca.

    Penso que este problema não terá a apenas a ver com a mudança do blogspot.com para blogspot.pt ou blogspot.com.br

    Já instalei no meu novo blog e até fiz alterações no ficheiro em .js

    Confira o exemplo em http://www.ondeecomoinvestir.com/2012/05/licoes-basicas-para-quem-quer-ser-livre.html.

    Muito obrigado.
    Tudo de bom. E um abraço de Portugal.

    Responder

      • Olá Jeferson!

        O resultado comigo foi imediato. E apenas tive de trocar um link pelo outro.
        Faz o exercício e se funcionar, melhor. Se não, volta a por o link antigo e ficas como estás agora.

        Usei o código fornecido aqui no Ferramentas Blog e depois troquei o link no código. Foi só isso que fiz.

        Responder

  103. Caramba Victor, eu estava seguindo esse post, quando vi meu email estava deitado logo levantei pra testar e funcionou perfeito ! É isso ai, ainda bem que existe esses blogs e compartilhamentos 😀

    Obrigado ao Ferramentas Blog e ao Victor !

    Responder

  104. Uso dominio personalizado no meu blog e mesmo utilizando o novo código com a alteração, este gadget não está funcionando. Alguém está passando por este problema ainda?

    Responder

  105. Olá Marcos Lemos, gostaria que me ajudasse com uma questão. Segui o seu tutorial para adicionar o “poderá gostar de” no fim da página individual de cada post. Funcionou mas tenho uma dúvida: As miniaturas das fotos dos posts relacionados, bem como o texto, aparecem muito pequeno. Queria com dimensões, por exemplo, como aparecem no seu blog. Como faço para aumentar o tamnho das miniaturas, bem como o texto… ?

    Fico, ansiosamente, a espera de uma ajuda.
    Obrigado

    Responder

    • Junior,

      Para fazer esse tipo de modificação você precisará acessar o arquivo JavaScript que faz essas funções. Não é algo simples se você não tem conhecimento para esse tipo de código.

      Responder

  106. Cara, mais uma indicação bem-sucedida… O mais interessante é que até poucos dias atrás eu paguei uma nota para fazerem algumas coisas como estas em meu blog. Hoje, graças as tuas indicações, fico à pensar que, estudar é mesmo uma das melhores coisas. Na rede tem sempre alguma coisa nova e boa para nossos blogs e aqui, neste teu espaço, tem as melhores indicações que eu esperava. Mais uma vez, obrigado Marcus.

    Responder

    • Pra mim foi a mesma coisa com relação ao Linkwithin. Fazia tudo certinho, mas não acontecia nada, ou, quando acontecia numa das inúmeras tentativas, apenas mostrava uma lista com os títulos dos artigos, sem as imagens.

      Agradeço imensamente ao criador do tuto. Valeu, Marcos!

      Responder

  107. eu queria mudar a largura das imagens e não conseguia achar o codigo dai peguei e baixei o .js e mudei pelo bloco de notas e depois hospedei o codigo no meu servidor não tem problema né marcos

    Responder

  108. Parou de funcionar no meu blog. Simplesmente sumiu de lá.
    Será que é devido a alguma atualização do blogger, que fez com que meu código fosse “desativado”? (antes funcionava normalmente)

    Responder

    • O meu eu instalei ontem e sumiu também mais eu retirei novamente todo o codigo e instalei novamente e ele voltou a funcionar faça isso que vai dar certo

      Responder

        • Andei lendo os comentários anteriores e realmente o código antigo parou de funcionar desde o início do ano. Parece que este artigo já foi atualizado pelo Marcos, mas não foi deixado nenhum aviso de atualização.

          Enfim eu comparei o código que estava no meu blog com o código aqui do FerramentasBlog e havia várias inconstâncias.

          No código do item 2 deste turorial, havia linhas a mais no meu codigo. E o código do item 4, estava DEPOIS e não ANTES como sugere neste tutorial. Atualizei tudo e fim do problema.

          Espero ajudar alguém com o mesmo problema.

          Responder

  109. Tenho dúvida de como posso aumentar o tamanho do espaço do texto pra caber o título da matéria inteira, e como aumentar o tamanho das imagens. Abraço

    Responder

  110. Bom dia,
    obrigado pela dica, funcionou perfeitamente em meu blog, mas gostaria de saber como mudar a cor das letras, pois o meu blog tem o fundo preto, e as letras só aparecem quando passa o mouse encima da imagem.
    desde já agradeço!

    Responder

    • Gustavo,
      Para mexer nas configurações será preciso mudar o código CSS onde diz:

      color: black;

      É um procedimento relativamente complicado para que não tem conhecimento de códigos.

      Responder

  111. Olá, Marcos!
    Vi que no código tem “if cond=’data:blog.pageType”.

    Gostaria de saber que código eu coloco pras notícias relacionadas aparecerem direto na página do blog, sem ser só quando a pessoa está no link da postagem, sabe?

    Obrigada desde já!

    Responder

    • Nathali,

      Verifica se você seguiu todos os passos indicados, inclusive se marcou a opção de “Expandir modelos de widgets”, pois sem marcar isso não tem como achar os códigos mesmo.

      Responder

  112. Olá Marcos Lemos.

    Excelente Código. Está implementado e a funcionar.
    Vou seguir o seu blog a partir de hoje.

    Muito Obrigado.

    Responder

  113. Oi Marcos, deixei ontem um comentario dizendo que nao consegui… Hj consegui porem so vejo qdo estou logada no meu blog, qdo nao estou nao aparece os links relacionados na pagina… se vc entrar na minha pagina podera ver que nao aparece.. Pq sera? Obrigada

    Responder

      • Obrigada por responder tão rápido! Meu marido me ajudou e descobri o q estava faltando e deu certo! Procuro por titorial para adcionar plugins das redes sociais na mesma linha di contato, FAQ … Pois foz de maneiras diferentes e não consigo por tudo junto… Poderia dar dicas?
        Ótimo deu blog! Parabéns!

        Responder

  114. Olá, Marcos!

    Muito obrigado pelo tutorial!

    Por gentileza, a frase ou título “Artigos Relacionados” está aparecendo com todas as letras maiúsculas: ARTIGOS RELACIONADOS.

    Gostaria que aparecesse normal, isto é, “Artigos relacionados”.

    Pesquisei e ainda não encontrei como.

    Pode me dar uma dica?

    Desde já, agradeço toda a atenção.

    Tudo de bom,

    Thieres Machado

    Responder

  115. Perfeito! Funcionou perfeitamente!

    Mas devo concordar com o próprio autor, sobre quem quiser uma melhor referência de página para página, tem que ser feito manualmente mesmo.

    Responder

  116. Olá Marcos,

    Segui seu tutorial e funcionou direitinho, mas o título (Artigos Relacionados) ficou com o fundo vermelho. Pode me ajudar a tirar essa cor?

    Obrigada.

    Responder

  117. Amigo Marcos, ótima postagem, me ajudou demais… pra mim o melhor blog da net…

    Marcos você poderia me ajudar, por exemplo, eu coloquei no meu blog só para aparecer 5 artigos relacionados, só que ficaram muito pequenos os direcionamentos, como faço para aumentar a largura das imagens nos próprios código que foram inseridos HTML…

    muito obrigado…

    Responder

      • Marcos, achei a resposta. No meu blog também não aparecia, então atentei para uma dica sua em outra postagem, e agora está funcionando normalmente…

        No passo 3, é preciso localizar o código e colar o código do passo 4 antes desse código.

        Porém, existe mais de uma ocorrência dessa linha de código, e O CÓDIGO DO PASSO 4 DEVE SER COLADO ANTES DA SEGUNDA OCORRÊNCIA.

        Fiz essa alteração e apareceu, além de funcionar normalmente. Espero ter ajudado.

        Responder

  118. Com o Linkwithin, fazia tudo certinho, mas não acontecia nada, ou, quando acontecia numa das inúmeras tentativas, apenas mostrava uma lista com os títulos dos artigos, sem as imagens.

    Agradeço imensamente ao criador do tuto. Valeu, Marcos!

    Vou salvar a página para aplicar em outros blogs meus.

    Responder

  119. Estou retornando as origens(blogger) pois o todo poderoso google esta indexando melhor blogs que usam a plataforma blogspot.

    Assim sendo na preparação do template me deparei com um problema na hora de colocar os posts relacionados pois o mesmo não aparecia por mais que eu tentasse (tentei dicas de vários blogs do genero) então cheguei aqui e achei a solução do problema eu havia tirado os marcadores abaixo dos posts, então quando li no final deste post sua dica (Lembrando que só funcionará se você estiver usando Marcadores em seu blog.)

    recoloquei os marcadores e “voilà” deu certo, então meus sinceros agradecimentos.
    Obrigado.

    Responder

  120. É estranho. Na semana passada eu usei as dicas desta página em alguns blogs meus e deram certo. Hoje passei o dia tentando fazer a mesma coisa num outro blog (tambem do Blogger), mas NADA aparece onde deveriam estar os Artigos Relacionados — e eu estou usando marcadores nas postagens.

    Mudei até o modelo do blog pra ver se aceitava, mas também não.

    Alguém saberia me explicar o que pode estar acontecendo?

    Agradeço desde já uma possível ajuda.

    Responder

  121. Olá, eu tinha colocado o LinkWithin no meu blog, mas tenho problemas com ele, pois ele mostras todas as postagens que estão como rascunho. Com esse seu código, as postagens em rascunho também aparecerão?
    Obrigada pela dica!

    Responder

  122. Oi,
    eu fiz tudo do jeito que você indicou, mas nada aparece nas postagens, além do normal… será que tem a ver com o fato de o modelo que escolhi para o bogue foi aquele de visualização dinâmica?
    Aguardo retorno. (Se puder encaminhar para o e-mail, agradeceria. É importante.)

    Responder

  123. Fiz tudo como o comando e não apareceu nada. Já refiz e nada também. O LinkWithin chegava a aparecer as imagens e descrição dos posts mas quando clicava não redirecionava, falava que o post não existia. Será um problema com o meu tema?

    Responder

    • Rayanna,

      Precisa observar se está inserindo os códigos corretamente, sem alterar nada e nos lugares certos. Além disso seus artigos têm que estar classificados por Categorias. Outro ponto: os artigos relacionados só vão aparecer dentro da página do artigo. Não aparece na página principal do Blog.

      Responder

  124. Boa tarde Marcos,

    Antes de mais obrigado. Foi muito útil a tua postagem. Tenho uma pergunta se me permites. Como fazer com que o gadget de artigos relacionados apareça não só na página do artigo, mas também na própria home depois do hack “leia mais”?

    Responder

  125. Bom funciono perfeitamente no meu blog . só gostaria de saber se tem como remover as imagens nos post relacionados para que as postagens que não contem imagens não apareça aquela caixinha escrito “NO IMAGE”. tem como fazer isto alterando algo do codigo ?

    Responder

  126. chiiii, não saem os codigos!?!?!
    o meu tem os codigos repetidos 2 X tenta na 2ª acima de div class= “post-footer”

    Responder

  127. o detalhe é o seguinte. existem dois codigos como este :
    ao pesquisar por ele vc ira encontrar o primeiro ai vc da enter ele ira encontrar o segundo ai vc cola o script acima do seundo codigo encontrado: espero que tenham entendido.
    agora esta funcionando no meu blog .

    Responder

  128. Olá. Eu não consegui instalar isso, apesar de que o modelo de template seja um pouco modificado, segui todos os passos, uso Marcadores mas eu fui ver e não aparece os links relacionados. O que será que é?

    Ah, o site está me ajudando bastante – virei leitor 😀

    Responder

  129. Olá caro Marcus coloquei e fiz tudo como indicado no tutorial, mas não obtive nenhum resultado infelizmente. Não dá erro nenhum na edição HTML, mas não aparecem nenhuns artigos relacionados. Que se passa?

    Responder

      • Todas as minhas publicações têm marcadores caro Marcos se é isso que quer dizer. Estou a usar o nrelate, mas não tou minimamente satisfeito já que os posts recomendados são de categorias diferentes daqueles que o usuário poderá vir a ver… Gostaria imenso de colocar esse gadget, no entanto também não o consigo colocar. Não sei o que se passa…

        Responder

  130. Informação importante, que muita gente pode estar com problemas é que no blogger tem dois desses: , e o código deve ser colado após o segundo. Fica a dica ai

    Responder

  131. O código funcionou perfeitamente… o que poderá estar a acontecer a muita gente é que o código aparece por duas vezes no blogger, o que se pode fazer é, procura’se código e depois de aparecer dá’se novamente ENTER e é antes desse 2º código que se deve colocar o código descrito.

    Já agora, precisava de uma ajudinha:
    no meu blog, queria que aparece’se a caixa de comentar primeiro que os comentários, será possível, obrigado.

    Responder

  132. Olá! Eu estava pensando que não estava funcionando, mas realmente como vc falou, não aprece na página inicial…só clicando no artigo especifico ..Tem como mudar isso?
    Pois meu blog é por página e gostaria que aparecesse logo na primeira pagina como vejo em outros por aí.uso o blogger
    Grata desde já
    Camila

    Responder

  133. Olá,

    Uso faz tempo esse código e funciona perfeitamente no meu blog.
    Porém, notei um problema na busca personalizada do Google (também utilizada aqui no Ferramentas Blog):

    A busca está procurando resultados também ali no texto das miniaturas dos artigos relacionados, de maneira que (por ex.):

    Se eu tenho um artigo denominado “A volta dos que não foram” e ele aparecer como artigo relacionado a 100 outros artigos, o Google retornará mais 100 resultados.

    Faça uma busca aqui no blog usando o título deste artigo: “Gadget de Artigos Relacionados com imagens para Blogger”.

    Veja que apareceram outros artigos (20), mas não por terem exatamente correspondência com a busca e sim em razão do título deste artigo estar lá nos Artigos Relacionados.

    No teste o artigo fica no topo dos resultados por eu ter digitado o título entre aspas. Agora, se fosse uma palavra chave…

    Há artigos no meu blog que retornam 20~50 resultados, dependendo do Marcador. Assim, a busca acaba não sendo muito funcional pro visitante e prejudica a audiência do blog e também avaliação no Google Analytics (o visitante busca, mas desiste e não clica)

    Sei que não há como bloquear a indexação de parte da página (só arquivo/página inteira bloqueando uma URL). Também não achei como jogar um filtro na busca personalizada =/

    Se tiver alguma ideia, agradeço. Esse código foi o que melhor funcionou, mas estou cogitando removê-lo, até porque acontece a mesma coisa na busca do site do Google.

    Abraço.

    Responder

  134. Oi Marcos ou alguém, rsr podem me ajudar. Fiz tudo certinho coloquei o código no lugar certo ja tirei as linhas que começam com “<!" e mesmo assim nada de aparecer…tbm estou usando os marcadores e nada…por favor me ajudem quero muito esse código funcionando. Aqui esta o blog de teste que estou usando para testar o que aprendo de blogger.

    Responder

  135. Pingback: Como relacionar artigos ao Post? | Construo Seu Site

    • Acontece o mesmo comigo, está tudo os devidos lugares, estou usando categorias (marcadores) nas postagens e não está aparecendo os artigos relacionados…

      Responder

  136. Marcos eu qero saber se esse widget deixa os elementos um abaixo do outro quando nao cabe na horizonatl eles descem. qero dizer: meu espaço cabe apenas tres na horizontal, mas qero colocar seis postagens, qero saber se elas descem como nrelate ?

    Responder

  137. Ola tenho um blog de noticias e uso o LinkWithin, mas queria usar esse metodo que voce descreveu, mas não funcionou, mesmo criando os marcadores. Sera que é porque o template não e padrão do google?

    Responder

  138. Olá! Fiz tudo direitinho, porém não apareceu na página principal e quando clico em alguma postagem ele aparece somente duas imagens e em outros posts a quantidade certa. Poderia me orientar?
    Obrigada!

    Responder

  139. Olá Marcos!
    Eu já tentei o seu tutorial e outros, mas nenhum funcionou. segui todos os passos com cuidado e mesmo assim nada. No meu layout antigo não tive problemas com este widget, mas no novo não consegui colocar ainda. Pode ser algo do meu template? Eu uso o Mystery Blogger Template. Me ajude se puder, pois eu sei a diferença que as postagens relacionadas fazem no blog

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.