Oi benhê! Quer receber muito amor na sua caixa de entrada?
  • A boat with beautiful sunset.
  • Tree in field with blue sky.
  • Amaizing sunrise moment

Comentários personalizados no blog

14 de fev de 2015

Imagem: Magdeleine
Oi benhês, comé que 6 tão? Nesse tutorial irei ensinar a personalizar os comentários do blog; eles são uma parte essencial para que o blog cresça, já que é por meio deles que os leitores deixam sua opinião sobre a postagem e a página no geral. Por essa razão, essa parte do blog deve sempre estar bem organizada e combinando com o seu layout. Quer saber como fazer isso? Então vem comigo!



O código original é do blog Papo Garota e adaptado/personalizado por mim.

1. Para o tutorial funcionar, seus comentários devem estar incorporados. No painel do seu blog, vá em Configurações > Postagens e comentários > E em Local dos comentários marque a opção incorporado.

2. Agora que seus comentários já estão incorporados, vá em Modelo > Editar HTML > Tecle Ctrl + F e procure pela tag:
]]></b:skin>
3. Agora copie o código abaixo e cole acima da tag:
/* Comentários personalizados
----------------------------------------------- */

#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários"*/
font-family: 'Montserrat', sans-serif; /* fonte do número total de comentários */
color: #000; /*Cor da fonte do numero total de comentarios*/
font-size: 16px; /*Tamanho da fonte*/
font-weight: normal;
text-transform: uppercase; /* Todas as letras em maiúsculo, apague se quiser */
text-align: center; /* Texto alinhado no centro */
}
#comments {
background: #fff; /*Fundo da área geral dos comentários*/
padding: 15px;
margin-top: -100px;
}
.comments .comment-block {
margin-left: 70px; /*Espaço entre o avatar e o corpo do comentário*/
margin-bottom: 0px;
}

.comment-header {
background: #eeeeee; /*Cor de fundo do nome do autor do comentário*/
padding: 3px;}
.comment-header a {
color: #000 !important; /*Cor do nome do autor do comentário*/
font-family: 'Montserrat', sans-serif; /* Fonte do nome do autor do comentário */
font-size: 13px; /*Tamanho da fonte do nome do autor do comentário*/
text-transform: uppercase; /* Todas as letras em maiúsculo, apague se quiser */
font-weight: normal;
-webkit-border-top-left-radius: 10px; /* bordas arredondadas */
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.comment-header a:hover { color: #ed146f !important; /*Cor do nome do autor do comentário e data ao passar o mouse*/
text-decoration: none;}

.comments .comments-content .datetime a{
font-size: 12px !important; /*Tamanho da fonte da hora e data do comentário*/
float: right; /*Data alinhada a direita*/
line-height: 16px; /*Altura da linha da data e hora*/
font-family: 'Montserrat', sans-serif;
}

.comments .comments-content .comment-content{ /*Bloco de texto do comentário*/
margin-top: -10px; /*Espaço entre o bloco de texto do comentário e o nome do autor*/
position: relative;
background: #e6e5e5; /*Fundo do bloco de texto do comentário*/
padding: 10px; /* Não altere */
color: #000; /*Cor da fonte do bloco de texto do comentário*/
font-size: 14px; /*Tamanho da fonte*/
font-family: 'Lato', sans-serif;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

.comments .comment .comment-actions a {
padding: 3px;
background: #ed146f; /*Fundo dos botões responder e excluir*/
color: #fff !important; /*Cor do texto dos botões responder e excluir*/
margin-top: 25px;
margin-right: 10px;
font-size: 11px; /* Tamanho da fonte dos botões */
font-family: 'Montserrat', sans-serif; 
text-transform: uppercase;
border-radius: 3px; /* Bordas arredondadas */
}
.comments .comment .comment-actions a:hover {
background:#9bf0e9; /* Cor do botão ao passar o mouse */
text-decoration: none;}

.comments .avatar-image-container {
/*Tamanho do avatar */
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
border-radius: 100%;
}

.comments .avatar-image-container img{
/*Tamanho do avatar */
max-width: 50px;
max-height: 80px;
min-height: 80px;
min-width: 50px;}

/* respostas*/
.comments .comments-content .comment {
padding:0px 10px !important;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
}

.comments .continue { border-top: none; }
.comments .continue a {display: none;}


4. Agora edite as cores através desse site aqui de acordo com seu layout e clique em Salvar modelo.

OBS: Para usar a mesma fonte que está no exemplo, procure pela tag:
<head>
E abaixo dela cole o código:
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 

Qualquer dúvida deixe nos comentários, beijos e até a próxima.




CATEGORIA:

32 comentários

  1. Gostei muito do tutorial. Você poderia ensinar a fazer essa área de autor do post? Ficou muito legal ^_^

    www.princedreamer.com

    ResponderExcluir
    Respostas
    1. Obrigada Tiago, quando tiver um tempinho ensino sim.

      Excluir
  2. Que lindo que fica Ni, fica demais de fofo, uahuha.
    Cada dia que entro aqui fico mais apaixonadaaaaaa <3

    ResponderExcluir
    Respostas
    1. Ai que linda haha <3, fiquei super feliz com seu comentário amore.

      Excluir
  3. Ah, Ni conheci seu blog hoje e já me encantei, tudo tão lindo e bem feito ♥ Parabéns mesmo!

    Mil beijos, Lari
    www.falsacinderela.com

    ResponderExcluir
    Respostas
    1. Que honra receber um elogio de um blog tão lindo como o seu, obrigada ♥ !

      Excluir
  4. Como sempre, seus tutoriais são incríveis Ni! Parabéns!

    Aaaah passando também pra avisar que te indiquei pra uma Tag lá no meu blog, dá uma passada lá depois ;)

    Beijoo

    www.mudandoapagina.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada viu! Eu sou louca para responder essa tag, e quando tiver meu canal responderei com vídeo, porque acho muito mais divertido euehuhe.

      Excluir
  5. Nossa, muito mais fácil do que eu imaginei! Muito legal mesmo, o seu Tutorial, e logo irei colocar no meu Blog! Muito obrigada pela dica! *o*

    Grande abraço!
    http://imaginationrelease.blogspot.com.br/

    ResponderExcluir
  6. Adorei o tutorial, bem explicado e resultado é lindo!
    Parabéns pelo seu blog, é ótimo.
    Sucesso!

    Seguindo
    www.estilo-malu.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Muito obrigada amore, sucesso pra ti também!

      Excluir
  7. Amei. Adoro blogs que dão dicas de personalização.
    O meu blog foi uma menina que fez e não tem comentário personalizado.
    vou tentar ve se consigo fazer esse ..haha

    gostei daqui e ja estou seguindo para continuar acompanhando o seu blog *----*

    Vem conhecer o meu que está novinho em folha e espero que goste!
    http://www.blogdajaqueline.com.br/
    Tenho Canal no youtube também, vem me acompanhar!
    https://www.youtube.com/user/Rosachoquemakeup
    Bjussssssss <3

    ResponderExcluir
  8. Muito amor teu layout <3
    Esse é bem fácil, sabe, adoro blogs que tentam ajudar os outros :3

    Super beijo Nicole ^.^

    Blog: Like The Moon
    FanPage do blog

    ResponderExcluir
    Respostas
    1. Obrigada linda, seu blog é lindo também, adorei.

      Excluir
  9. Adorei a dica, ia fazer no meu blog, mas ainda não estou com o meu layout oficial. Vou esperar ficar pronto, daí faço!

    ResponderExcluir
    Respostas
    1. Obrigada, quando fazer me avise para eu conferir viu? Beijos.

      Excluir
  10. Eu estou bem obrigada e você?
    Eu adoro personalizar os comentários é uma das minhas partes favoritas do layout haha <3 amei o tutorial *u*

    xoxo || Larý Space

    ResponderExcluir
  11. Adorei o tutorial acho muito legal da sua parte compartilhas essas dicas com a gente ! beijos...
    http://meniiinamullher.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. E eu amo compartilhar meu conhecimento com vocês hehe ♥.

      Excluir
  12. Linda, te indique para uma TAG, espero que goste e queira responder!!!
    http://www.palomagomes.com.br/2015/02/tag-de-tudo-um-pouco-por-atras-da.html
    Beijooooo <3

    ResponderExcluir
    Respostas
    1. Obrigada pela indicação, logo mais responderei viu? Beijinhos.

      Excluir
  13. que lindinhoo! eu não entendo nada dessas coisas, daí quando vejo ensinando assim passo por passo fico achando que n é TAO confuso assim., ahah amei

    somundomeu.blogspot.com

    ResponderExcluir
    Respostas
    1. Sempre achamos que é um bicho de sete cabeças né?! hehe, mas não custa tentar, beijos. ♥

      Excluir
  14. Olá Ni..Adoro seu blog, e por isso resolvi indica-lo para um tag http://louisefernandaa.blogspot.com.br/2015/04/tag-liebster-award.html . Quando responder não se esqueça de deixar o link la para mim conferir.. Um mega beijo..

    ResponderExcluir
  15. Adorei o tutorial! Já estou usando pra uma encomenda *----*

    http://primaveraconstante.blogspot.com

    ResponderExcluir
  16. Ótimo tutorial, beeeem útil. Parabéns, adorei <3

    Mega lindo o seu layout, estou encantada hahah
    Beijos,
    http://pinguimtagarela.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada flor, que lindinho seu lay, adorei as cores.

      Excluir
  17. Muito obrigada pelo tutorial! Foi o único que consegui executar entre os que encontrei. Petersely, coisas de um mundo lindo e colorido

    ResponderExcluir