#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 :***