![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
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.
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.
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.
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 == "item"'>
<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://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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' 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="<data:post.url/>";
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 Widgets (inglês) e Gem@Blog (espanhol).
Não existe float:center.
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…
@Arrumablog, realmente é preciso mudar as linhas de comentários porque elas estão em HTML e a língua do template do Blogger é XML.
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.
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
@Herzl,
Basta retirar as linhas que descrevem o código e tudo funcionará bem.
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!!!
Funcionou muito bem!!
Obrigado pela dica Marcos… és um espectáculo!!
Um abraço.
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.
@AnneKira,
Basta vc certificar-se de que está colocando os códigos no lugar exato indicado pelos tutoriais.
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
É 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
@Alexander,
Não. Esse código funciona apenas no Blogger.
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?
@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.
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!!!
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
Olá Marcos!
Ficou perfeito!
Estava com problemas com o LinkWithin.
Esta solução resolveu o meu problema.
Abs:)
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.
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.
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
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.
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″ /)
@inaciorolim,
Infelizmente não sei como ter ajudar nessas duas questões. Mas vou tentar aprender e se descobrir te falo aqui mesmo.
Nossa amigo vlw msmo, já havia tentado diversos jeitos de colocar artigos relacionados e nenhum funiconava no meu template… .
Brigdão.
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 ?
@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.
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!
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/)
@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.
Meu caro Marcos, valeuw mesmo pela atenção, mas meu template é uma mer….
Não acho em isso!
Obrigado!
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.
Ficou ótimo, já tinha tentado um código de outra fonte e não tinha funcionado. Esse ficou bom. Obrigada, Carol May.
Funciona na pagina incial ou apenas nas páginas de posts?
@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.
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.
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?
@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".
As vezes pode acontecer de não aparacer as postagens relacionadas, isso acontece quando não tem nenhuma postagem relacionada.
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.
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!!!
Valeu, Marcos,
Agora funfou direitinho. Obrigado pela dica!
@profmichel
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?
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!
Gostei da forma como vc explica não tem erro, foi muito fácil. 🙂
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!
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.
►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.
Ó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
Até que enfim consegui colocar essa gadget no meu blog , tentei várias vezes e nada, mas seu tutorial deu certo.
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.
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!
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.
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á.
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.
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.
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!
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
@Natanael,
É possível minimizar os problemas na migração. Já tenho um artigo tratando sobre isso. Procurar aqui que você acha.
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.
Amigo,
Certifique-se de que seus artigos publicado têm marcadores de postagem. Só assim os artigos podem ser relacionados e aparecerem no gadget.
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
@Regis,
Infelizmente não tem como mudar o número de caracteres a serem exibidos.
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.
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í
@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.
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.
Oi Marcos, obrigada por esta dica! Pois não é que consegui implementá-la nomeu blog Pedaços. Tou feliz!!!! Lais.
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
@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.
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!
Deu muito certo… e não tinha tutorial disso em site nenhum!
Obrigada!
Olá Marcos,
Seu blog é maravilhoso, consegui colocar "artigos relacionados" sem grandes dificuldades
Obrigada por dividir…
abraço!
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
muito bom ! naum estava achando as linhas..foi quando vi que tinha esquecido de marcar o "expandir modelos de widgets" lol
Pingback: 5 dicas para reavaliar e melhorar o layout do Blog | [ Ferramentas Blog ]
Pingback: Customizar, modificar e criar Templates para Blogger | [ Ferramentas Blog ]
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!
Ficou ótimo gostei muito. Obrigado!!!
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ã
Como mudar tamanho da fonte “Artigos Relacionados” meu ficou muito grande.
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
@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.
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.
Isso só mudando no código CSS mesmo do Gadget, mas não sei dar detalhes.
Desculpa!
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…
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!
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.
As vezes levam alguns dias para que a base de dados seja reatualizada. Por isso basta ter paciência que os posts deletados sumirão tb da relaçào.
Ok, vou esperar. Obrigada.
Estou com esse mesmo problema, posts que eu excluí a meses ainda aparecem. Queria saber o que eu poderia fazer. Agradeço.
Nào há o que fazer. Só esperar.
Ola Marcos
fiz tudo corretamente ja chequei, ta funcionando mas da conflito com meus comentarios
Abraço
Valeu! Dica super útil pra dar aquele upgrade no blog.
Eu fiz tudo direitinho, mas mesmo assim ñ apareceu nada, meu blog é nomo e tem poucas postagem, eu gostaria de saber se tem algo a ver com isso
Isso influencia também.
É bom lembrar que a relação é feita via marcadores de páginas.
Eu fico na duvida entre esse script e o linkwhitin.
Funcionou perfeitamente! Grato! Tem mais um pra te aporrinhar agora! 😉
Muito bom 😀
apens coloquei centralizado, assim podemos usar menos artigos e pesar menos a pag /
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…
Muito boa dica. Funcionou com perfeição. Parabéns Marcos!
Obrigada!
Ficou perfeito no meu Blog.
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.
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.
poxa! professor vc quebro um galão! vc é fera vlw!
Nossa Parei de pesquisar tutoriais no google agora venho direto no seu site, aqui tem tudo e é muito bem explicado
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!
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!
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.
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?
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 🙂
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!!!!
ok Marcos, seguí a dica do Regis Mesquita e deu certo!!!
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.
Excelente este gadget! Coloquei ele em meu site e funcionou perfeitamente. Muito obrigado
Deu certo,
obrigado!
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.
Não rolou no meu… nao sei pq… fiz o procedimento exatamente como esta aqui… deve ser por causa da minha templaste
Bem bacana este gadget. Funciona bem.
Abs^^
É incrível e funcionou! Obrigada!
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
Otimo post, tava procurando a tempos e os que eu havia tentando não tinha dado certo. Vlw ae galera
Coloquei 7 e só apareceu 5
Me parece que não funciona no template mínima…
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?
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 ?
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.
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.
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
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.
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.
E o mesmo que acontece comigo, ainda não descobri que parte configura isso, alguem tem alguma ideia?
A cor muda aqui nessa parte do primeiro código colado:
background-color:#d4eaf2;
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;
}
q começa por “”
Artigos Relacionados Estilo e Script Inicio
Não adianta procuro em vários sites/blogs tutoriais e o melhor é sempre o ferramentas blog. parabéns.
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
Valew ai Tolstoy Cardoso, eu coloquei na “line 3” e funcionou comigo, e vlw Marcos Lemos
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!
vc é de mais Marcos Muito bom Seus conteudos continue assim ajudando os blogueiros que Deus te abençoe
Blz deu certo aqui
valeu pela maneira prática
e clara de compartilhar essas dicas
Opa, demorei mas encontrei!!!
Do jeito que eu queria, simples e funcional!!!
Parabéns cara!!!
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 🙁
Pingback: Posts relacionados com o plugin Similar Posts | Criar Sites
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
Em alguns cabe tudo mais posts com titulos maiores nao,,,
O que usamos aqui no Blog é um Plugin para WordPress, já que nosso blog é montado nessa plataforma.
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!
Ficou show de bola mais nw consegui colocar mais do q 5 post mesmo mudando o numero
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.
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?
Bruno,
Não vi reclamações sobre isso.
Mas seria interessante, então, refazer a instalação dos códigos para ter certeza de que é esse mesmo o problema.
Parece que procede a informação do Bruno, caro Marcos.
Depois da inclusão do “br”, pelo menos no meu blog sumiu os artigos relacionados.
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?
Thelma,
Tente reinstalar os códigos e verificar se todos estão no devido lugar.
Ai Marcos, ainda não deu certo.
Reinstalei novamente, só que desta vez não funcionou.
O que será q pode ter acontecido quando um comando funciona e depois do nada passa a não funcionar mais?
O blog ficava tão bonito com as imagens dos outros artigos.
Muito obrigada,
abs
Thelma
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?
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.
Obrigado pela sua dedicação Marcos! Abraços.
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!
Jo,
reveja o código em seu blog para ter certeza de que, após todas as mudanças feitas, se tudo está no devido lugar.
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!
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
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.
Marcos, infelizmente meu blog tb foi afetado, e não aparece mais os posts relacionados. Uma pena!! Aguardo suas dicas, caso consiga uma solução.
Abração!
@tolstoy
Meu Blog também foi afetado… Estou aguardando alguma ajuda sua também Marcos!
Obrigado!
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.
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
Infelismentte eu não consegui. Eu quero muito colocar essa ferramenta em meu blog. Me ajuda por favor?!
Desde já agradeço.
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.
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?
Marlon,
Coo está descrito no tutorial acima, basta trocar o número “5” em vermelho no código para a quantidade desejada.
Marcos,
problema resolvido.
Apesar de nao aparecer na hora, contudo, eu substitui o numero e no outro dia apareceram as 5 colunas. Talvez seja tipo o google que leva algum tempo pra indexar (sei la).
Abraco.
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
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
O meu blog foi afetado também. Que pena! vamos esperar.
Pingback: Como voltar a URL do Blogger para o padrão “blogspot.com” sem o país | [ Ferramentas Blog ]
Estou acompanhando seu site ,torcendo para que apareça alguma solução.
Já temos uma solução. Veja logo no início do artigo o “ATENÇÃO” em vermelho.
Marcos, vi que você escreveu em seu comentário sobre a solução para os artigos relacionados. Mas não consegui localizar o “ATENÇÃO” em vermelho que você menciona estar no início do artigo.
Poderia de alguma maneira me passar esta solução.
Obrigado.
@tolstoy
Finalmente consegui, conforme comentários posteriores do português Victor Souza!
Veja a solução.
Obrigado ao Marcos e ao Victor!!
@tolstoy
-0-
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.
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?
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.
Obrigado Marcos, aguardo a solução do problema.
Além dessa caixa de artigos relacionados, e aquela do linkwithin, existe outra?
Obrigado
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.
Victor,
O resultado é imediato, ou demora um pouco para aparecer?
Será que estou certo? é só trocar um link pelo outro?
Obrigado
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.
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 !
Caraca vei! Corrigido o problema! Vlw Victor!
Olá Ericson! Olá Nataniel! Fico feliz por ter podido ser útil.
Tudo de bom!
Graças a vocês consegui retornar o numero de leitores .
Obrigado a todos
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?
ain!! Obrigada!! Tentei trocentos hacks e esse foi o único que funcionou!! *-* Obrigada!!!
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
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.
Bom, em meu novo template que irei estrear do meu Blog, eu necessito disto… Mais como eu vou ter certeza de que vai aparecer realmente notícias relacionadas?
Eu coloquei e aceitou, mais, não aparece na notícia o que eu faço?
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.
Funcionou perfeitamente, muito grata pelo tuto.
Nossa, me ajudou muito, os Linkwithin e o Outbrain não estavam dando certo, valeu! Um abraço!
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!
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
Claro que não.
O código é livre e se você consegue modificá-lo e melhorar para usar em seu blog, faça isso sempre.
Obrigado Marcos
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)
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
Grato, vou tentar então, e aviso se deu certo!
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.
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
Coloquei no meu e funcionou parcialmente… mesmo eu colocando pra aparecer 5 artigos relacionados ou mais, só aparece 1… alguem ai poderia me ajudar… grato desde ja…
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!
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.
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á!
Basta retirar as linhas condicionais que vc mesma identificou.
Fiquei com dúvidas. Qual linhas devo apagar especificamente para aparecer na página inicial do blog?
A primeira e a última onde tem “b:if”.
Mas não é muito recomendável, uma vez que vai encher a sua página principal de informação que pode acabar atrapalhando a leitura do conteúdo.
Valeu Marcos, procurei bastante mas gostei do código disponibilizado aqui.
Oi, não consigo achar
E nem a outra linha, não sei se posso adiciona-la, o que eu faço ?
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.
Olá Marcos Lemos.
Excelente Código. Está implementado e a funcionar.
Vou seguir o seu blog a partir de hoje.
Muito Obrigado.
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
Karen,
Entrei em seu Blog e os artigos relacionados estão aparecendo normalmente no rodapé dos artigos. Está funcionando perfeitamente.
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!
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
Isso é configuração do CSS do seu Layout.
Será preciso vc identificar isso no seu código.
coloca: text-transform: none; no seucodigo que resolve
Oi, estou modificando o css dele, mas não consigo achar a parte das imagens, queria adicionar uma borda a ela, como faço?
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.
Deu certinho ^o^
Muito obrigado !!
Aleluias!!! finalmente consegui… Como tenho a assinatura do autor.. o local correto é acima do código () somente…
O código demora algum tempo para entrar em funcionamento?
Sim.. começa a funcionar imediatamente se configurou certo.
Super obrigada, finalmente um tutorial claro e, importante, que funciona perfeitamente.
Muito boa a dica marcos!
Obrigada!!!
Acabei de fazer no meu blog e deu certo!
Tinha tentado pelo LinkWithin e não estava adicionando :/ rs
Valeu pela dica!!!
Ka Wozniak
Cinco das Artes
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.
Marcos, já consegui resolver. Obrigada!
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…
para funcionar tem que ter quantas postagens? o meu blog ainda está em construção. fiz o procedimento e até agora não apareceu, oq eu faço ?
Precisa ter ao menos duas postagens que estejam na mesma Categoria. Também precisa criar categorias para as postagens.
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.
Ótima dica, os posts relacionado prendem os visitantes no site e faz com que gere mais tráfego. Obrigado!
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.
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.
É 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.
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!
Camila,
Não. Esse segue um padrão de códigos do Blogger e só mostrará o que estiver realmente publicado e for de acesso público.
Marcos, fiz exatamente igual vc sugeriu (tentei 2 vezes) e não funcionou… tem mais alguma dica do que pode estar dando errado?
Ah ta, só agora percebi que não aparece embaixo de cada postagem na página principal e sim quando vc entra no post. Deu certo sim! Valeu!
Marcos, desculpe o incômodo novamente, mas eu gostaria de saber o que devo modificar no código para ter os posts relacionados abaixo de cada postagem na página principal do blog.
Obrigada!!
O meu erro persiste.
O engraçado é que acabei de fazer a mesmíssima edição em outro blog e deu certo, mas neste aqui ( http://oreinodeatena.blogspot.com.br/ ), não estou conseguindo de jeito nenhum…
Marcos ou alguém mais poderia me dar uma luz?
Agradeço a atenção.
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.)
Rebeca,
Exato. Esse recurso não funciona nas visualizações dinâmicas. Infelizmente não há como fazer.
Prezado Marcos,
No meu blog, não funciona de jeito nenhum… já refiz várias vezes… estou usando marcadores, tem três mensagens dentro da mesma categoria… mas nada….
Help me please….
Obrigado Fera…
Pablo,
Verifique se você seguiu todos os passos, sem alterar NADA nos códigos, além de colocar tudo no lugar indicado.
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?
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.
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”?
Pedro,
basta tirar os linhas condicionais do “b:if”, mas não recomendamos. Isso vai encher a tela do seu blog, deixar ele mais pesado e difícil de navegar.
Obrigado Marcos!
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 ?
Jefferson,
Existem outras opções de “Artigos Relacionados” que só fazem lista de links. É uma solução para o que você quer.
Parece não funcionar mais com o novo modelo de edição HTML.
Sim, continua funcionando. Só ficou um pouco mais difícil achar as linhas.
Eu achei as linhas Porem quando salva não da certo, não acontece nada tenta aí pra vc ver, se conseguir diga-me Como… Por favor, Valeu, ótimo post…
ô Ipslukper eu descobri que tem 2
junto e funcionou no 2º não no 1º
Veja se no seu tem e coloca antes do
o blog que estou usando é esse mesmo do meu nome
chiiii, não saem os codigos!?!?!
o meu tem os codigos repetidos 2 X tenta na 2ª acima de div class= “post-footer”
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 .
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 😀
Ahhh, funcionou!!!
Há tempos que procuro um código que funcione… valeu!!!!
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?
Paulo,
Precisa ver se você está relacionando os blogs dentro de Categorias, pois só assim o recurso funcionará.
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…
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
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.
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
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.
Perfeito.
Deu certinho aqui.
Poxa, como que vc fez?
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.
Pingback: Como relacionar artigos ao Post? | Construo Seu Site
Não funcionou. Coloquei os códigos nos devidos lugares, salvei e não apareceu os Artigos Relacionados 🙁
Acontece o mesmo comigo, está tudo os devidos lugares, estou usando categorias (marcadores) nas postagens e não está aparecendo os artigos relacionados…
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 ?
Deu certo aqui =)
Muito obrigada!!
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?
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!
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
Olá Marcos, tudo bem?
Eu tentei no meu blog inserir esses códigos mas não deu certo.
Será que é por causa do meu tema do blogger?
Parabéns pelo post.
Abraço!
Andre,
Alguns modelos de template não aceitam esse formato. Por isso é bom verificar se já tem essa opção em seu template.
Bom dia, uso o tema empório e não tem post footer line 1,2,3 só vou conseguir colocar as postagens se for nos layouts que tenham as footer line 1,2,3 ou tem como adaptar em outro techo do código, da pra inserir um footer line em um modelo já existente?