Reino Kawaii

<!--Related Posts Start -->
<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: #fcc;
font-family:  "Verdana";
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#fcc;
}
#related-posts a:hover{
color:#fcc;
}
#related-posts  a:hover {
background-color:#fee;
}
</style>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!--Related Posts--> 

Vamos entender:

• #related-posts = personalização do título;

• float:center = posicionamento;

• font-size: 1.6em = tamanho da fonte;

• font-weight: bold = texto negrito;

• color: #fcc = cor do texto; - consulte a tabela de cores.

• font-family:  "Verdana" = tipo da fonte;

• background-color:#fee = cor de fundo quando passa o mouse; pode trocar por imagem deixando assim: background:#fee url(URL DA IMAGEM) repeat;- aqui no Reino Kawaii tem muitos backgrounds fofos para vocês!!

Aplique os estilos da forma que quiser. Se quiser que as postagens relacionadas apareçam quando o leitor abrir a postagem e não na home do seu blog, acrescente o código anterior neste aqui:

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
CODIGO ANTERIOR AQUI
</b:if> 

3. Procure por <div class='post-footer'> e cole ABAIXO dele ou <div class='post-footer-line post-footer-line-1'> e cole ACIMA dele:

<!--Related Posts Start-->
<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=&quot;Posts Relacionados:&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div style='clear:both'/>
<!--Related Posts--> 

Em que:

• O número 5 se refere a quantas miniaturas de postagens serão mostradas;

• E o texto "Posts Relacionados:" vai aparecer como título e pode ser alterado. 

Novamente, se você configurar para aparecer apenas quando o leitor clicar na postagem, não se esqueça de deixá-lo assim:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
CODIGO ANTERIOR  QUE VAI NO POST-FOOTER AQUI
</b:if> 

O resultado será algo semelhante ao meu:

Simples não é? Há outra forma disso ser feito, mostrando apenas links e textos sem imagens, que você pode conferir aqui: Posts Relacionados sem imagens.
E no Candylland existem 2 modelos prontos também: Modelo 1:::::: Modelo2.
Pronto! Agora vocês têm muitas opções para mostrar aos seus leitores todos os seus posts.
Beijinhus...