12 outubro 2016

#TutoriaisDaJaque | Post footer Personalizado

 Jaqueline, minha querida, tá sumida em? Então compensa suas leitoras ai pois elas merecem!

 Desde quando comecei fazer designs para blogs e trabalhar com isso eu era louca para personalizar o rodapé do post do blog e nunca conseguia. Quase não tem tutoriais desse pela internet pois é algo complicadinho para personalizar.
 Jaque, vai funcionar no meu blog? Meu anjo, não sei te dizer, tudo depende. Talvez você tenha pego um template na internet e essa parte do código já tenha sido personalizada de uma outra forma então não irá funcionar. Se você já entende um pouco de HTML/CSS, você pode analisar o teu código, excluir o que tem e colocar esse que vou ensinar.

 O tutorial é bem grandinho e meio complicado, então respira fundo, arruma um bom tempinho para você. Lembre-se sempre de fazer um backup do template do seu blog antes de modificar qualquer coisinha, tá bom? Então vamos lá (clique nas imagens para vê-las com mais qualidade)


Em LAYOUT vá em Postagens do Blog clique em Editar nas Opções da página de postagem estará escrito MARCADORES, apague e coloque um pontinho . no lugar e salve.

 Em MODELO > Editar HTML > Clique dentro do código e tecle CTRL + F. Pesquise por <div class='post-footer-line post-footer-line-2'> você encontrará dois códigos iguais, estamos atrás do 2º código.


 O seu código tem que estar igual o da imagem, apague somente o que esta selecionado em azul e substitua por:
<a expr:href='data:label.url' rel='tag'><img src='http://static.tumblr.com/wlnblxn/fjOoewl77/tag.png'/><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
OBS: Caso queira substituir a imagem das tags, apague somente o que está em rosa e substitua pelo seu link.



 Ainda em MODELO > Editar HTML > Pesquise por <div class='post-footer-line post-footer-line-3'> e cole ACIMA dele:
        <span class='compartilhamento'><img alt='' class='compartilhe-amor' height='68' src='http://static.tumblr.com/wlnblxn/8xzoewlq6/compartilhar_post.png' width='162'/>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img class='acende' hspace='0' src='http://static.tumblr.com/wlnblxn/R4Ioewlq9/facebook.png' title='Facebook'/></a>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img class='acende' hspace='0' src='http://static.tumblr.com/wlnblxn/sicoewlq2/twitter.png' title='Twitter'/></a>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img class='acende' hspace='0' src='http://static.tumblr.com/wlnblxn/oZjoewlqc/google__.png' title='G+'/></a>
       <b:include data='post' name='postQuickEdit'/>
</span>
 Para alterar a imagem de "Compartilhe" basta colocar o seu link onde está o link na cor roxa. Não se esqueça de alterar a largura e a altura.
 width: largura, altere a largura conforme sua imagem.
 height: é a altura, altere a altura conforme sua imagem.

Para alterar a imagem das redes sociais, basta substituir o que está em vermelho.

Pesquise por ]]></b:skin> e acima dele cole:
.compartilhe-amor {
margin: 12px 1px -19px 7px; /* altere os números se necessário */
}

 Ainda em MODELO > Editar HTML > Pesquise por <b:if cond='data:post.commentSource == 1'> 

apague somente o que esta selecionado em azul e substitua por:
<span class='post-comment-link-arriba' style='background: url(http://static.tumblr.com/wlnblxn/7ogof1mel/comentarios.png) no-repeat top right; width:164px; height:127px; text-align:center; float:right;padding-top:23px'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a>
</b:if>
</span>
Caso queira substituir a imagem:
 Substitua o link da imagem que está na cor vermelha e não se esqueça de alterar o width e height. Para que o numero de comentários fique dentro do balãozinho, altere o padding-top.

Pesquise por ]]></b:skin> e acima dele cole:
.post-comment-link-arriba a {
    color: #fff; /* Cor da fonte */
    font-family: 'Quicksand', sans-serif; /* Nome da Fonte */
    font-size: 36px; /* Tamanho da fonte  /*
    text-decoration: none;
    font-weight: 400;  /* Grossura da fonte  /*
}
.post-comment-link-arriba a:hover {
color:#272727; /* Cor da fonte com o mouse em cima */
text-decoration:none;
}
Jaque, não consegui colocar no meu, o que houve? Não seeeei! Vai depender muito do template que você está usando, do código, de quem fez e várias outras coisas. Se você fizer um template do 0 tenho quase certeza que irá conseguir colocar o post-footer dessa maneira. Mas tente entender a estrutura do template que você está usando para que dê certo, se os códigos do post-footer já tiverem sido alterados tente achar onde eles estão para você poder substituir do jeitinho que você quiser.
 Aconselho muito que você estude a estrutura do seu código, tem vários blogs que falam sobre a estrutura dos códigos do próprio blogger, é muito importante você saber que dai todos os tutoriais que você desejar usar no seu blog irão funcionar.

Depois desse tutorial imenso vocês me perdoam pelo chá de sumiço que dei em vocês? Prometo que esse mês vai ter uma surpresona para tooodos, até para mim mesma. Ah não, não vou trocar o template do blog de novo, por mais que eu esteja louca para fazer isso, juro.

 Espero que tenha gostado, qualquer duvida deixa um comentário com o link do seu blog que posso tentar te ajudar. 3 Beijooooos :***

22 comentários:

  1. Amei lindo lindo <3
    Arrasou Gata No tutorial

    Meu blog: Conteiepronto.blogspot.com

    ResponderExcluir
  2. Consegui, no modelo travel e no marca d'água do blogger.

    Obrigada!

    ResponderExcluir
  3. Amei esse tutorial. E bem ruim quando queremos personalizar algo, não sabemos como e não achamos nenhum tutorial.
    esse fica lindo no blog
    beijos
    http://lolamantovani.blogspot.com.br/

    ResponderExcluir
  4. E se eu não quiser deixar o botão dos comentários com imagem?

    ResponderExcluir
  5. Olá Jaque,
    eu estou amando essa serie que você criou,faz tempo que eu estava procurando tutoriais como esse que você dá, são incríveis.
    Tem como você fazer um tutorial ensinando a colocar rodapé com imagem e seus devidos créditos, eu procurei aqui no seu blog e em outros e nenhum funcionava :( , você poderia me ajudar?
    Desde já agradeço.

    ResponderExcluir
    Respostas
    1. Oiii lindaaa, MUUUITO obrigadaaa <3 todos os tutoriais que posto aqui são feitos com muuito amooor.
      Pode deixar que vou trazer sim um tutorial de rodapé personalizado :***

      Excluir
  6. Deu super certo no meu! Amei, muito obrigada!

    ResponderExcluir
  7. Deu certo, tudo, só não conseguir personalizar o compartilhar, porque eu queria colcar um botão para o pinterest e e-mail e não deu certo :(

    ResponderExcluir
    Respostas
    1. Marta, pra colocar mais botões é bem simples, basta saber o código certinho deles e colocar antes de < /span>

      Excluir
  8. Amei! Ficou maravilhoso no meu blog!!! Faz um tuto mostrando como deixar as categorias acima do título do post, como aqui no seu blog, pfv. <3

    ResponderExcluir
    Respostas
    1. Isaaa, que bom que conseguiiiu õ/
      tá geral me pedindo esse tuto UAHUAHAUHA postarei em breve.
      Beijos, lindona

      Excluir
  9. Oii tudo bem? Ameii o tutorial! Deu certinho, o único problema que deu (e eu não estou conseguindo resolver), é mudar o tamanho dos links dos marcadores, e do número dos comentários. As imagens de cada um ficaram perfeitas, mas o número dos comentários e os links das tags/marcadores, ficaram super pequenos. Me ajuda???

    ResponderExcluir
    Respostas
    1. Gabiii, fico feliz que tenha gostado do tutoriaaal <3

      Pra mudar o tamanho da fonte, cor e estulo da numeração dos comentarios você tem que mudar lá no HTML, na parte ".post-comment-link-arriba a {" é ali que muda.
      Pra mudar das tags, você tem que alterar o tamanho o link que está dentro do seu código (ai já não tem nada a ver com o tutorial), deixa o link do seu blog que tento te ajudar ;)

      Excluir
  10. Outra pergunta: Como faz para contornar o post-footer? Estilo a da sua imagem (deixá-lo dentro de uma caixa, um contorno retangular envolta do conteúdo)?

    ResponderExcluir
    Respostas
    1. pra deixar igual o meu eu fiz uma imagem no Photoshop, amore, dupliquei a camada e coloquei um efeito pra ficar esse contorno

      Excluir