POSTAGENS RELACIONADAS EM MINIATURAS NO BLOG

04 maio 2016



Pra quem não sabe, quarta-feira é dia de aula da nossa série LAYOUT DOS SONHOS, onde eu ensino a personalizar um layout base que disponibilizei, e através dele, juntos vamos criar o layout perfeito para você. 

Esse hack serve para aumentar as visitas do seu blog, pois através dele seus leitores saberão quais os posts estão relacionados a ele, e continuarão a navegar no blog fazendo aumentar o tráfego. Quer conferir como colocar as postagens relacionadas em seu blog? Então vem comigo!




miniaturas das postagens relacionadas


1º) Dentro da caixa de códigos HTML do seu blog, procure por </head> e acima dele cole:
<script type='text/javascript'> $(document).ready(function() {$('.resizethumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});});</script><script src='http://static.tumblr.com/r0zjsuz/LGRnkytsj/post-relacionado-blogger.js' type='text/javascript'/>



2º) Agora procure por 'post-footer-line post-footer-line-1' você vai encontrar dois códigos iguais, mas vamos precisar do segundo. Abaixo dele, cole o seguinte código:

<!--Codigo Artigos Relacionados Inicio-->
<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;Você também pode gostar&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
<!--Codigo Artigos Relacionados Final-->
Entendendo o código...

Destacado de vermelho: Faz com quê o hack não apareça na página inicial do blog, retire se quiser.
Destacado de rosa: Quantidade de miniatura que vai aparecer.
Destacado de bege: Título do hack. Troque pelo que desejar.


3º) Vamos personalizar nossa postagem relacionada. Preparei dois modelos: redondo e quadrado. Para adiciona-los, procure por ]]></b:skin> e acima dele cole um dos códigos abaixo:



MODELO REDONDO

/*Posts relacionados CSS*/
#estiloimg{
  width:120px; /*Largura da imagem*/
  height:120px; /*Altura da imagem*/
  border-radius:50%; /*Imagem redonda*/
}
 .estilotexto{
  width:120px; /*Define a largura maxima da caixa do texto*/
  text-align:center; /*Alinha ao centro*/
  padding-left:3px; /*Define a distancia a esquerda*/
  height:65px; /*Define a altura*/
  margin: 3px 0pt 0pt; /*Margens*/
  padding: 0pt; /*Distancia em textos*/
  font-size: 12px; /*tamanho da fonte*/
  line-height: normal; /*Altura da linha*/
}
 #related-posts {
float:center; /*Alinhado ao centro*/
text-transform:none; /*Texto sem nenhuma transformação*/
height:100%; /*Altura total dos posts relacionados*/
min-height:100%; /*Altura minima*/
padding-top:5px; /*Distancia do topo*/
padding-left:5px; /*Distnacia da esquerda*/
}
 #related-posts h2{
font-size: 1.6em; /*Tamanho da fonte do titulo*/
font-weight: bold; /*Estilo em negrito*/
color: black; /*Cor do titulo*/
font-family: Georgia, “Times New Roman”, Times, serif; /*Fonte*/
margin-bottom: 0.75em; /*Margin de baixo*/
margin-top: 0em; /*Margem do topo*/
padding-top: 0em; /*Distancia do topo*/
}
 #related-posts a{
color:black; /*Cor dos links*/
}
 #related-posts a:hover{
color:black; /*Cor do link quando passa o mouse em cima*/
}
 #related-posts img{
margin: auto; /*Margin*/
}
 #related-posts img:hover{
opacity:0.7; /*Opacidade na imagem quando passa o mouse*/
-webkit-transition: background-color 2s linear; /*Efeito de transição na opacidade*/
-moz-transition: background-color 2s linear; /*Efeito de transição na opacidade*/
-o-transition: background-color 2s linear; /*Efeito de transição na opacidade*/
transition: background-color 2s linear; /*Efeito de transição na opacidade*/
}
 /*Final posts relacionados CSS*/


MODELO QUADRADO

/*Posts relacionados CSS*/
#estiloimg{
  width:120px; /*Largura da imagem*/
  height:120px; /*Altura da imagem*/
}
 .estilotexto{
  width:120px; /*Define a largura maxima da caixa do texto*/
  text-align:center; /*Alinha ao centro*/
  padding-left:3px; /*Define a distancia a esquerda*/
  height:65px; /*Define a altura*/
  margin: 3px 0pt 0pt; /*Margens*/
  padding: 0pt; /*Distancia em textos*/
  font-size: 12px; /*tamanho da fonte*/
  line-height: normal; /*Altura da linha*/
}
 #related-posts {
float:center; /*Alinhado ao centro*/
text-transform:none; /*Texto sem nenhuma transformação*/
height:100%; /*Altura total dos posts relacionados*/
min-height:100%; /*Altura minima*/
padding-top:5px; /*Distancia do topo*/
padding-left:5px; /*Distnacia da esquerda*/
}
 #related-posts h2{
font-size: 1.6em; /*Tamanho da fonte do titulo*/
font-weight: bold; /*Estilo em negrito*/
color: black; /*Cor do titulo*/
font-family: Georgia, “Times New Roman”, Times, serif; /*Fonte*/
margin-bottom: 0.75em; /*Margin de baixo*/
margin-top: 0em; /*Margem do topo*/
padding-top: 0em; /*Distancia do topo*/
}
 #related-posts a{
color:black; /*Cor dos links*/
}
 #related-posts a:hover{
color:black; /*Cor do link quando passa o mouse em cima*/
}
 #related-posts img{
margin: auto; /*Margin*/
}
 #related-posts img:hover{
opacity:0.7; /*Opacidade na imagem quando passa o mouse*/
-webkit-transition: background-color 2s linear; /*Efeito de transição na opacidade*/
-moz-transition: background-color 2s linear; /*Efeito de transição na opacidade*/
-o-transition: background-color 2s linear; /*Efeito de transição na opacidade*/
transition: background-color 2s linear; /*Efeito de transição na opacidade*/
}
 /*Final posts relacionados CSS*/

Caso queira aumentar o tamanho das miniaturas, terá
que aumentar também a caixa de texto, por exemplo:

Miniaturas em tamanho normal.

/*Posts relacionados CSS*/
#estiloimg{
  width:120px; /*Largura da imagem*/
  height:120px; /*Altura da imagem*/
}
 .estilotexto{
  width:120px; /*Define a largura maxima da caixa do texto*/
.......................................

Miniaturas com o tamanho modificado

/*Posts relacionados CSS*/
#estiloimg{
  width:180px; /*Largura da imagem*/
  height:180px; /*Altura da imagem*/
}
 .estilotexto{
  width:180px; /*Define a largura maxima da caixa do texto*/
................................................

Os números terão que ser iguais para que não haja erro. 

Na próxima aula vou ensinar a personalizar o título dos gadgets, que ficam na sidebar. No total serão 21 aulas, e já foram 5, mas ainda dá tempo de você baixar o layout base que disponibilizei para essa série, e começar a personaliza-lo com a gente. Confere abaixo a alista das últimas aulas:


Então é isso moçada, espero que estejam gostado da série  e se surgir alguma dúvida, é só perguntar. Não esqueça de me seguir nas redes sociais e ficar sempre por dentro das novidades do blog. Um super beijo e até o próximo post.

 FACE | TWITTER | INSTAGRAM | GOOGLE+


19 comentários:

  1. Ameei!! Seu blog éra tudo que eu mais queria!!! 💜 💜 💜 💜 💜

    Principiosdegarota.blogpot.com

    ResponderExcluir
  2. Tentei fazer só que na parte de salvar dá erro!
    Será que poderias me ajudar por email?
    Email: Rafaelleventtura@gmail.com
    Bjs♥

    ResponderExcluir
  3. Menina do céu, procurei tanto e por tanto tempo um código desses e nunca funcionava, fui testar o teu e funcionou! Tô super feliz, usava aquele do linkwithin, mas acho tão feinho, esse teu é lindo e super personalizavel, a única coisa é que a última parte eu não coloquei no HTML porque não permitia, então fui em MODELO > PERSONALIZAR > AVANÇADO > ADICIONAR CSS, coloquei lá e funcionou perfeitamente, obrigada por disponibilizar, já tô fuçando os outros posts ♥

    blogdaumzoom.com

    ResponderExcluir
    Respostas
    1. Hey Sophia <3

      Não imagina a minha alegria em saber que esse post te ajudou 8) É prazeroso demais ler um comentário como o seu, tão cheio de amor. Eu que agradeço a gentileza! Um super bjo minha linda :*

      Excluir
  4. Oi Lory! Eu de novo haha
    Tentei fazer, mas ficou quadrado no meu, mesmo com o código do redondo :( o que eu posso ter feito errado?
    Beijos

    ResponderExcluir
    Respostas
    1. Olá ALine!

      Que bom que você está novamente <3 Bom minha linda, talvez tenha algum script no seu layout que está causando o erro. Você já usou algum código de postagem relacionada? Se sim, procure pelo script relacionado a ele. Você vai encontrar acima de </head caso não encontre, recomendo que refaça o tutorial em layout limpo, sem nenhuma personalização. Espero que resolva =) Bjão :*

      Excluir
  5. Oláaa, estou amando suas dicas e o seu blog, só não estou achando o layout base :(
    Beijos
    www.nonnemelo.com.br

    ResponderExcluir
    Respostas
    1. O layout base está linkado no final desse post. Ao ser direcionada é só clicar em Download. Um super beijo linda :*

      Excluir
  6. Olá! Uma dúvida! Tem como retirar essa linha azul fininha? Muito obrigada pelo tutorial, tentei um monte mas só o seu funcionou!!!! Beijos!!!

    ResponderExcluir
    Respostas
    1. Oi Laura. Pra ser bem sincera contigo, eu já tentei de um tudo retirar essa linha azul na vertical, mas menina, eu não consegui. Assim que eu encontrar um forma de retira-la eu edito esse post e aviso no final dele. Bjs!

      Excluir
  7. Não consegui achar o SKIN, que por sinal são vários.. Pode ajudar?

    ResponderExcluir
    Respostas
    1. Oi Drika, agora eu coloque o skin correto, dê uma relida do post. Foi um erro meu não ter explicado mais claramente, me desculpa. Agora o tutorial foi atualizado e você vai conseguir 0/\0 Bjs linda :*

      Excluir
    2. O meu não ficou redondo e não modificou em nada.. O que faço?

      Excluir
    3. Uma série de fatores pode ter ocorrido. Se você está utilizando um layout que já modificado várias vezes, ele pode estar bugado e impedindo que o código funcione. Ou então você não seguiu o tutorial corretamente. Porque está tudo ok!

      Excluir
  8. Eu não estou conseguindo, eu to usando um layout seu (uns dos free) e eu tentei personalizar tanto isso quanto o estilo de nome do marcador e eu não consegui! O que faço?

    ResponderExcluir
    Respostas
    1. Leh, minha dica é: Refaça com cutela, sem medo, que tudo vai dar certo! O tutorial está ok! Caso você não tenha nenhum conhecimento em HTML vai ter dificuldades no começo, mas nada como treinar. Espero que consiga, Bjs :*

      Excluir
  9. Me tira uma duvida? colo quei no meu blog só que minhas imagens ficam embaçadas nas miniaturas... o que eu faço? aguardo resposta. bjs

    http://laisarabelo.blogspot.com.br/

    ResponderExcluir