Antes de começar o tutorial, eu quero dizer que: Você pode usar esse post-footer no seu blog a vontade. Mas se você faz layout por encomenda, nem pense em colocá-lo no layout da sua cliente, amiga, ou whatever. Foi difícil pra mim fazer esses códigos, e foi difícil ensinar aqui. Não fiz isso pra você ganhar nas minhas custas, mas pra ajudar quem não sabe fazer. Então você tem duas opções: 1) Fazer seu próprio código (afinal, se você faz esse tipo de trabalho você tem que saber fazer), ou 2) Comprar os direitos de uso desse código me mandando um email aqui: duvidasbutlariz@gmail.com. Aí você pode usar e cobrar por ele em quantos trabalhos quiser. 


Eu tenho recebido muitos pedidos desse tutorial (sempre quis falar isso), e eu resolvi fazer. Demorei porque, é muito complicado pensar num post-footer bonitinho kkkkk e queria um jeito que qualquer pessoa conseguisse. O tutorial ficou grande, da um trabalhinho mas se você prestar atenção é fácil de fazer, e está bem explicadinho, tá? Rolou até gif pra explicar melhor <3
Ah, eu fiz esse código, e testei no tema Simple e no tema Viagem do blogger, deu certo nos dois. Se você usa um layout free, um layout feito por outra pessoa, ou já mexeu nos códigos com base em outros tutoriais, pode ser que não dê certo, afinal, todo layout não é igual. Não tente fazer diretamente no seu blog. Crie um blog de testes, aplique o tema Simple do blogger, cria uns 3 posts com marcadores e mãos a obra! 
Nesse post-footer tem: Botão de comentar, marcadores lindamente personalizados e botões de compartilhamento. Dividi o post em vários itens, que é pra ficar mais fácil, preste atenção, não tenha preguiça, e você vai amar ver o resultado. A minha dica é: Antes de fazer, leia o item todo, e veja o gif ou a imagem, e só então, tente fazer. Isso vai facilitar. 
Vamos ao tutorial? 

Não tente fazer diretamente no seu blog. Crie um blog de teste com uns 4 posts e marcadores. Copie o layout do seu blog e cole no blog de testes. Assim, você pode usar ele sempre antes de tentar fazer algo no seu blog, pra não correr o risco de estragar o layout ou algo assim, ok? Esse blog de testes será bem útil!
1. Organizando: Vá em layout > Edite o Posts no Blog > Onde fica o marcador, apague e coloque um ponto (.) > Desmarque a opção “Mostrar botões de compartilhamento”. Calma, respira, olha o gif e faz um por um, calmamente: 
A parte de baixo, tem que ficar assim:
Salve.
2. Botão de Comentar: Agora você vai em Modelo > Editar HTML e vai clicar no meio do código e descer um pouco a barra de rolagem.
Após isso, aperte CTRL+F no teclado e digite commenturl . Sabe a linha que apareceu? Ela começa com <a href=” você vai selecionar desde esse <a href= até o </a> e apagar. 

Aviso: Quando usar a caixinha de busca certifique-se que: é a caixa de busca que fica dentro da área do código, e não aquela que aparece em cima do navegador. E que não tem espaços antes ou depois do código que você colocou na caixinha de busca, porque se tiver um espacinho ali, ele não vai encontrar.


No lugar, você vai colar esse código: 

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>       <span class='post-comment-link-arriba'><data:post.commentLabelFull/>. Comente também! <img src='http://3.bp.blogspot.com/-E_BMoc0cd4c/Ul7Gm1W18BI/AAAAAAAAQlM/1bgaof7YZ90/s1600/mini+cora%C3%A7%C3%A3o+(100).gif'/></span>
    </a>

Ficará assim:
Nessa parte roxa, é a url da imagem, que é desse balãozinho que tem nos comentários. No I Love Banner tem vários mini gifs e alguns balãozinhos e é só clicar no qual você quer com o lado direito do mouse > copiar endereço da imagem, e colar no lugar dessa parte marcada de roxo.
Para achar mais, você pode procurar no google por “mini gifs”.
3 – Botões de Compartilhamento: Respira fundo, vai tomar uma água e depois volta aqui pra continuar. Agora, você vai apertar novamente CTRL+F no seu teclado, e vai colocar isso: post-footer-line post-footer-line-2 . Dê enter. Vai aparecer um, não é esse. Dê enter novamente, e será esse. Vai aparecer assim:
<div class=’post-footer-line post-footer-line-2′>
Você vai dar um enter depois desse código, e nessa nova linha vai colar isso aqui:

<span class='compartilhe'> <!-- botões de compartilhar -->

<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' style='background-color: #C7D9F4' target='_blank'>Facebook</a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' style='background-color: #93CBD1' target='_blank'>Twitter</a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' style='background-color: #FEA2A2' target='_blank'>Google+</a>

 <!-- NÃO APAGAR ESSE  -->
        <b:include data='post' name='postQuickEdit'/>

</span>

Vai ficar assim:
4 – Marcadores: Você vai dar CTRL+F novamente, e procurar por data:label.name/ .  Essa linha começa com <a expr e termina com </b:if> . Vai apagar a linha toda, e no lugar colocar esse código:
  <a expr:href='data:label.url' rel='tag'># <data:label.name/></a><b:if cond='not data:label.isLast'></b:if>
Agora você vai dar CTRL+F e procurar por <b:include data=’post’ name=’postQuickEdit’/> . Vai aparecer dois. Um, deles está escrito antes  <!– NÃO APAGAR ESSE  –> , então, você vai apagar o outro:

Aparência e Estilos

Agora vamos mexer na aparência do post-footer, ou seja, o que vai deixar ele bonitinho. 
5 – Estilos: Aperte CTRL+F e procure por: ]]></b:skin> (Sim, TODO layout tem essa tag, se você não achar, veja se na caixinha de busca, não tem um espaço depois de skin>). Acima dela, você vai colar o seguinte código:
.post-footer-line.post-footer-line-2 {
padding: 20px 0px;
}

.post-footer a {
color: #000;
}

.post-footer a:hover {
text-decoration: none;
}

.post-comment-link-arriba {
text-align: center;
font-weight: bold;
font-size: 10pt;
font-family: calibri;
letter-spacing: 1px;
text-transform: uppercase;
margin-left: 10px;
letter-spacing: 1pt;
}

.post-comment-link-arriba:before {
width: 80px;
height: 1px;
display: inline-block;
background-color: #000;
content: '';
margin: 0px 15px 4px 0px;
}

.post-comment-link-arriba:after {
width: 80px;
height: 1px;
display: inline-block;
background-color: #000;
content: '';
margin: 0px 0px 4px 15px;
}

.compartilhe a {
padding: 9px;
border-radius: 2px;
color: #FFFFFF;
text-transform: uppercase;
font-size: 7pt;
letter-spacing: 1pt;
margin-right: 6px;
}

.post-labels { float: right; color: transparent }

.post-labels a {
background-color: #FAEEE6;
padding: 9px;
border-radius: 2px;
color:#8d7672;
text-transform: uppercase;
font-size: 7pt;
letter-spacing: 1pt;
}

.post-labels a:hover {
background-color: #f0bfc8;
color: #fff;
}

6 – Novamente aperte o CTRL+F e procure por .post { vai aparecer assim:

.post {
  margin: 0 0 $(post.margin.bottom) 0;
}
Você vai apagar, sem medo, o código acima.
Depois, CTRL+F , procure por .post-footer { , vai aparecer assim:
.post-footer {
  margin: 20px -2px 0;
  padding: 5px 10px;


  color: $(post.footer.text.color);

  background-color: $(post.footer.background.color);
  border-bottom: 1px solid $(post.footer.border.color);


  line-height: 1.6;

  font-size: 90%;
}
Apague.

Personalizando do seu jeito

Pode salvar tudo e ir ver como ficou. Talvez fique perfeito, ou talvez a parte dos comentários fique errada, ou você não goste das cores. Vou te ensinar a arrumar.
Nos códigos, eu destaquei algumas partes com algumas cores:
A parte rosa é o tamanho desses tracinhos antes e depois do “1 Comentário, comente também” se você quiser maior, mude o 80px para um número maior. Se não quiser os traços, mude para 0px. 

Para mudar a cor dos marcadores: A parte bege  é a cor do fundo, a marrom é a cor do texto. Quando passa o mouse, a parte rosa é o fundo e a parte preta e o texto.

Se vocês tiverem mais dúvidas de personalização, comentem, que eu vou atualizando o post, ok? 

Pra colocar o “Veja também” , siga este tutorial da linda da Elaine Gaspareto: Postagens Relacionadas.
Não reproduza esse tutorial no seu blog. Quer mostrar pra suas leitoras? Indique o meu post.
Ah, se não conseguiram, ou tiverem alguma dúvida sobre o tutorial, mande um e-mail para duvidasbutlariz@gmail.com , coloque o link do seu blog no E-mail. Se não conseguiu fazer, pode fazer um orçamento comigo pelo mesmo e-mail que eu faço pra você 😉
Em breve: Aprenda a transformar o tema Simple do Blogger no layout dos seus sonhos. Cadastre-se na newsletter para não perder essa novidade!