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:
Caso não achar, procure por #comments h4 {.#comments {
Logo abaixo você encontrará algo parecido com isso:
Substitua todo o código acima pelo de baixo.#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;}
#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:
Estão te plagiando, olha:
http://trueluvrplacefame.blogspot.com/2011/09/personalizar-area-dos-comentarios.html?showComment=1315701600210#c7954805431439381202
Que legal o tutorial, parabééns Emilly !!
O Blog vai bombar tenho certeza, kkk
Beijinhoos
MUITOMUITOMUITO ÚTIL! Eu nunca havia conseguido personalizar direito, mais agora eu consegui o/ Ótimo este tutorial '0'
http://senhoritaliberdade.blogspot.com/
Não deu certo :/
Enfim , o blog tá maravilhoso :)
Parabens de verdade .
Visita ? Almostfashion-blog.blogspot.com
não consegui! =/
Bjs,
http://blogportalteen.blogspot.com
"mais" nem todos?! MAS nem todos!!
Como colocaram este tipo de Atributtion? Eu adorei!!
pinkpimenta.blogspot.com
Ótimo tutorial , porém em outros estilos como
o meu que fiz do zero não usei algumas tags que
mostra .
www.umtroll.com
Amei. Muito obrigada.
me ajudou abstante
Amei, me ajudou mt!
AMEI
Postar um comentário