Tutorial: Postagens Relacionadas

  • 12:47
  • 22 agosto 2016


Olá meu povo! Antes de mais nada quero deixar os créditos para o blog da Karoline de "Follow your Dreams", esse código é do blog dela, e eu apenas fiz algumas alterações no script e no css, apenas isso. como vocês podem ver o resultado final clicando aqui. Essa postagem é a continuação de como criar um layout do zero, mas agora estaremos personalizando ele. Acredito que vocês gostam desse tipo de efeito, "yo tambien...!" :D Vamos para o tutorial.

Vocês tem 3 locais onde pode aplicar o script, escolhi o primeiro, fica no critério de vocês.. Blz ;)

Linha 1: <div class='post-footer-line post-footer-line-1'>
Linha 2: <div class='post-footer-line post-footer-line-2'>
Linha 3: <div class='post-footer-line post-footer-line-3'>

1. Procure por <div class='post-footer-line post-footer-line-1'> clique dentro da caixa de código e dê ctrl + f e depois enter, após achar cole o código abaixo  de <div class='post-footer-line post-footer-line-1'>.

<!-- POSTS RELACIONADOS -->
<script type='text/javascript'>
$(document).ready(function() {$(&#39;.resizethumbnail&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s420-p&#39; );});});
</script>
<script src='http://static.tumblr.com/pfobaef/Tp7oc9v3v/posts-relacionados-blogblackrose.js' type='text/javascript'/>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<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; /** AQUI... SE QUER MAIS DE 4 IMAGENS ALTERE O NUMERO **/
var relatedpoststitle=&quot;Veja também:&quot;; /** TÍTULO VEJA TAMBÉM **/
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<!-- FIM POSTS RELACIONADOS -->

2. Agora procure por ]]></b:skin> e acima dele cole o código à seguir.

/* Posts Relacionados
----------------------------------------------- */
#related-posts {
width: 100%;
margin-top: 10px; /* margim p/ cima */
margin-left: 4px; /* margim esquerda */
padding: 0 0 180px; /* espaço abaixo */
}
/*** Titulo VEJA TAMBÉM ***/
#related-posts h2 {
color: #000; /* cor da fonte */
font-size: 15px; /* tamanho da fonte */
font-family: sans-serif; /* fonte */
text-align: center; /* fonte centralizada */
text-transform: uppercase; /* fonte em letra maiuscula */
letter-spacing: 1px; /* espaço entre as letras */
}
#related-posts img{
margin: auto;
}
#imagem {
width: 153px; /* largura das imagens */
height: 153px; /* autura das imagens */
border-radius: 50%; /*Retire essa linha se quiser as imagens quadradas*/
}
#texto {
position: absolute;
background: rgba(0, 0, 0, 0.8); /* cor do fundo "background": efeito hover */
border-radius: 50%; /*Retire essa linha se quiser as imagens quadradas*/
width: 113px; /* largura do background */
text-align: center; /* fonte centralizada */
height: 73px; /* autura do background */
margin: -157px 0px; /* margim p/ cima */
padding: 40px 20px; /* espaço */
font-size: 18px; /* tamanho da fonte */
color: #ffffff; /* cor da fonte */
opacity: 0; /* opcacidade 0 */
}
#texto:hover {
opacity: 1;
}

3. Agora só salvar!

Deixei detalhado as principais funções que podem ser alteradas. dentro de:
 /** aspas **/ 

Qualquer dúvida deixa nos comentários.. Beijinhos

Compartilhe

Veja Também:

Comentário(s)
2 Comentário(s)

  1. Nossa Káh!
    Tava todo mundo tipo precisando muito desse tuto!
    Porque nenhum código de posts relacionados funciona mais, ai veio você e mudou essa situação pra melhor. Porque você é a MELHORZONA Káh <3
    Você é o máximo! Amei tudo, bessos, fique com deus ♥
    Mari!

    ResponderExcluir
    Respostas
    1. Own... Que bom! Fico muito feliz :D
      Eu tento fazer o meu melhor, embora já existem pessoas assim como a Karoline pra compartilhar esses conhecimentos.

      Fique com Deus também..Beijos florsinha ♥

      Excluir