POSTAGENS RELACIONADAS EM MINIATURAS NO BLOG

POSTAGENS RELACIONADAS EM MINIATURAS

Pra quem não sabe, quarta-feira é dia de aula da nossa série layout dos sonhos, onde ensino a personalizar um layout base que disponibilizei, e através dele 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 aumentando o tráfego.  O estilo é aparecido com o da imagem abaixo:




POSTAGENS RELACIONADAS EM MINIATURAS


VAMOS AO TUTORIAL

1º)  No painel do blogger, procure por modelo > editar html e dentro da caixa de códigos aperte ctrl+f e pesquise por </head> e acima dele cole:

<!--Postagens relacionadas-começo-->
                <script src='http://static.tumblr.com/glpbb7a/odhnldmus/postagensrelacionadasparablog.js' type='text/javascript'></script>
                 <!--Postagens relacionadas-fim-->

2º) Agora procure pelo trecho 'post-footer-line post-footer-line-1' e cole abaixo dele o código a seguir. Lembrando que você irá encontrar dois trechos iguais, mas vamos usar o segundo, uma vez que o primeiro não funciona.
<!--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 

O trecho destacado de vermelho faz com que o hack não apareça na página inicial do blog, retire se quiser. O número na cor roxa representa a quantidade de miniatura que vai aparecer. O título do hack está destacado de rosa e você pode colocar a frase que quiser. 

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

#related-posts {float: left;width: 100%;display: block;margin-left: 10px;}#related-posts a {color: #666666; /*--cor da fonte--*/
margin: 0px 0px 4px 4px!important;
}#related-posts a:first-child {margin: 0px!important;}#related-posts a:hover {
color: #c0818f; /*--cor da fonte em estado hover--*/
}#related-posts h2 {height:20px;
font-size:16px; /* Tamanho do titulo */
background: ;
font: 00 normal 16px Oswald, sans-serif; /*--tamanho e tipo da fonte do título--*/
color: #000000; /*--cor da fonte do título--*/
text-align: center!important;}#related-posts #related-title {font: normal normal 11px Oswald, sans-serif; /*--tamanho e tipo da fonte do texto--*/
color: #666666; /*--cor da fonte do texto--*/
text-align: center;text-transform: uppercase;padding: 0 4px;
width: 170px; /*--tamanho da caixa do texto--*/
}#related-posts #related-title a {color: #474747; /*--cor da fonte do texto--*/
margin: 0 7px 10px;}#related-posts #related-title a:hover {color: #c0818f; /*--cor da fonte do texto em estado hover--*/
}#related-posts #related-title:hover {color: #c0818f; /*--cor da fonte hover--*/
transition: all 0.2s ease-out;-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}#related-posts .related_img {margin: 0;
padding: 0px;
width: 175px; /*--largura da miniatura--*/
height: 158px; /*--altura da miniatura--*/
transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}#related-posts .related_img:hover {opacity: .8;filter: alpha(opacity=80);-moz-opacity: .8;-khtml-opacity: .8;
}
Visualize e estiver tudo ok, salve. O que pode ser modificado está sinalizado no últomo código. Na próxima aula será sobre como personalizar o título dos gadgets que ficam na lateral do blog. 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. Confira o que já rolou na série:



E se você gostou já sabe o que deve fazer: Compartilhe com os amigos, curta nossa página no facebook e siga o manual em "faça parte" que fica na lateral do blog. Um enorme beijo a até a próxima!

Este post foi atualizado no dia 22 de Dezembro de 2016

COMENTÁRIOS FACEBOOK
24 COMENTÁRIOS BLOGGER

24 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
    Respostas
    1. Oi Laísla, o tutorial foi atualizado. O script estava dando bug nas imagens, mas agora está tudo ok. Agora vai dar certo. Bjs :*

      Excluir
  10. Puxa vida, no meu ficou muito bugado =\\
    Alguém pode me ajudar?
    www.oespaco.net

    ResponderExcluir
    Respostas
    1. Ficou muito espaçado entre um e outro e sem simetria nnehuma

      Excluir
    2. Oi Lucas, o tutorial foi atualizado. O script estava dando bug nas imagens, mas agora está tudo ok. Depois refaça e me conta se deu certo. Bjs :*

      Excluir
    3. Funcionou certinho =) obrigado!

      Excluir

 
COPYRIGHT © 2017 ● MANUAL DA BLOGUEIRA | WWW.MANUALDABLOGUEIRA.COM.BR ● TEMA POR LORY DESIGN