domingo, 15 de abril de 2012

Cute área dos comentários

Tumblr_l9at1og1wb1qadg5do1_500_large
Hooy gente mais alguém ai tá sentindo muita preguiça nesse domingo? -_-kkkkk... Hoje eu vou ensinar a vocês como deixar a área de comentários personalizada igual a aqui do blog, veja:
O código foi pego no blog  Cherry Bomb! (então créditos)  eu apenas personalizei as cores, modifiquei algumas coisinhas pra disponibilizar pra vocês 

ATENÇÃO:
Antes de começar o tutorial eu recomendo que vocês façam em um blog de testes primeiro ou baixe seu modelo para evitar possíveis transtornos! 

Vá no seu HTML e procure por: #comments e apague todo o código que o acompanha: (Mas caso você tenha sua área de comentários modificada por este tutorial www é só substituir o segundo código).


#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 esse:

#comments h4 { /* Este é titulo do formulario, onde mostra "X Comentários" e "Postar um comentário" */
margin:0;
color:#ff4d8e;
font-family: Lucida Handwriting;
font-weight: normal;
font-size:26px;
text-shadow: none;
}
#comments-block .comment-author { /* O espaço do nome de quem comentou */
background: #FFF; /*Cor de fundo do nome de quem comentou*/
color: #8fddf6; /*Cor da fonte*/
font-family: Trebuchet MS; /*Nome da fonte*/
font-size:16px; /*Tamanho da fonte*/
border-bottom: dashed 1px #8fddf6; /*Borda de baixo do nome*/
padding: 5px;
margin:.5em 0;
height:30px; /*Altura do espaço do nome*/
font-weight: normal; /*Peso da fonte. Mude de normal para strong se quiser o texto em negrito*/
}
#comments-block .comment-author a:link {
text-decoration: none;
}
#comments-block .comment-body { /* Area do texto do comentario */
background: #FFF8DC; /*Fundo da área do comentário*/
margin-top: -2px; /*Margem externa do topo*/
padding: 5px;
font-family:'Oleo Script', cursive; /*Nome da Fonte*/
font-size: 15px;/*Tamanho da fonte*/
color:#696969; /*Cor da fonte*/
width: 480px; /*Largura da área dos comentários, altere de acordo com seu blog*/
/*Bordas arredondadas da área do comentário*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*Fim do código da borda arredondada*/
}
#comments-block .comment-footer {
margin:7px 0 2em;
line-height: 1.4em;
font-size: 65%; /* tamanho da fonte da data do comentário */
text-align: right; /* alinhamento da data do comentário */
letter-spacing:.1em;
}
#comments-block .comment-footer a:link{
background: #FFFAFA; /*Fundo da data do comentário*/
}
.deleted-comment a {
margin: 10px 0 2em;
font-style: italic;
color: #ccc; /*** cor do recado de 'comentário deletado' ***/
}



O próprio código já diz o que pode ser feito né? 
Dicas, nos trechos: border-bottom: dashed 1px #8fddf6; /*Borda de baixo do nome*/ você pode alterar o tipo de borda conferindo este link (www).
Vocês tbm podem alterar as fontes usando este tutorial (www).
Agora procure por: /* Content perto deste código localize body { e cole o código abaixo ANTES de body { .


div.avatar-image-container {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
box-shadow: 1px 1px 3px #a7a7a7; /*Sombra do avatar*/
margin-top: -2px; /*Margem externa do topo, para alinhar o avatar*/
}
div.avatar-image-container img {
display:none;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
/*Efeito de quando passar o mouse em cima da foto*/
div.avatar-image-container img:hover {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
opacity: 0.8; /*Opacidade*/
-moz-opacity: 0.8; /*Opacidade*/
-webkit-opacity: 0.8; /*Opacidade*/
}
div.avatar-image-container img.delayLoad {
display:block;
}


Prontinho gente agora é só salvar ;D 
:iconcutepandaismybf:
Confira outros links que vão te ajudar a personalizar sua área de comentários:
- Substituir postar um comentário por uma imagem (www)
- Avatares em comentários anônimos (www)
- Cute emoticons (www)
Bye gente 

69 comentários :

  1. Ameii o tuto ja to usando kkk
    flor ajuda a denumciar esses blog http://wwwmundodakiki3.blogspot.com.br/

    ResponderExcluir
  2. muito bom o tutorial,me ajudou muito,aliás seu blog é lindo!
    :h:

    ResponderExcluir
  3. Amiga seus tutu's FOFOS .. realmente sua area de comentários ta Linda de mais *---*
    Beijoos blogueira preferida !

    ResponderExcluir
  4. Ótimo tutorial, a área dos comentários certamente ficará muito cute.
    http://i-teenbr.net.tc

    ResponderExcluir
  5. Jackie não funcionou!

    ResponderExcluir
  6. Jackie só funcionou com janela pop up :(

    ResponderExcluir
  7. Lindo demais Jackie! http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif
    doce-meiguice.blogspot.com

    ResponderExcluir
  8. omg, 1° vez q consigo fazer essas coisas de html *-* adoreeei. logo, logo eu aprendo mais ^^

    ResponderExcluir
  9. :d: adoroo seu blog!
    foi minha inspiração pra criar o meu!!!
    queria muito que vc seguisse:
    morangocom.blogspot.com
    obrigada jackie!
    muito boom o tutorial! acho que vou tentar!
    bjss floor!

    ResponderExcluir
  10. super jackie sempre arrazando em? beijos

    cherryseublog.blogspot.com

    ResponderExcluir
  11. que pena Anônimo mais aqui eu n uso janela pop up e deu certo. acho que isso vai depender do template de cada um (:

    ResponderExcluir
  12. deu certo!!!
    brigada! ficou lindo!
    morangocom.blogspot.com

    ResponderExcluir
  13. jackie super amei receber um elogio seu,é uma honrra pra mim !

    ResponderExcluir
  14. Ai que fofo... eu vou tentar fazer. bjs
    http://renata-diariodeumaadolecente.blogspot.com.br/

    ResponderExcluir
  15. Selinho para vc, minha diva Jackie! http://candylinee.blogspot.com.br/2012/04/ganhei-um-selinho.html

    ResponderExcluir
  16. É LINDO essa area dos comentários amei. Arrasou mais uma vez Jackie
    Caça ao tesouro: http://cute-bii.blogspot.com/2012/04/caca-ao-tesouro.html
    Blog: http://cute-bii.blogspot.com

    ResponderExcluir
  17. Ameei esse tutorial.Estou usando um tutorial que tira só o fundo CINZA e deixa uma cor rosa que coloquei lá.
    Na próxima vez vou usar esse daqui.
    BEIJO JACKIE ZANINI MINHA DIVA
    http://blog-moderninho.blogspot.com.br/

    ResponderExcluir
  18. Muito fofo esse seu estilo de comentários (eu adoro), até me inspirei um pouco nas cores (vc viu lá?)

    Jackie!! achei meu celular kkk (tava no carrinho do baby kk), adorei seu recadinho, ia responder (é aquele numero mesmo? 5192...), obrigado linda!

    bjãoo

    ResponderExcluir
  19. linda eu gostaria de saber aonde esta escrito o que cada coisa faz no código é para apagar ou deixar. me perdoe pela boba pergunta. bjs

    ResponderExcluir
  20. Obrigado por seguir meu blog.
    Ai que triste não deu certo no meu. :a:
    O que será que fiz de errado?? :m:

    ResponderExcluir
  21. O meu não deu certo :a:
    Mas mesmo assim,ótimo tutorial :h:
    Bjs ;*
    letsdream-br.blogspot.com

    ResponderExcluir
  22. Jackie,amei foi o primeiro código que funcionou no meu blog *--*

    Plágiei quase tudo dos seus coments kkkk

    passa lá no blog e diz oque achoou?
    te coloquei como parceira depois me passa a pagina das suas parcerias?
    beijos
    caandydream.blogspot.com

    ResponderExcluir
  23. Jackie, nao deu certo, tipo, nao ficou com o fundo amarelinho o comentario e a foto nao ficou redonda. :m:

    ResponderExcluir
  24. No meu blog de testes funcionou, mas no meu blog mesmo não. E o template é o mesmo O.O
    Não entendi porque. Mas valeu a tentativa.

    ResponderExcluir
  25. Não funcionou :(!
    Não ficou nada'
    Beijos"
    Jackie você sabe porque?

    http://garota-preciiosa.blogspot.com

    ResponderExcluir
  26. Jaaack, flor, me ajuda, é que tipo, quando eu coloco algum gif no post fica aparecendo o quadrinho dele, fica muito feio, e eu queria que ficasse igual o seu, só o gif mesmo. Olha só no meu blog de teste como que fica (horrível) http://dicasmanupink.blogspot.com.br/2012/07/oooi-lindas.html :( como fasso para que não fique assim ?

    www.nosnopc.blogspot.com

    ResponderExcluir
  27. nao conseguir fazar ;/

    mas adoreiiii, achei tao legal ;~
    beijos
    desabafoo1.blogspot.com.br

    ResponderExcluir
  28. Jackie eu to fazendo um templete free no meu blog, ee nao deu certo!!! Não aparece as modificações!

    ResponderExcluir
  29. Oooi jackie, eu blog tem uns posts legais e me ajuda muito, masss! Seu blog ja foi mais bonito, mais cute e beem mais kawaii CADE O JD QUE EU CONHECIA CADE AKELE BLOG MAIS KAWAII DO MUNDO???? CADE|???????

    ResponderExcluir
  30. Muito bom o tutorial Jackie!funcionou :k:

    ResponderExcluir
  31. jackie eu tentei colocar mais não saiiu como deviia e eu fiz tudo direitinho.

    ResponderExcluir
  32. Jackie, querida,como foi que você colocou esses corações abaixo, do nome de quem comentou... poderia ajudar? :h:

    ResponderExcluir
  33. @Laura É só substituir esse trecho

    border-bottom: dashed 1px #8fddf6; /*Borda de baixo do nome*/

    por um código de imagem (:

    ResponderExcluir
  34. Fofa, meu template é o Kawaii pink. n achei oq era pra achar. me ajuda? :(

    ResponderExcluir
  35. Primeira vez aqui no seu cantinho! Adorei! bjss

    http://www.rosanautas.com/

    ResponderExcluir
  36. Jackie, por favor, ajuda a gente! Nós anônimos estamos aqui, tentando fazer com que você conserte o tuto, please!
    P.S. amo aqui

    ResponderExcluir
  37. @Anônimo Mas amr o tutu não está errado :(

    Beijus!

    ResponderExcluir
  38. @Jackie Zanini Jackie, qual template vc usa? Travel, etc?

    ResponderExcluir
  39. Olá amei seu blog,ele é muito fofo!Eu amei a área dos comentários,em que tem esses coraçoes,e nao estou conseguindo fazer isso no meu,continue postando dicas,sempre vou dar uma olhada!bjinhos

    ResponderExcluir
  40. Adorei,legal demais.
    http://santosdiabinhoscarrossel.blogspot.com.br/

    ResponderExcluir
  41. Jackie Eu peguei so os seus emoticons tem algum problema? voce q criou ou eles ja existem responde pf!! dozeemeio.blogspot.com.br

    ResponderExcluir
  42. oooi Jackiee...
    Eu fiz tudo como tava mandando no tutu, mas não deu certo, me ajuda, please...

    ResponderExcluir
  43. O seu blog é uma porcaria,me desculpe,mas todas as tutorias que tento não da serto,e conheço muita gente que tamebm não consegue,vc nem explica direito!!

    ResponderExcluir
    Respostas
    1. Amr posso dar uma dica?
      Não acesse meu blog - vc não é obrigado(a).

      E me desculpe você, mas se não está entendendo os tutorias tá faltando inteligência aí né? Dou tudo de mão beijada, códigos prontos, mais do que isso só seu fizer pra vc né?!

      #acordapravida!

      Excluir
    2. Concordo com você Jackie, ninguém mostra a cara, cadê que acessa com a conta verdadeira?

      Excluir
  44. Adorei o tutorial, mas vi a sua área de comentários atuale achei mais linda ainda! Tem algum link de tutorial pra indicar? Estou louca atrás de um e já pesquisei aqui e não achei :/
    Beijos Bru.

    ResponderExcluir
  45. Muito bom esse, usei em um dos layouts que criei para uma mocinha!

    Ei, poderia fazer um tutorial nos ensinando direitinho como mexer no novo HTML do blogger?

    Eu sei bem pouquinho, ainda está bem confuso.

    *-* Obrigado.

    http://universalpentecostal.blogspot.com.br/

    ResponderExcluir
  46. com esse novo HTML não acho nada e não conseguir achar #comments. Ajuda?

    ResponderExcluir
    Respostas
    1. Seu modelo é o viagem??
      (só testei no viagem, os outros são códigos diferentes)

      Excluir
  47. Jackie será que tem como você ensinar a fazer a área de comentários igualzinha à sua, só no ponto de mudar as cores. Já tntei me aventurar no HTML pra ver se conseguia mudar um modelo um pouco parecido pra ficar como esse mas não deu certo =(. Adoro o modelo dos seus comentários...

    ResponderExcluir
    Respostas
    1. Aqui guria >> http://www.papogarota.com.br/2013/10/como-personalizar-os-comentarios-do.html

      Beijos (:

      Excluir

.