Então vamos lá!
Primeiramente marque a caixinha “Expandir modelos de widgets” e procure(Ctrl+F) por:
<div class='post-footer-line post-footer-line-1'>
Ou:
<div class='post-footer-line post-footer-line-2'>
Se não achar nenhum dos dois acima procure por:
<p class='post-footer-line post-footer-line-1'>
Agora, depois de um dos códigos citado logo acima, adicione o código abaixo:
<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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>
Agora adicione o código abaixo depois da tag <head>.
<script type='text/javascript'>
var defaultnoimage="http://img52.imageshack.us/img52/5091/17170957.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artigos Relacionados: ";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
var maxresults=5; define quantos artigos vai ser exibido, você pode modificá-lo, colocando um numero menor ou maior, por exemplo:
var maxresults=6;
Agora adicione antes de ]]></b:skin> o CSS abaixo;
#related-posts {
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
width:590px;
}
#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;
background-color:#FFF;
border:solid 1px #333;
padding:0 8px;
width:100px;
}
#related-posts a:hover{
color:#fff;
}
#related-posts a:hover {
background-color:#333;
border:solid 1px #FFF;
}
Em “background-color:#FFF;” define a cor de fundo do thumbnail, onde será exibido o post relacionado.
Você pode modificá-lo , trocando “#FFF” pelo o nome de uma cor ou um código HTML correspondente a cor.
Exemplo:
background-color:Black;
background-color:#CCCCCC;
Em “border:solid 1px #333;” define a cor da borda, basta você trocar a cor “#333” por outra de sua preferência.
Bom pessoal, é isso ai...Espero que tenha gostado.Qualquer duvida deixe um comentário.
Código: www.bloggerplugins.org
12 comentários:
Ola
Parabens pela dica apresentada
Gostaria de de saber, se tem como modificar este código, para que ele exiba todos os artigos do blog e não apenas os relacionados.
Aguardo uma luz
Um forte abraço
Mad
@Mad Resgate, pesso descupas pela demora em te responder, não tive tempo de acessar o blog esses utimos dia.
Enquanto a sua pergunta, esse código não exibe apenas os posts relacionados, quando não à posts relacionados, ele exibe outros que não são. Se você definir para exibir 10 artigos, ele vai exibir os 10 artigos, mesmo que não haja nenhum relacionado.
Valew, abraço.
boas gostei do codigo..
mas como faço para alterar o tamanho da imagem?
abraço
Super útil a dica!
Já estou usando.
Muito obg.
Abraços
Kara fiz todos os passos certos e deu certo até certo ponto. só que não aparece nada... e olha q já tentei vários posts em outros blogs. achei o seu mais interessante pela formatação personalizada... o q devo fazer?
Cara! Esse seu código aí foi o único que funcionou no meu novo Blog, parabéns! Comecei a usar o LinkWithin mas fiz a cagada de instalá-lo ainda na fase de testes do blog. Resultado: Todas as publicações de testes foram indexadas e mesmo depois de apagadas continuavam a aparecer como posts relacionados. Esse seu código é melhor que o LinkWithin porque mesmo se o post não tiver imagem, mas tiver vídeo ele mostra também. Isso não acontece com o LinkWithin. Parabéns mais uma vez e obrigado por compartilhar a informação.
Colega muito obrigado ja fiz de tudo com os outros, e o seu foi o unico que funcionou de verdade muito obrigado veja como ficou o meu
http://wwwtudoproseucelular.blogspot.com/
vlwww..mt bommmm
uma pergunta....eu quero esses posts relacionados apareçam na pagina inicial e nao só dentro das postagens...oq eu faço? ;/
Parabens o seu site esta muito bom. tem otimos conteudos de noticias
desejo muito sucesso pra vc...
Download Pacotão com Wallpaper 240x400 Para Celular
Game Para Celular Shrek Party 240X320 Nokia
Papeis de Parede Para Celular The Magic Number 240x320
Baixar Temas para Celular Nokia C3 Windows xp
Jogos Para Celular
Excelente!! Obrigada por compartilhar!!
http://www.organizando.org
muito legal adorei
Postar um comentário
Sua opinião é muito importante,deixe-aqui...