quarta-feira, 7 de dezembro de 2011

Área dos comentários já personalizada!

É isso mesmo que vocês leram no título  do post ''Área dos comentários personalizada!''. Gente eu já havia lido alguns tutoriais ai pela net sobre o assunto e confesso que pra quem não é muito fã de HTML iria acha uma chatice total !! 
Foi no blog Menina Nerd (créditos) que encontrei um tutu um pouco mais curto e super bem explicado >clique para ver< quem quiser algo mais personalizado vá lá. 
Eu trouxe aqui para o blog cores já personalizadas (estilo kawaii) *o* tinha que ser né! Mais são editáveis ok! É hora de se livrar do fundo cinza hauhauahuahconfira o antes e o depoisMini gif 161
É muito simples e como eu disse as cores podem ser editadas, quem estiver interessado clique em leia mais
Aconselho que baixe seu modelo completo, caso algo dê errado você tem uma cópia né! Ou copie o código do seu template no bloco de notas.

1° Vá no seu HTML dê ctrl + F e procure por: #comments {

Agora apague o trecho destacado e mais o código que o acompanha:
#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;
}
 E no Lugar cole:
/* Comments
----------------------------------------------- */
#comments h4 {
margin: .75em 0;
}
#comments-block .comment-author {background: #FFEFD5;
margin:.5em 0;
}
.comment-author a{
margin:0px;
color:#FF1493;
}

#comments-block .comment-body {background: #F0FFFF;
margin: -.5em 0 0px;
}
#comments-block .comment-footer {background: #FFFAFA;
margin:-.25em 0 2em;
}
.comment-timestamp, .comment-timestamp a {
color:#DCDCDC;
font-size:10px;
}
#comments-block .comment-body p {
margin:-.5em 0 0px;
}
Quem curtiu as cores que eu já coloquei pode salvar e ir conferir! quem quiser personalizar continue lendo>
Mini Gifs Personalizando as cores, nos trechos:                 acesse: (tabela de cores)

#comments-block .comment-author {background: #FFEFD5; = Se refere a cor da barra de quem escreveu o comentário
color:#FF1493; =Se refere a cor do nome de que escreveu o comentário.
#comments-block .comment-body {background: #F0FFFF; = Se refere a a cor da barra principal do comentário
#comments-block .comment-footer {background: #FFFAFA; = Se refere a barra do dia, mês, ano e hora em que o comentário foi postado
color:#DCDCDC; = Se refere a cor 
font-size:10px; = Se refere ao tamanho da fonte
Bom gente é isso espero que tenham curtido! Beeijos da Jackie

59 comentários :

  1. Nossa sem comparação o antes e depois ..
    Fica 100% mais lindo a are dos comentarios personalizada e sem fala que fica com a cara do Blog ! Da ate mais vontade de comentar
    otimo tutu amigaa
    Bjs v

    ResponderExcluir
  2. Finalmente me livrei do fundo cinza :f:

    http://teen-dream-td.blogspot.com/

    ResponderExcluir
  3. Aii jackie que show o tutorial ^^
    Bjs Dry
    sweetcandyup.blogspot.com

    ResponderExcluir
  4. adoreii oo tutoo * vou tentar fazer aquui *

    bjinhus

    ResponderExcluir
  5. Realmente ficam mt fofos eu ja usei assim, agora modifiquei de novo to usando um mais básico kkk *-* http://ianapaulinhaaaa.blogspot.com/ dps passa lá amor!

    ResponderExcluir
  6. Eu adoro ver essas modificações nos blogs. Também gostaria de saber mecher com html, mas infelizmente não sei :/

    @wendyelmb
    http://tecido-doce.blogspot.com/
    http://cerejadeneve.wordpress.com/

    ResponderExcluir
  7. Ai como eu amo seus tutos :k: São sempre tão úteis. Eu adorei esse *-* Principalmente por ser kawaii. Jackie, queria saber se você já fez um tuto sobre como colocar esses emoticons fofinhos nos comentários? :j: Quando tiver um tempinho pode fazer? RSRS. Beijos linda :l:

    http://blog-milk-shake.blogspot.com/

    ResponderExcluir
  8. jackie vs consegui ... mapear pra mim ?
    bjinhus

    ResponderExcluir
  9. Ficou uma gracinha!

    http://blog-dreamygirl.blogspot.com
    @paulaaraujodf

    ResponderExcluir
  10. Adorei o tutorial super util , você sempre arrasa.
    Bjs Dry
    SWEETCANDYUP.BLOGSPOT.COM

    ResponderExcluir
  11. Amei o post Jackie, passa la no blog q tem um selo pra você, tá? http://vnmp.blogspot.com/2011/12/parceria-e-selo-novos.html

    ResponderExcluir
  12. oi lindinha,amei a dica e vou agora mesmo tentar fazer no meu,super fofo,kiss tou seguindo segue de volta? kiss
    http://dezapaixao.blogspot.com/

    ResponderExcluir
  13. Muito legal ja adc no meu blog
    Jackie c puder faz um post d tuto d como colocar para aprovar o comentario
    bjoos
    no URL do blog :

    http://sweetdream.blogspot.com

    ResponderExcluir
  14. Fundo cinza nunca mais!!! Adorei o tutorial Jackie! Beijos

    www.meninacute-s2.blogspot.com

    ResponderExcluir
  15. Ameei o tutu Jackie mas não consegui fazer.. não sei porque a maioria dos tutus que tento não funciona..

    Bjok´s, Fraan

    ResponderExcluir
  16. JACKIE PELO AMAOR DE DEUS ME AJUDAA! :f:
    EU TENTO ACHAR ESSE CÓDIGO DE COMMENTS FAZ MUITO TEMPO E EU JÁ PROCUREI NÃO TEM NO MEU HTML!!
    o que eu faço?
    Beijo
    Duda

    ResponderExcluir
  17. desculpa te encher de novo, mas duas perguntinhas agora: Vc acha que eu devo mudar meu template pro viagem? Se não, onde eu acho o código de substituição?
    Beijo
    Duda
    (Jackie, valeu, como vc me ajuda heem guria..)

    ResponderExcluir
  18. Jackie, obrigada pelas dicas, eu mudei o modelo pro viagem, eu consegui os tutos, porém perdi o que eu já tinha feito, esse tuto eu não consegui fazer fiz tudo certinho, te juro, e não deu certo ):, e agoraa?
    Beijo
    Duda

    ResponderExcluir
  19. a área tava cinza, sei lá o que aconteceu e ficou branca!!!!!!!!!!!!!!!

    ResponderExcluir
  20. Adorei!
    muito útil e consegui me livrar daquela barra cinza :k

    ResponderExcluir
  21. aiii muito obrigado jackie meu salvou minha vida kkkk :h:
    Mas será que você podia fazer um tutorial ensinando a como colocar esses emoticons fofos pleasee :j:

    ResponderExcluir
  22. @Luana Caroline aqui linda: http://isjackiezzdream.blogspot.com/2011/08/cute-emoticons-nos-comentarios.html

    :l:

    ResponderExcluir
  23. Ai brigadinhuuu... :h:

    olha tenho até inveja de vc meninaa vc arassa!!!
    bjjj lindaa ♥ :l:

    ResponderExcluir
  24. brigada fofa :d: ficou lindinho :k:

    ResponderExcluir
  25. aqui funcionou tbm não. Só o que mudou foi o fundo que era cinza agora tá branco

    ResponderExcluir
  26. Apertei o ctrl+f e procurei por #comments { e apareceu que não existia nenhuma palavra existente ali!!:i:


    help please

    ResponderExcluir
  27. no meu não funcionou :a: mais pelo menos saiu o fundo cinza :f:

    ResponderExcluir
  28. Jack, eu não consigo mudar a barra onde fica o nome do autor do comentario. sera que você saberia me dizer se tem alguma tah para mudar a cor de la, ou alguma tag que mude apenas a cor dos textos nos comentarios. Obrigado.(e você continua linda =D)

    ResponderExcluir
  29. Não consegui, amor :k:
    Não sei pq não dá certo :j:
    Passa? Lindo demais aqui, óh :l:
    Chêrim, Lolita <3
    loladelight.blogspot.com

    ResponderExcluir
  30. Nossa! Fica lindo, muito diferente daquela área simples e cinza, ficou mt perfeito, ameei, na verdade, smp estou acompanhando o JD e smp tem coisas novas e fofas, beeijos amor.

    http://meninatrech.blogspot.com.br/

    ResponderExcluir
  31. Eu estava procurando esse tuto *u* perfeito!

    Quando eu vi o seu comentário no meu blog quase surtei auhashuauaus eu já conhecia o seu, só não estava seguindo.

    Aí tipo fica né ''a Jackie no meu blog???'' kkkk
    Bjs

    Sweet Mulberry:
    http://meublog-jaque.blogspot.com.br/

    ResponderExcluir
  32. socorrrooo a area de comentario ficou toda branca D: não tem um jeito mais facil de personalizar??



    By: Bruna :n:

    ResponderExcluir
  33. @. Mais fácil que isso não conheço (:

    ResponderExcluir
  34. Não consegui achar aquele codigo, amor
    ME AJUUDA

    Chêrim,Kemily <3

    http://the-girlsdiary.blogspot.com.br/

    ResponderExcluir
  35. Ameeei! seu blog está maravilhoso
    flor, passa no meu blog? acabei de criar espero que goste :h:
    http://lacodecabelo.blogspot.com.br/ :m:

    ResponderExcluir
  36. & ' nao acho o codigo eu vejo vejo e nao acho :e:

    ResponderExcluir
  37. http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-00http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif5.gifhttp://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif

    ResponderExcluir
  38. Nhaaaa eu procurei no html do meu blog isso #comments { só que não achei =/ usei o ctrl f e também não achei, a tá super ruim das pessoas comentarem por que tá pedindo um monte de coisas e assim faz as pessoas desistirem de comentar =/

    ResponderExcluir
  39. Olaa,me desculpe,mas a maioria dos tutu do seu blog,nao dao serto no meu,inclusive este,fis tudo certinho mas continua com o mesmo fundo orroroso,por favor me ajude!!!
    www.camila-brothers.blogspot.com

    ResponderExcluir
  40. Fica muito fofo mas tem o botão de responder? ):

    ResponderExcluir
  41. Olá querida, eu fiz esse tutorial no meu blog, deu tudo certo, mais as imagens dos perfis não está aparecendo, poderia me mostrar um tutorial para me ajudar?
    Obrigada

    ResponderExcluir
    Respostas
    1. Em blogs de testes (fechados para o público), normalmente não aprecem mesmo...

      Mas se vc fez isso em seu blog aberto e mesmo assim as imagens não estão aparecendo é pq provavelmente vc fez algo errado tá?

      Excluir
  42. #Perfect
    http://reviewinmakeup.blogspot.com.br/

    ResponderExcluir

.