11 outubro 2017

Tutorial: Como colocar postagens relacionadas no blog (Leia também)

como colocar postagem relacionadas no blog



Olááá! tudo bem com vocês? espero que sim. Hoje eu trouxe mais um tutorial de HTML para ajudar o blog de vocês a ficar mais bonito e completo. São postagens relacionadas no rodapé da postagem. É um tutorial muito procurado, e também é fácil de colocar no blog, só precisa de atenção e cuidado. 


Esse modelo eu usei o código da Elaine Gaspareto como base, então consegui fazer esse modelo da imagem que você pode alterar as cores,tamanho, quantidade, vou explicar como funciona cada parte editável do código.

Resultado: 

Como colocar postagens relacionadas no blog
É o modelo que usei no layout do blog Polaroids And Lipsticks



A primeira coisa que você tem que fazer é um backup do seu layout atual, caso algo dê errado você não perde seu blog. Se não souber fazer aprenda aqui

 Como Instalar as postagens relacionadas no blog? 


1- Vá em modelo >> editar HTML >> clique em alguma parte dentro do código >> tecle ctrl + f. Irá aparecer uma caixinha de pesquisa. Nela cole </head>, tecle enter para localizar. Localizou? ABAIXO dessa tag você coloca o seguinte código. 


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


Salve.



2 -  Novamente na caixinha procure por ]]></b:skin> ou dependendo do seu layout </stlyle> e ACIMA dessa linha você cola o seguinte código.


#related-posts{float: left;
text-align:center;
width: 786px;
display: block;}
#related-posts a{ }
#related-posts a:hover{}
#related-posts h2{background: none;}
#related-posts .related_img {
margin: 0;
padding: 5px;
width: 170px;
height: 170px;
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;
margin-left: 4px;
}
#related-posts h2 {
    margin: 6px 30px 10px;
    padding: 5px 25px 5px 0px;
    width: 700px;
    font: 10 12px/12px 'Karla', sans-serif; /*Fonte*\
    letter-spacing: 4px;
    color: #000; /*Cor da fonte*\
    text-align: center!important;}
#related-title {
        color: #000;
    text-align: center;
    text-transform: uppercase;
    padding: 67px 10px;
    font-size: 12px;
    width: 152px;
    height: 38px;
    position: absolute;
    font-family: 'lato', sans-serif;
    margin-left: 7px;
    background-color: #efd4d4; /*Cor do fundo quando passar o mouse*\
    margin-top: -180px;
    transition-duration: .4s;
    opacity: 0;
}
#related-title:hover {opacity: 1}
#related-posts .related_img:hover{opacity:.7;filter:alpha(opacity=30);-moz-opacity:.7;-khtml-opacity:.7
}


Salve.




3 - O terceiro código você irá colar onde quer que apareça as caixinhas. Eu uso ABAIXO de  <div class='post-footer-line post-footer-line-3'>, mas você pode testar em outras partes do código.


Também pode ser usado abaixo de  <div class='post-footer-line post-footer-line-2'> ou     <div class='post-footer'>


Teste o código abaixo, em uma dessas tags acima e veja qual fica melhor no seu layout. 

<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=4&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot; LEIA TAMBÉM &quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>


Em vermelho está marcado duas vezes o número 4, que é o número de caixinhas que irá aparecer. Deixe os dois número iguais por exemplo: 3 e 3, 5 e 5 ou pode não funcionar. E também o texto LEIA TAMBÉM que você pode alterar para o que quiser. 




Salve e pronto! suas caixinhas estão instaladas. 


É só isso, é um tutorial fácil, espero que tenham gostado. Até o próximo post 


 Lembrando, eu trabalho fazendo layouts quem precisar ou quiser montar um orçamento é só entrar em contato em alguma das minhas redes sociais. 






4 comentários:

  1. Que dica preciosa <3

    www.purpurinanasvaidosas.com.br

    ResponderExcluir
  2. Gostei do seu Trabalho!
    Quero contribuir, faço artigos, imagens, vídeos, divulgação.
    Não cobro!
    Sou a Prof. Rosi Feliciano escrevo para o https://beleza.blog.br/
    Trabalho com ética, dedicação e profissionalismo dentro das normas dos navegadores e redes sociais.

    Conheça nossa proposta agora: contato@8dicas.com.br
    WhatsApp: 43991334541

    ResponderExcluir
  3. Amei seu tutorial,muito bacana <3 Bjs da Leh...

    LEH BLOG ? INSTAGRAM ?

    ResponderExcluir
  4. Olá
    Se tem uma
    m coisa que eu acho indispensável em qualquer blog são as postagens relacionadas. Eu já tenho no meu blog, mas salvei seu link aqui porque de vez em quando ele dá problema, ai se eu precisar mudar, mudo sozinha.

    Vidas em Preto e Branco

    ResponderExcluir

» Nossas redes sociais: Fã page | | Instagram | | Pinterest

» Críticas construtivas são sempre bem vindas.

» Deixe o link do seu blog no final do comentário e retribuiremos a visita com carinho.

» Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2019. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo