Personalizando a área dos comentários - Entenda!

| |
Tumblr_lqkn9a65ea1qb4hv5o1_500_large   
   Este tutorial não é exclusivo, mais é que houveram muitos pedidos. Vocês todos já devem terem suas áreas de comentários personalizadas, mais nem todos devem ter entendido o lugar certo. Então, hoje vamos fazer um tutorial bem explicado para vocês! Let's Go?

>>> Vá até Design, Editar HTML, aperte CTRL+F e procure por:
#comments {
Caso não achar, procure por  #comments h4 {.

Logo abaixo você encontrará algo parecido com isso:
#comments {
  background: $(comments.background);
  padding: 15px;
}

#comments .comment-author {
  padding-top: 1.5em;
}

#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}

#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}

.avatar-image-container {
  margin: .2em 0 0;
}
Substitua todo o código acima pelo de baixo.
#comments h4 {
  margin: 1em 0;
  font-weight: bold; 
  font-size: 90%;
  line-height: 1.4em;
  letter-spacing:.1em; 
  color: #33CCCC; /*** cor do "Postar um comentário" e "x comentários:" ***/
  }

#comments-block {
  margin:1em 0 1.5em;
  line-height: 1.6em;
  }

#comments-block .comment-author {
  background: #DADADA; /*** fundo do autor ***/
  font-size: 15px; /*** tamanho da fonte do nome do autor ***/
  margin:.5em 0;
  }

#comments-block .comment-body {
  margin:.25em 0 0;
  line-height: 1.4em; /*** espaço entre as linhas ***/
  padding: 8px; /*** margem interno da área do comentário ***/
  background: #F9F9F9; /*** fundo da área do comentário ***/
-webkit-border-radius: 10px; /*** bordas arredondadas na área do comentário ***/
-moz-border-radius: 10px;
border-radius: 10px;
  }

#comments-block .comment-footer {
  margin:7px 0 2em;
  line-height: 1.4em; 
  font-size: 90%; /*** tamanho da fonte da data do comentário ***/
  text-align: right; /*** alinhamento da data do comentário ***/
  letter-spacing:.1em; /*** espaçamos entre as fontes da data ***/
  }

#comments-block .comment-body p {
  margin:0 0 .75em;
  }

.deleted-comment {
  margin: 10px 0 2em;
  font-style: italic;
  color: #ERTGKL; /*** cor do recado de 'comentário deletado' ***/
  }
 Então pessoal, vou dar umas explicações aqui para vocês entenderem algumas coisas melhor ok?

  Padding/Margin: É a margem interna, o espaço interior, para dentro da caixa. Já margin é a margem exterior, para fora. Entenda mais sobre padding e margin aqui.

  line-height/letter-spacing: line-height é a distância entre as linhas do texto, e letter-spacing é o espaço entre as letras da palavra. Ou seja, a palavra fica mais "solta".

  .deleted-comment {: É o conjunto que customiza quando você deleta algum comentário. Por exemplo, você deletou algum comentário do seu blog aparece essa frase né: "Esta postagem foi removida pelo autor."  Então, a frase ficará em itálico e cinza, se você não mudar nada no código, mais você pode modificar, claro.

Enfim pessoal, acho que foi uma explicação clara né? Espero que tenha ajudado vocês. Não é exclusivo (vou falar novamente) este tutorial, mais os outros serão ok? QUALQUER DÚVIDA NOS AVISE. Beijos, Emily.

12 comentários:

Unknown disse...

Estão te plagiando, olha:
http://trueluvrplacefame.blogspot.com/2011/09/personalizar-area-dos-comentarios.html?showComment=1315701600210#c7954805431439381202

Bab-álus Girls disse...

Que legal o tutorial, parabééns Emilly !!
O Blog vai bombar tenho certeza, kkk
Beijinhoos

Anônimo disse...

MUITOMUITOMUITO ÚTIL! Eu nunca havia conseguido personalizar direito, mais agora eu consegui o/ Ótimo este tutorial '0'
http://senhoritaliberdade.blogspot.com/

Almost Fashion disse...

Não deu certo :/
Enfim , o blog tá maravilhoso :)
Parabens de verdade .

Visita ? Almostfashion-blog.blogspot.com

Barbara disse...

não consegui! =/

Bjs,
http://blogportalteen.blogspot.com

Anônimo disse...

"mais" nem todos?! MAS nem todos!!

dribs disse...

Como colocaram este tipo de Atributtion? Eu adorei!!
pinkpimenta.blogspot.com

David Souza disse...

Ótimo tutorial , porém em outros estilos como
o meu que fiz do zero não usei algumas tags que
mostra .

www.umtroll.com

A. disse...

Amei. Muito obrigada.

Yasmin Coutinho disse...

me ajudou abstante

Anônimo disse...

Amei, me ajudou mt!

Anônimo disse...

AMEI

Postar um comentário