5 de dez de 2016

Personalizando o Rodapé dos Posts

Vocês pediram um tutorial nesse modelo e aqui está! Hoje vou ajudar vocês á deixar o rodapé dos posts mais bonitinho, geralmente o do Blogger é beem feinho e sem graça.

Esse modelo é simples mas dá uma enorme diferença no visual final do seu layout, além de reunir algumas coisas que são bem importantes como os marcadores, opção para comentar e botões de compartilhamento. 







Primeiramente você deve ir em Layout > Principal > Editar e deixar assim:



Agora vá em Modelo > Editar HTML > CTRL + F > Pesquise por: ]]></b:skin>

Acima dessa tag cole o código abaixo

/*--------------- Rodapé dos posts personalizado by Blog da Rocky ------ */
.comment-link {
float: right;
margin: 10 50 10 50;
background:#FFB3D9;
padding: 2px 3px 2px 3px;
font-family: "Josefin Sans", sans-serif;
Text-transform: Uppercase;
Font-size: 16px;
}
.comment-link a {
color: #000000;
}
.comment-link a:hover {
color: #F9F9F9x;
}

.post-footer {
Font-size: 14px;
font-family: "Josefin Sans", sans-serif;
Text-transform: Uppercase;
border: 2px dotted #FFB3D9;


}

Depois pesquise por esse trecho: <div class='post-footer-line post-footer-line-3'>

Abaixo dele cole esse código dos botões de compartilhamento, se não quiser usar esse aqui nesse post tem mais algumas opções.


<!--Compartilhamento Personalizado by Blog da Rocky-->
<img src='http://i.imgur.com/unXRBUt.png'/>
<!-- share buttons -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/YFXWd8p.png' title='Facebook'/></a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/GyqTR6Z.png' title='Twitter'/></a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/m6DKSKK.png' title='G+'/></a>

<a class='' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' target='_blank'><img src='http://i.imgur.com/RH1U5BQ.png'/></a>

<!--Compartilhamento Personalizado by Blog da Rocky Final-->

É provavel que no seu rodapé os marcadores não fiquem alinhados com os comentários, para alinhar você vai precisar pesquisar por esse trecho: <span class='post-labels'> 

Selecione desde esse trecho pesquisado até </span> antes de </div>, copie e exclua esse trecho, se você subir um pouquinho vai achar esse trecho:  <div class='post-footer-line post-footer-line-1'> 

Abaixo da segunda ocorrência desse trecho cole o código dos marcadores copiado antes.




Se você usar muitos marcadores os comentários vão ficar desalinhados.

Você pode trocar a cor da borda e dos comentários, a cor usada foi #FFB3D9 e você pode troca-la no primeiro código pela cor de sua preferência.

CONHEÇA MEU OUTRO BLOG! Moda evangélica, cachos, inspirações, resenhas e muito mais!! Blog Twice ♥

9 comentários :

  1. Olá Rocky, você não sabe o quanto tem me ajudado com esses posts sobre blog! Eu também gosto dos seus vídeos no youtube. Vou começar a postar no meu blog em janeiro graças à sua ajuda. Continue postando e nos ajudando. :D

    ResponderExcluir
    Respostas
    1. Poxa que demais ler isso! Fico feliz em ajudar você, pode deixar que vou continuar postando sim, desejo todo sucesso do mundo com o seu blog!! :*

      Excluir
  2. Conhecendo seu blog e já seguindo pra não perder suas novidades! Quando puder dá uma olhada no meu cantinho!
    Usei essa ideia no meu blog, ficou lindo!

    Beijos e Feliz Natal! 🎄
    Blog A primeira Casa

    ResponderExcluir
  3. Adorei, obrigada mais uma vez por ajudar, ficou muito lindo! <3

    ResponderExcluir
  4. Adorei a dica, adicionei em meu blog e ficou muito legal. Parabéns pelo talento.

    OBS: Ainda estou criando a página de créditos.

    www.blogdodeivy.blogspot.com

    ResponderExcluir
  5. Oi Rocky, deu super certo no meu blog, muito obrigada, beijos !! E muito sucesso pra ti guria tu merece <3!!

    diksdareh.blogspot.com.br

    ResponderExcluir
  6. Gosto muito desses tipos de posts,queria muito um personalizado com baloes

    ResponderExcluir
  7. ADORO sempre com dicas maravilhosas♥ muito bom

    ResponderExcluir