13/05/2014

Posts Relacionados Usando Apenas HTML e CSS

||

Bom dia bunnies, como estão? Aproveitando que acordei cedo já vim adiantar uma postagem, assim postando outra mais tarde se der tempo. Ultimamente meus dias estão bem corridos...amanhã é o casamento de uma de minha tia e já tenho que passar na costureira para verificar meu vestido, qual eu não quero nem um pouco usar. Já estou farta de casamentos...toda semana tem festa de aniversario ou casamento para ir, os bolos ate já perderam graça o lado ruim de possuir uma família grande é isso.  Mesmo sendo quieta na minha e a mais distante sempre tenho que ir... Mas mudando de assunto 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: 
<!--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-->  
  • #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:
<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:
 <!--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-->
  • O número 5 é a quantas miniaturas de postagens serão mostradas;
  • E o texto "Posts Relacionados:" é o título e pode ser alterado. 
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:
<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