Postagens Relacionadas Usando Apenas HTML e CSS [001]

Bom dia bunnies, como estão? Aproveitando que acordei cedo já vim adiantar uma postagem, assim postando outra mais tarde se der tempo. Hoje vou falar sobre postagens relacionadas, como adicionar em seu blog. Existe várias madeiras de fazer isso, mas irei mostrar uma usando apenas CSS e HTML. Existe sites que oferece esses sistema em seu blog como o LinkWithin, que é super conhecido, e o 2leep, que te fornece ferramentas bem profissionais e visual mais colorido. 

Mas irei mostrar como fazer tudo isso com códigos mesmo sem ferramenta alguma, certo? Iremos adicionar alguns códigos ao template e pode ser totalmente personalizado. Esse código foi criado pelo Blogger Widget, achei no site Ferramentas Blog e encontrei mais personalizado no Reino Kawaii. Antes de começar deixarei uma observação que não funciona em blogs privados.

1. Acesse seu Modelo >> Editar HTML. E procure por </head>, assim que achar acima dele cole: 

Códigos

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

◤Entendendo o código◥

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

• float:center = posicionamento

• font-size: 1.6em = tamanho de fonte

• font-weight: bold = texto em negrito

• color: #fcc = cor do texto

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

• background-color:#fee = cor de fundo quando passa o mouse

Agora personalize como desejar, ficara muito fofo. Ah é se quiser que as postagens relacionadas apareçam apenas quando o leitor abrir a postagem e não na home do seu blog, cole o código anterior dentro desse código abaixo:

Códigos

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

2. Certo agora vamos fazer a ultima etapa, procure por <div class='post-footer'> e abaixo dele cole esse código ou procure por <div class='post-footer-line post-footer-line-1'> e acima dele cole:

Códigos

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

◤Entendendo o código◥

• O número 5 é a quantas miniaturas de postagens serão mostradas

• E o texto "Posts Relacionados:" é o título e pode ser alterado

• Sobre o código aqui.

• Sobre o código aqui.

• Sobre o código aqui.

Se quiser configurar novamente apenas para aparecer quando o leitor abrir a postagem, copie o código abaixo e cole o código anterior dentro:

Códigos

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

Bem fácil, não é? Como havia dito há muitas formas de fazer isso, outra forma é mostrando apenas links e textos sem imagem, que pode se conferir aqui: Posts Relacionados em texto. Agora vou encerrando a postagem por aqui, os créditos esta mais acima da postagem. Espero que tenham gostado, em breve trarei bem mais sobre Post relacionados. Beijinhos e ate a próxima postagem~