25 fevereiro 2016

Personalizar o post-footer (rodapé da postagem)


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! 

Comente com o Facebook:

48 comentários:

  1. Ficou muito legal!
    Aqui no meu pc está mostrando no seu rodapé do post os posts relacionados mas, não estão todos na mesma linha, um dos círculos está sozinho em baixo, talvez seja o tamanho deles, sei lá.. Só para avisar :D

    www.todomeldaflor.com

    ResponderExcluir
    Respostas
    1. Obrigada por avisar Pam. É que a minha tela é maior, e ainda não tive tempo de ajustar tudo pra outras telas, mas os círculos eu acabei de arrumar! Ficou certinho agora? Obrigada <3 Beijos!

      Excluir
  2. Não consegui... Fiz tudo certinho e nada mudou. :/

    ResponderExcluir
    Respostas
    1. Esse código vai dar certo nos temas feito pelo Blogger, eu testei no Simple e no Viagem. Pelo que vi, seu blog é feito por outra pessoa, quer dizer que tem outra estrutura, por isso não funciona.. ):

      Excluir
    2. Eu quem personalizei meu blog e fiz ele com sabe no modelo simples I:

      Excluir
    3. Então provavelmente quando você personalizou, mexeu em algum lugar, ou fazendo algum tutorial, acabou mudando alguma coisa no layout.. O estranho é que era pra mudar pelo menos alguma coisa sabe? Se é no modelo Simple, deveria pelo menos alguma alteração, tipo os botões de compartilhamento ter aparecido. Mas nada ter mudado, é estranho, não sei :/

      Excluir
  3. Lariiii, eu era louca para aprender a personalizar post-footer, fui uma das muitas que pediram para você fazer esse tutorial. Obrigada de verdade!!!!
    atraves desse tutorial agora consigo ver como realmente é para adaptar ele aos códigos e poderei fazer o meu proprio. Obrigada mais uma veeeez!! <3

    ResponderExcluir
    Respostas
    1. E pelo Viagem, na parte 6, basta apagar a linha .post-footer { e umas duas linhas até fechar o trequinho "}" e é só salvaar <3

      Excluir
    2. Que linda Jaque! Fico feliz em ter ajudado <33

      Excluir
  4. Salvei nos favs pra usar posteriormente! <3
    http://hi-mi-tsuu.blogspot.com.br/

    ResponderExcluir
  5. oiiii! Adorei o tutorial! Teste no meu blog de testes e funcionou tudo direito, mas quando coloquei aqui no meu e não aparece a linha que direciona para os comentários :( sabe me dizer o por que? Consegue me ajudar nessa?

    Estou te seguindo em todas as redes haha adorei!

    Beijinhosss, Mundo de lua

    ResponderExcluir
    Respostas
    1. Olha Lu, deveria ter aparecido. Será que você não copiou alguma coisa errada? Tenta fazer de novo. Esse negócio de código é assim mesmo, as vezes da errado e a gente nunca sabe o motivo, e aí da certo e a gente também não sabe o motivo hahaha

      Excluir
  6. Amei por demais o tutorial Lari! Vi lá no Daydream, e vim correndo para fazer o tutorial! Você me ajudou a mudar uma coisa que me incomodava demais, ficou muito lindo *-*
    Obrigada mesmooo! Todo o sucesso do mundo!
    Beijoooos! <33
    http://eaigirlblog.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico feliz em ter ajudado, e muito obrigada viu? Desejo o mesmo pra você <3 Uma daydreamer aqui haha *o*

      Excluir
  7. Amei o tutorial! Já salvei aqui nos favoritos para fazer quando tiver um tempinho. Seu blog é muito lindo, desde que entrei pela primeira vez me apaixonei, e você explica super bem! Obrigada, e sucesso! Beijos!

    http://doisjeitos.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico feliz que goste daqui Vitória <3 Espero que dê certo, qualquer coisa é só comentar!

      Excluir
  8. Adorei o tutuorial, muito util.. porem eu não consegui arrumar no meu blog D:
    beijoos!
    http://meninacacheadasim.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Poxa, tenta de novo, as vezes é algum errinho bobo que você nem percebeu :c

      Excluir
  9. Este comentário foi removido pelo autor.

    ResponderExcluir
  10. Ajudou bastante <3

    www.meninadofuturo.com.br

    ResponderExcluir
  11. Esse site de desing vendeu um layout que utilizava esse seu modelo, como tambem não gostaria que fizem isso comigo eu vim avisar
    https://www.facebook.com/moonlydesign/photos/a.705331332936227.1073741828.704563613012999/743063309163029/?type=3&theater

    ResponderExcluir
    Respostas
    1. Muito obrigada por ter me avisado! Fico feliz com a sua preocupação. O moonly design é meu site, faço meus trabalhos através dele, então o Moonly pode haha. Mas se você ver outra empresa vendendo algo com meus códigos, peço pra que me avise, porque outras não podem! Obrigada novamente <3

      Excluir
  12. WHOAAAAAAAAAA, seu blog está se tornando um dos melhores blogs de html, sabia? \o/
    Ensina a gente a como fazer um slide parecido com o seu? plssss :D

    ResponderExcluir
    Respostas
    1. Obrigada Ingrid, que delícia ouvir isso <3 Vou ver se faço um tutorial sobre ele sim! Beijos ♡

      Excluir
  13. Oi, tentei esse tutorial no meu blog, que estou usando a sua base, no entanto as categorias e as redes de compartilhamentos ficaram acima do "comente também", pode me ajudar?

    ResponderExcluir
  14. Este comentário foi removido pelo autor.

    ResponderExcluir
  15. Lari não consegui, só dá erro. Eu uso o layout base que você disponibilizou :(
    Fala que uma linha tá errada e eu não consigo consertar.

    ResponderExcluir
  16. oii, ótimo post!!deu tudo certo mas o texto do post ficou pequena e não consigo aumentar e ñ achei .post { para apaga-lo, meu modelo é viagem se puder me ajudar

    ResponderExcluir
  17. Oi, fiz no blog de testes e deu certinho mas quando fiz no blog mesmo só apareceu a parte de compartilhar e a parte do comentários e o balãozinho não apareceram.

    ResponderExcluir
  18. Oi Lari, como desprender o post-footer do post-outer? Como nos widgets da sidebar?
    Já martelei e não obtive êxito :/

    Desde já obrigado pela atenção

    ResponderExcluir
  19. Posso te encher de beijooooos menina? kk brincadeira!! Mas é serio muito obrigada mesmo, estou construindo o novo layout do meu blog sabe e estou personalizando dessa vez o modelo travel, sai um pouco no modelo minima e ameeeei mesmo esse tutorial fiz passo a passo certinho e super funcionoou assim que eu por no ar meu layout irei creditar seu blog <3 Beijoos

    http://www.caprichadissimas.com.br/

    ResponderExcluir
  20. Porém eu tive um certo probleminha no código a parte: NENHUM COMENTÁRIO ela nao estava totalmente centralizada pensei que fosse algo que nao desmarquei no layout mas ai lendo um pouco a parte de personalização do codigo onde tem: .post-comment-link-arriba { fui na opção: margin-left: 55px; e alterei o número 10px pra 55px e centralizou!!! Talvez alguem teja com esse probleminha ;)

    ResponderExcluir
  21. ótimo tutorial, o meu ficou legal mas o marcador desceu para fora do rodapé da postagem e agora, me ajudem

    ResponderExcluir
  22. Eu consegui consertar os marcadores que estavam de fora. Mas agora quero saber por que assim, no meu tem "postado por" e abaixo fica os comentários com linha(tipo X comentários. Comente também!), como faço pra ficar topo do rodapé? Eu não posso tirar o meu "postado por". Ou como faço pra descer o "postado por"?

    ResponderExcluir
  23. Gente pra quem teve problemas na postagem, se suas postagem ficarem muito grudadas é acrescentar margin: 0px 0px 25px 0px; abaixo de .post {
    Pois no meu eu acabai de consertar.

    ResponderExcluir
  24. Cara eu tô mexendo no código até agora. Kkkk Só que agora eu fiz merda, não sei o que houver que só tá assim em todos os posts: "Um comentário". O que será qeu eu fiz? :(

    ResponderExcluir
  25. Tava pirando pro bloguinho voltar <3 to super feliz por você Lariz, e o lay novo ficou MARAVILHOSO!
    Enfim, estava querendo fazer esse tutorial a um tempo, uso o seu layout base. Mas quando chego no fim pra visualizar ou salvar, ele dá a seguinte mensagem:

    Erro ao analisar XML, linha 1871, coluna 13: The element type "li" must be terminated by the matching end-tag ""

    E eu não sei o que fazer kkk se puder me ajudar <33

    ResponderExcluir
    Respostas
    1. QUE LINDAAA <3 Muito obrigada!

      Então, parece que esse tutorial tá dando defeito no meu próprio tema pra várias pessoas kkkk eu vou tentar descobrir o que aconteceu e atualizar o tutorial, aí te aviso. Beijos!

      Excluir
  26. Este comentário foi removido pelo autor.

    ResponderExcluir
  27. Depois de procurar muito por um post footer bonitinho e encontrar esse, me apaixonei e consegui fazer!!

    Muito obrigada mesmo! Salvou meu dia <3

    www.livrebeleza.blogspot.com.br

    ResponderExcluir
  28. AMEI , AMEI , AMEEEEI , ARRASOU , MUITO OBRIGADA , CONSEGUII . ALELUIAAA , EU ESTAVA PROCURANDO A MUITO TEMPOOOO

    ResponderExcluir
    Respostas
    1. kkkkkk, Oi Luana, fico muuuuuuuito feliz que você tenha gostado kkkk. Eu que agradeço esse carinho e toda empolgação <3 uahauhauh. Linda! Beijos <3

      Excluir
  29. Boa noite, flor. Seu blog é lindo, seus tutorias são maravilhosos e estão me ajudando muito. Eu tenho um blog (http://casaevidacolorida.blogspot.com) e usei esse tutorial pra colocar o rodapé, e ficou perfeito, e o fundo ficou cinza, não lembro se foi eu que coloquei sem querer, ou se ficou no automático, mas aí eu tô editando um template teste pra substituir esse do blog atual, mas queria que o fundo ficasse cinza tb, mas não consigo de jeito maneira, rsrsrsr, se puder, dá uma olhadinha em como está lá no blog. Se vc puder me ajudar com isso, agradeço muuuuuuuito, rsrsrs. Bjão e obrigada!!!

    ResponderExcluir
    Respostas
    1. Oi Anallu, tudo bem? Muito obrigada, e me deixa muito feliz saber que estou ajudando e você gostou do meu tutorial!

      Então, para o fundo ficar cinza, sabe no passo 5 onde pedir pra adicionar os códigos de estilo? As últimas linhas desse código, são essas:

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

      Depois disso, é só acrescentar esse código:

      .post-footer { background-color: #ddd;}

      Aí o fundo vai ficar cinza! É bem fácil ;) Espero que consiga fazer <3

      Obrigada pelo carinho, qualquer coisa é só falar <3 Beijão!

      Excluir
  30. Amei o post, mas tenho uma dúvida: no meu ficou tudo certinho mas ficou tudo junto tipo, apareceu os comentarios e embaixo os botões de compartilhamento mas não ficou com um espaço entre o comentário e os botões igual o teu. O que faço?

    ResponderExcluir
    Respostas
    1. Muito obrigada Julia <3 Então, sabe os códigos que pedi pra colocar? Embaixo de todos eles coloca isso:

      .post-footer-line.post-footer-line-1 {
      margin-bottom: 20px;
      margin-left: 30px;
      }

      O margin-bottom é a distancia entre os comentários, e os botões da linha de baixo.

      O margin-left vai te ajudar a centralizar mais os comentários, ai quanto maior o número, mais vai pra direita, se achar que não precisa, é só colocar 0px;

      Espero ter ajudado <3 Beijos!

      Excluir
    2. Muito obrigada! Eu coloco embaixo de qual código??

      Excluir

Butlariz • contatobutlariz@gmail.com Feito com ♥ por Lariz Santana / Moonly Design