Imagem: Magdeleine |
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.
Gostei muito do tutorial. Você poderia ensinar a fazer essa área de autor do post? Ficou muito legal ^_^
ResponderExcluirwww.princedreamer.com
Obrigada Tiago, quando tiver um tempinho ensino sim.
ExcluirQue lindo que fica Ni, fica demais de fofo, uahuha.
ResponderExcluirCada dia que entro aqui fico mais apaixonadaaaaaa <3
Ai que linda haha <3, fiquei super feliz com seu comentário amore.
ExcluirAh, Ni conheci seu blog hoje e já me encantei, tudo tão lindo e bem feito ♥ Parabéns mesmo!
ResponderExcluirMil beijos, Lari
www.falsacinderela.com
Que honra receber um elogio de um blog tão lindo como o seu, obrigada ♥ !
ExcluirComo sempre, seus tutoriais são incríveis Ni! Parabéns!
ResponderExcluirAaaah 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
Obrigada viu! Eu sou louca para responder essa tag, e quando tiver meu canal responderei com vídeo, porque acho muito mais divertido euehuhe.
ExcluirNossa, 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*
ResponderExcluirGrande abraço!
http://imaginationrelease.blogspot.com.br/
É super simples né?! Obrigada ♥.
ExcluirAdorei o tutorial, bem explicado e resultado é lindo!
ResponderExcluirParabéns pelo seu blog, é ótimo.
Sucesso!
Seguindo
www.estilo-malu.blogspot.com.br
Muito obrigada amore, sucesso pra ti também!
ExcluirAmei. Adoro blogs que dão dicas de personalização.
ResponderExcluirO 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
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!
ResponderExcluirObrigada, quando fazer me avise para eu conferir viu? Beijos.
ExcluirEu estou bem obrigada e você?
ResponderExcluirEu adoro personalizar os comentários é uma das minhas partes favoritas do layout haha <3 amei o tutorial *u*
xoxo || Larý Space
Estou ótima amore, obrigada *-*.
ExcluirAdorei o tutorial acho muito legal da sua parte compartilhas essas dicas com a gente ! beijos...
ResponderExcluirhttp://meniiinamullher.blogspot.com.br/
E eu amo compartilhar meu conhecimento com vocês hehe ♥.
ExcluirLinda, te indique para uma TAG, espero que goste e queira responder!!!
ResponderExcluirhttp://www.palomagomes.com.br/2015/02/tag-de-tudo-um-pouco-por-atras-da.html
Beijooooo <3
Obrigada pela indicação, logo mais responderei viu? Beijinhos.
Excluirque 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
ResponderExcluirsomundomeu.blogspot.com
Sempre achamos que é um bicho de sete cabeças né?! hehe, mas não custa tentar, beijos. ♥
ExcluirObrigada linda, seu blog é lindo também, adorei.
ResponderExcluirOlá 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..
ResponderExcluirAdorei o tutorial! Já estou usando pra uma encomenda *----*
ResponderExcluirhttp://primaveraconstante.blogspot.com
Perfeito Thais, beijinhos.
ExcluirÓtimo tutorial, beeeem útil. Parabéns, adorei <3
ResponderExcluirMega lindo o seu layout, estou encantada hahah
Beijos,
http://pinguimtagarela.blogspot.com.br/
Obrigada flor, que lindinho seu lay, adorei as cores.
ExcluirMuito obrigada pelo tutorial! Foi o único que consegui executar entre os que encontrei. Petersely, coisas de um mundo lindo e colorido
ResponderExcluirImagina, volte sempre.
ExcluirBeijos de luz!