13/05/2014

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~

2 comentários:

  1. Eu uso aquele linkwithin, ta personalizado e só aparece nas postagens. Nunca usei esse, mas talvez seja legal também vou testar *-*

    ResponderExcluir
  2. Aah que demais achei interessante e diferente... vc falou de família grande...a minha é enorme tem gente q é meu parente e eu nem sabia... mas a vdd é q nunca tenho festa e casamentos p/ ir... pq ninguém presta p/ ter relacionamento felizes... e minha vida é ficar estudando e lendo livros :/ mas deixando minha vida tediosa de lado amei o tuto... qnd eu fizer um novo lay vou tentar aplicar... ♥

    http://animesjaychan.blogspot.com.br/

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345