Personalizando os comentários

23.6.12 | | |
Yo meus Mustache Lovers ~
Eu ja fiz um post com praticamente o mesmo título, mais ensinando a colocar negrito, italico, sublinhado e links na hora de comentar , mais hoje vou ensinar personalizar a área dos comentarios no blog. Antes que você pergunte quais vão ser as alterações, aqui está:
Vamos começar retirando o fundo cinza!
Vá no seu HTML,e procure por #comments.perceba que irão existir mais de um resultado.
logo abaixo, irá aparecer alguma coisa assim:
#comments {
 background: #cccccc  no repeat scroll;
padding: 20px;
}
Caso não esteja assim, copie esse codigo e substitua o seu atual. 
Troque o que está em negrito pela a cor que você queira para o fundo. eu recomendo usar branco {#FFFFFF}ou nenhuma cor {transparent}.

Agora vamos personalizar ou retirar aquela linha!
procure por .comments .continue { .
Você vai achar mais ou menos isso:

.comments .continue {
  border-top: 2px solid $(post.title.text.color);
}

Faça as seguintes personalizações:
Onde esta escrito solid , substitua por algum dos codigos
 dashed {tracejado --}
dotted {pontilhado ..}
double {linha dupla ==}
none {ela vai ser retirada}

ou nao personalize, caso queira deixar ela normal.
modifique o numero 2px de um modo que te agrade, isso será a grossura da linha.

Agora o avatar...
procure por .avatar-image-container {.
você vai achar isso,ou coisa parecida:
.avatar-image-container {

margin: .2em 0 0;
Agora vou mostrar a vocês uns estilos, vocês vão escolher um, e vão colocar o codigo abaixo dele antes da chava fechar {depois de margin: .2em 0 0;}:
-webkit-border-radius: 20px;

-moz-border-radius: 20px;
border-radius: 20px; 

 -webkit-border-top-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topright: 30px;
-moz-border-radius-bottomleft: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
E pronto, você acabou de personalizar seus comentarios ! espero que tenham gostado, e que ele seja util :)





18 comentários:

  1. Muitoútil!

    Você tinha razão, eu atualizei o gadget e já dá para colocar os afiliados em ícone :D

    Muito obrigada! ^^

    Bjs,
    http://sorvete--de--morango.blogspot.com/

    ResponderExcluir
  2. Ebaa *o*
    tu me passa o código pra eu instalar, então :)

    ResponderExcluir
  3. Awn, fica muito legal não é? Bjão Dede e foi um prazer fazer seu Layout viu? :)

    ResponderExcluir
  4. otimo Aqui - Flor
    adorei o tuto ...
    passa la ?
    http://smileretro.blogspot.com.br/

    ResponderExcluir
  5. Fica muito fofo =>.<=
    www.fashionemcores.com

    ResponderExcluir
  6. Útil, mas meio complicado, depois vou tentar fazer.

    Avisando: Seguidora 250 \o/

    Pergunta qual é o nome do efeito que você usa na sua elite? Muito Lindo *-*

    Mania de Complicação!

    ResponderExcluir
  7. Muito legal! Adoro o efeito das imagens, já uso no meu blog! *-*

    Beeijos :*
    http://mikicandy.blogspot.com.br/

    ResponderExcluir
  8. Eu amei, mesmo. Em breve volto aqui para copiar o código das fotos, pois quadradinho é tão sem graça kkk.
    Beijocas da ~Lari <3

    ResponderExcluir
  9. Te coloco nos aff ok?
    Crystalbow.blogspot.com

    ResponderExcluir
  10. Ficou bem mais bonito assim! ótimo tuto seguindo aqui. >.<

    Rawwr --> www.conectadablog.com Beijoooo!! *-*

    ResponderExcluir
  11. Uau , ficou muito lindo seu novo lay *O* apaixonei!
    http://qeseja.blogspot.com.br/
    (tenho novidades)

    ResponderExcluir
  12. adooooreiii o tuto vou usar em breve !

    amei este blog ! estou super seguindo agora !!
    se gostar do meu blog segue ele de volta , meu blog vai estar sempre de abas abertas para vc !!!
    beijos da @NathaliaGuerra_

    http://louca-atitude.blogspot.com

    ResponderExcluir
  13. Já coloquei o Diario de uma menina nerd lá no two teens como afiliados ;D

    http://t-w-o-teens.blogspot.com.br/

    ResponderExcluir
  14. Adoreii o tuto =]

    #bezoos~~~> perfeitosmile.blogspot.com

    ResponderExcluir
  15. Oi , seu blog é muito lindo viu flor.
    Parabens , to seguindo já ...
    Queria te pergunta , se eu posso postar esse tutorial lá no blog ?
    Com os creditos , claro .
    Aguardo a resposta , beijos ;

    http://blog-sweetimagination.blogspot.com.br/

    ResponderExcluir
  16. Adorei o tuto *-* Ajudou-me muito ^^
    Os comentários ficam mais fofos *o*
    Beijinhos,
    http://blog--crazy-girl.blogspot.pt/

    ResponderExcluir

Por favor, mande apenas seu comentário SOBRE O POST e o link. se alguem pedir tipo assim : "nunca teria coragem.Agora vou te convidar a conhecer meu blog, eu ja estou seguindo se puder retribuir rs linkdoblog.com " ISSO ME IRRITA MUITO CARA! por isso eu nem visito. eu retribuo todas as visitas, apenas deixe o link por favor! obg