10/10/2012

Personalização da área dos comentários

E a pedido de duas pessoas,hoje ensinarei a fazer uma área dos comentários igual ao do Bang Teen.Ja vou avisando que se você usar,credite porque se eu pegar neguinho com esse tipo de área sem ter dado créditos eu vou denunciar,porque deu trabalho inventar isso e deu trabalho elaborar a postagem.O post é grande mas da pra entender certinho.
Eu usei o código do Cherry Bomb e fui modificando,então ai estão os créditos!
Vamos la...

Aperte ctrl+f e procure pela tag de #comments.
Irá aparecer esse 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;
}


Então cole o código abaixo no lugar deste.


/*Area dos comentarios por bangteen.blogspot.com/*
#comments h4 { /* Este é titulo do formulario, onde mostra "X Comentários" e "Postar um comentário" */
margin:0;
color:#ee6363;
font-family: Century Gothic;
text-align: center;
font-weight: normal;
font-size:25px;
text-shadow: none;
}
#comments-block .comment-author { /* O espaço do nome de quem comentou */
box-shadow: inset 0px 0px 20px #fff; /* sombra por dentro */
background: #D5E2DC; /*Cor de fundo do nome de quem comentou*/
border-radius:20px 20px 0px 20px; */ borda arredondada */
color: #fff; /*Cor da fonte*/
font-family: Century Gothic; /*Nome da fonte*/
font-size:16px; /*Tamanho da fonte*/
border-bottom: dashed 1px #31798C; /*Borda de baixo do nome*/
padding: 5px;
margin:.5em 0;
margin-bottom: 2px; /*margem de baixo da área A*/
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: #fff; /*Fundo da área do comentário*/
margin-top: -2px; /*Margem externa do topo*/
box-shadow: inset 0px 0px 20px #fff; /* sombra por dentro */
padding: 5px;
font-family:Century Gothic,Arial; /*Nome da Fonte*/
font-size: 12px;/*Tamanho da fonte*/
color:#000; /*Cor da fonte*/
width: 499px; /*Largura da área dos comentários, altere de acordo com seu blog*/
/*Bordas arredondadas da área do comentário*/
border-radius:0 0 20px 20px; */ borda arredondada */
-moz-border-radius: 0 0 30px 30px; */ borda arredondada */
-webkit-border-radius: 0 0 30px 30px; */ borda arredondada */
/*Fim do código da borda arredondada*/
}
#comments-block .comment-footer {
margin:7px 0 2em;
line-height: 1.4em;
font-size: 95%; /* tamanho da fonte da data do comentário */
text-align: left; /* alinhamento da data do comentário */
letter-spacing:.1em;
}
#comments-block .comment-footer a:link{
background: #fff; /*Fundo da data do comentário*/
}
.deleted-comment a {
margin: 10px 0 2em;
font-style: italic;
color: #000; /*** cor do recado de 'comentário deletado' ***/
}
Dê ctrl+f novamente e procure por /*content .Abaixo dessa tag você vai encontrar o body { .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;
}


Não se esqueça de deixar na opção Abrir em janela Pop-up.


É isso,espero que entendam......Beijos

55 comentários:

  1. Adorei ! o Resultado fica super divo *-* Beijos ♥


    your-smile-oficial.blogspot.com

    ResponderExcluir
  2. Fica lindo! Eu adorei :)


    Beijos,
    Sim Senhorita (Clique no perfil)

    ResponderExcluir
  3. Nossa muito boom! Adorei :)
    cute-bii.blogspot.com

    ResponderExcluir
  4. Adorei fica super lindo...Vc quer participar do concurso lá no blog?

    ResponderExcluir
  5. Parabéns pelo tutorial. A área personalizada fica bem linda e bem mais interessante =) Ah, o Bang Teen foi finalista do concurso, sabia? Passe lá no blog e leia o último post.

    Beijos,
    Anna
    garota-queen.blogspot.com

    ResponderExcluir
  6. Acho lindo essa sua área dos comentários Luiz, quando tiver um tempinho dou uma testada no tutorial. Um beijo, e o resultado do concurso já saiu.

    World-cutest.blogspot.com.br

    ResponderExcluir
  7. Puxa, que incrível você mesmo criou o código! *o* Parabéns, o tuto ficou muito bem explicado, adorei! A área dos comentários daqui é muito lindo! E adorei estar no post! rs :33

    Beijinhos, Paula! ♥
    ~Sweet Makeup~
    (clica no perfil pra visitar meu blog)

    ResponderExcluir
  8. Essa area dos comentários tá super fofa e caprichada!Só sou muuuito preguiçosa com essas coisas,mas vou tentar fazer! haha
    Kisses,seguindo!http://www.cotidianodeumabarbie.blogspot.com.br/

    ResponderExcluir
  9. Fica lindo, amei o tutorial. E você sumiu hem. Mas mas isso não amor =(

    Beijos,
    Adolescentes do oposto (blog no perfil)

    ResponderExcluir
  10. Putz ! Amei ! Ficou liindo !
    ~ my-dreams-perfects.blogspot.com

    ResponderExcluir
  11. Adorei o jeito que você personalizou os seus comentários Luiz, é bem lindo esse efeito da sombra por dentro! Eu também peguei o mesmo tutorial do CB e fui personalizando algumas coisinhas pra deixar do jeitinho que está (:

    Beijos :3
    quinzedilemas.blogspot.com

    ResponderExcluir
  12. Amei o tutorial fica parecido com um tumblr eu acho lindo

    californiadreams2.blogspot.com.br

    ResponderExcluir
  13. belo tutorial, o resultado fica perfect!!!

    http://blogclubeteen.blogspot.com.br/

    ResponderExcluir
  14. Que fofo, muito lindo, talvez no próximo Lay eu use. Amei aqui, seguindo.

    cherry-blog-official | blogspot.com.br.
    Beijos.

    ResponderExcluir
  15. Sim, você vai pra votação final juntos com os outros 4 blogs. Os que ficaram com 29 pontos irão pra outra enquete diferente, mas todos terão uma semana pra pedir votos ^^

    Beijos,
    Anna
    garota-queen.blogspot.com

    ResponderExcluir
  16. Vou tentar fazer um no meu blog porque, normalmente, não consigo personalizar a área dos comentários. TTwTT'
    //Nyaah ^^ Seu blog é MUITO perfeito! Já estou seguindo. Kissus!

    anonlypossibility.blogspot.com

    ResponderExcluir
  17. Amei o resultado! Vou usar no próximo lay!

    Bjs, bjs ;*
    jaguarsedictions.blogspot.com

    ResponderExcluir
  18. Como todos ja disseram, o resultado fica mesmo super legal :)
    Saudades daqui ^^
    Abraço!
    http://blog-part-of-me.blogspot.com.br/

    ResponderExcluir
  19. Pode começar a pedir seus votos! As enquetes estão na barra lateral!

    Beijos,
    Anna
    garota-queen.blogspot.com

    ResponderExcluir
  20. Ain' ótimo tutorial! Super pratico e lindo ;D


    blog-allthelovers

    ResponderExcluir
  21. Fica lindo o resultado, teu blog é muito fofo :3
    Aceita afiliação?Já estou seguindo.
    Beijos,blog no perfil.

    ResponderExcluir
  22. Fica lindo o resultado, teu blog é muito fofo :3
    Aceita afiliação?Já estou seguindo.
    Beijos,blog no perfil.

    ResponderExcluir
  23. É lindo esse efeito na área de comentários! Parabéns pelo tutorial, é ótimo!!

    Beijos!
    Garota Vertigem (blog no perfil)

    ResponderExcluir
  24. Este comentário foi removido pelo autor.

    ResponderExcluir
  25. Muito fofa a personalização, mas no lay atual do meu optei pela área dos comments mais simples! ^^
    Andei sumida, mas agora voltei!
    Malikisses Xx

    EII, PSIU! Rolando concurso no meu blog! CORRE LÁ ====> Meu Jardim secreto

    ResponderExcluir
  26. Que fofo. *-*

    detalhesdaamooda.blogspot.com.br

    ResponderExcluir
  27. omg fica muito perfeito *-------*

    rabisqueamesa(.blogspot.com.br)

    ResponderExcluir
  28. Adorei o tutorial flor,ajuda muito a deixar o blog mais com a sua cara! hehe beijoss

    depoisdovento.blogspot.com

    ResponderExcluir
  29. Adoro o resultado, ficou lindo aqui no Bang Teen! Deixou o blog mais "harmônico".
    Beijos,
    depoisdeveneza.blogspot.com.br

    ResponderExcluir
  30. Amei o resultado ! Beijos.

    Sweet Imagination

    ResponderExcluir
  31. Amei o tuto , vou usar no proximo design do blog , amei o seu blog !! Seguindo aquiii
    beijooos
    cupcakederendas.blogspot.com

    ResponderExcluir
  32. Heey,amor adorei o seu blogger, e super lindo , adorei mesmo !
    Amor to seguindo o seu blogger, sera que voce pode seguir o meu tambem ?
    Eu espero anciosamente voce no meu blogger,!
    world-commentsgirls.(blogspot.com.br) -> TIRE OS PARENTESES OU ENTRE PELO MEU PERFIL

    ResponderExcluir
  33. Amei de mais! Fica lindo!
    candy-grape

    ResponderExcluir
  34. Linda sua area de comentários.

    blogdapaulla.blogspot.com
    @deardiarioblog

    ResponderExcluir
  35. Adorei, vou tentar fazer (; http://1mundoteen.blogspot.com.br/

    ResponderExcluir
  36. Sua área de comentário é linda! Deixa eu perguntar, queria saber se aceita afiliação.
    Bjs bom domingo!
    upgrade-br.blogspot.com.br

    ResponderExcluir
  37. Luiz,lembra de mim? Então você ganhou uma promoção do meu blog, no entanto a camiseta foi desviada só essa semana fui resolver. Segunda feira estou mandando novamente gostaria que você me reenviasse o endereço. Mil perdões pela demora e pelo imprevisto. Passei quase 2 meses sem entrar no blog e por isso a demora. D e verdade me perdoe enviarei na segunda.

    WWW.NARELLYBATISTA.COM

    ResponderExcluir
  38. Nossa é lindo e bem diferente esses comentários né? Bom eu estava super sumida né :/ Enfim, o blog está lindo viu?

    Victory Official
    Space Tutorials

    ResponderExcluir
  39. Aceita afiliação e participe do nosso mural

    http://sonhosdeumate-en.blogspot.com.br/2012/10/mural-da-amizade.html

    ResponderExcluir
  40. kd tu?
    tou com xaudade
    toda vez entro aki e nada d postagem do tavoh
    ai ai

    ResponderExcluir
  41. Ótimo tutorial, o resultado fica tão bonito *-*

    Beijos,
    modicesdemenina.blogspot.com

    ResponderExcluir
  42. Fica muito lindo!!
    Seguindo aqui

    [ http://vestido-de-porcelana.blogspot.com.br/ ]

    ResponderExcluir
  43. Oii!
    É um otimo tutorial :d
    Eu acho sua area para coments muito legal assim como todo o seu blog (que é lindo de mais)
    Tem uma tag para você lá no JG :d

    Bjs
    justgloss.blogspot.com

    ResponderExcluir
  44. Ótimo tutorial !
    Sigam meu blog , fiz ele a poco tempo.
    http://enfoldteen.blogspot.com.br/

    ResponderExcluir
  45. Este comentário foi removido pelo autor.

    ResponderExcluir
  46. @Gabriela OliveiraFica mesmo lindo né, vou colocar no meu novo templante

    ResponderExcluir
  47. Ooi, vou tentar colocar no meu blog ^^
    Espero que o seu tuto dê certo, porque aqui no meu todos estão dando errado ;/
    Obrigada, bjoos :*

    ResponderExcluir
  48. Este comentário foi removido pelo autor.

    ResponderExcluir
  49. Ameeeei, muito facil e fica realmente LINDO! Obrigada mesmo...

    Sweet Pepper

    ResponderExcluir
  50. Passei a manhã tentando modificar a area dos coments do me blog, mas até agora o máximo que consegui foi tirar aquele fundo cinza horroso, vou tentar usar o seu.
    fashionistasassumidas.blogspot

    ResponderExcluir
  51. Muito bom o tutorial =)
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir

-Comente algo legal sobre o que achou do post
-Não xingue,seja amigável
-Afiliação só por comentário
-Sem plágios!
- Seguindo,segue de volta? Nem visito e nem sigo o blog