Postagens Relacionadas Candy Lland [002]

Yo minna-san!!!! Como vão? Ein? Ein? Bem dando uma olhada nos meus antigos layouts eu vi um modelinho muito fofo de postagens relacionadas que eu usava, bom então resolvi colocar aqui para vocês. Só que houve um pequeno problema o site não existe mais... D: agora é um site de venda de templates mas, de toda forma deixarei os créditos ao antigo e novo site bem aqui. Não sei se ela permitia reblogar seus códigos então já sabem, se ela pedir que remover terei que tirar, mas os créditos vão para Candy Lland || Candy Template || Zaa Design. Já tinha visto esse site de templates porém nem sabia que era o antigo CL, achei bem legal os modelinhos alguns são um tiquinho caro mas vale muito a pena. Agora vamos ao tutorial!

Resultado: Imagem de Candy Lland

Primeiramente faça um backup do seu modelo, assim poderá recolocar caso algo de errado. ok? Então vamos lá.

1. Entre no seu HTML e procure por  </head>, para facilitar busque só por /head assim que achar acima dele cole esse código:

Códigos

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://gizaa.googlecode.com/files/relacionados-candylland.js' type='text/javascript'/>
</b:if>

2. Agora procure por  <div class='post-footer-line post-footer-line-3'> dependendo de seu modelo pode ser um pouco diferente mas é só achar o post-footer do seu template e cole abaixo:

Códigos

<div id='related'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&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:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4; //numero de posts relacionados a mostrar
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div style='clear:both'/>

A parte que marquei em vermelho é a quantidade de postagem que vai aparecer, após colocar todos os códigos volte nessa parte para trocar ou deixe assim mesmo.

3. Procure por ]]></b:skin> e acima dele cole o código abaixo:

Códigos

/***********************************************************
          POSTS RELACIONADOS by CANDYLLAND.org
************************************************************/

#related{/* area geral do widget - diminua se necessário */
width:620px; /* largura total - altere */
height:160px;
margin-top:30px;
position:static;
margin-left:-30px /* margin da esquerda - altere se necessario */
}

#related a{/* area das imagens */
width:130px !important; /* largura total - altere se necessario */
height:120px !important; 
overflow:hidden;
border:1px #ddd dashed;
color:#fff;
margin-left:13px;  /* margin entre as imagens - altere se necessario */
border-radius:5px;
text-transform:lowercase;
text-shadow:0 0;
font:normal 17px tahoma  /* tamanho e tipo da fonte */
}

#related a:hover{background:#ff1490;border:1px #fff solid !important}

#related img{
border-radius:5px;
background:#fff;
width:130px !important; /* largura total - altere se necessario - mesma largura de #related a */
height:120px !important;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition: all 1s;
transition: all 1s
}

#related .thumbImg{
float:left;
width:130px !important; /* largura total - altere se necessario - mesma largura de #related a */
height:120px !important;
overflow:hidden
}

#related .texto {
width:130px !important; /* largura total - altere se necessario - mesma largura de #related a */
height:120px !important;
padding:10px
}

#related .thumbImg:hover{
opacity:0;
margin-bottom:-210px
}

#related .texto:hover{
float:left;
width:130px !important; /* largura total - altere se necessario - mesma largura de #related a */
height:120px !important;
display:block;
color:#000;
margin-top:-120px
}

/***********************************************************
        POSTS RELACIONADOS by CANDYLLAND.org FIM
************************************************************/

Nessa parte é a onde você personaliza as cores tamanho etc... Altere só as partes que estão com instruções As partes que não contem instruções não devem ser mexidas, isso é muito importante para que ele fique alinhado e o efeito em hover também.