teste

Depois de tentar diversas vezes, finalmente consegui inserir o "Artigos Relacionados" (ou Related Posts) no final dos posts =) e vim compartilhar com você!

Ultimamente ando modificando algumas coisas aqui no blog e compartilhando como fazer as mudanças. Minha saga começou quando quis colocar um domínio próprio no blog, e esse foi um super tutorial. Mas apesar de grande, foi fácil. 
Já consegui tirar as sombras desagradáveis das imagens que insiro no blog... Agora, encontrar o código certo para acrescentar os "artigos relacionados" deu trabalho!

Não vou mentir, por isso já admito que iremos sujar nossas mãos com um pouco de HTML. Mas vai ser fácil, pois não passa de Copiar + Colar.

Então venha comigo nesses passos:

1. Faça o Backup do seu blog

2. Vá para Modelo > Agora no blog > Editar HTML. Como mostra a imagem abaixo

3. Clique Control+F e procure por

 </head>

4. Copie o código abaixo e cole acima de </head>

<!--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: #666666;

font-family: arial, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:#666666;

}

#related-posts a:hover{

color:#666666;

}

#related-posts  a:hover {

background-color:#666666;

}

</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-->

5. Agora aperte Control+F, e procure:

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

Atenção, existem 2 <div class='post-footer-line post-footer-line-1'>, o primeiro que você encontrar ignore, estamos procurando o 2˚

6. Acima de  <div class='post-footer-line post-footer-line-1'> cole o código abaixo

<!--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-->

7. Salve as alterações

Pronto, terminamos!
Agora para verificar se deu certo, abra seu blog, e clique em algum post, veja se algo mudou antes dos comentários.

No próximo post, vou ensinar como personalizar os "Artigos Relacionados" com as cores do seu blog.