Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

15/05/2012

NOVO: Personalizar Comentários na opção "formulário incorporado"!!!

Updadte: conheça o novo formato de personalização de comentários clicando aqui.

Ontem fiquei sem responder quase nenhum comentário... Peço mil perdões por isso, mas acho que depois de ler o tutorial de hoje vocês vão entender o porquê de ter ficado um bom tempo fazendo esse tuto e não ter tido tempo para responder os comentários.
O que acontece é que eu queria muito personalizar a área dos comentários aqui do DSM (e vocês sabem que quando eu quero alguma coisa eu faço tudo para conseguir!!!). Pesquisei muito no Google e nos blogs que visitei dizia que, nos novos templates do Designer do Modelo, apenas blogs que usem a opção de mostrar comentários em janela de poup-up ou em outra guia é que poderiam personalizar os comentários.
Como eu uso e prefiro o formulário de comentários incorporado abaixo da postagem, fiquei decepcionada em saber que não tinha como personalizar. Mesmo assim não desisti (sou brasileira e não desisto nunca, ué!!!), fui inspecionando com o Firefox a área dos comentários (depois eu conto o que é inspecionar) e anotando cada código.
O resultado é que eu consegui uma forma de personalizar a área dos comentários incorporada à postagem, de forma que ficou bem diferente. Não ficou tão fabulosa quanto essas que tem pela net, mas quebra um galho de quem quer continuar com os comentários abaixo da postagem. Vamos ao tuto então???

Personalizando a área dos comentários:

Antes de tudo, faça uma cópia do código do seu template, ou faça um backup, ou teste os códigos num blog de testes. Lembrando que esse código é direcionada para templates que usem a área dos comentários incorporada abaixo da postagem.

  1. Entre em Modelo > HTML (caixinha branca abaixo da miniatura do seu template); 
  2. Clique em qualquer parte do HTML e aperte Ctrl + F no teclado;
  3. Cole na caixinha que abriu (Search) o código: ]]></b:skin> e aperte a tecla "Enter";
  4. Acima de ]]></b:skin> cole o código abaixo:
#comments h4 {
text-align: center;
display: block;
  }

.comments {margin-left:5px;
margin-right: 15px;
text-align: left;
line-height: normal;
}

#commnet-form, .comment-form{margin-bottom: 40px;}

#comments-block {
text-align: left;
margin:10px auto;
  line-height:1.6em;
  }

#comments-block .comment-author {
  text-align: left;
  margin:5px auto;
  padding:5px auto;
  }

.blog-author-comment {margin:5px auto;}
.blog-author-comment p{margin:5px auto;}

#comments-block .comment-body {
  text-align: left;
  margin:.35em 0 0 auto;
  line-height: normal;
  }

#comments-block .comment-footer {
text-align: left;
  margin:-.25em 0 2em auto;
  line-height: 1.4em;
  margin:10px auto;
  text-transform:uppercase;
  letter-spacing:.1em;
  }

#comments-block .comment-body p {
text-align: left;
margin:10px auto;
  }

.deleted-comment {
  font-style:italic;
  color:gray;
  }

#comments dl dd{padding: 0;margin: 0;line-height: 110%;text-align: left;}

.comment {
  background: pink; /*Cor de fundo dos comentários*/
  color: mediumvioletred; /*Cor da fonte dos comentários*/
  padding-right:5px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px; 
  -moz-box-shadow: 3px 3px 3px #cccccc;
  -webkit-box-shadow: 3px 3px 3px #cccccc;
  box-shadow: 3px 3px 3px #cccccc;
}

.comment a {
color:#58093B; /*Cor dos links dos comentários*/
}

.comment a:hover {
color: black; /*Cor dos links dos comentários quando o mouse passa por cima*/
}

.comment-content {
margin-right: 5px;
}

.comments .comments-content .comment-header, .comments .comments-content .comment-content {
margin: 0pt 8pt 8px;
}

.comments .comments-content {
margin-bottom: -50px;
}
.comments .comments-content .comment:last-child {
padding: 8px;
}

.avatar-image-container {
  margin: 5px;
}

#commentpaging {
float:right;
}

#commentpaging a {
margin-right:5px;
}

#comments .avatar-image-container img {
  border: 1px solid mediumvioletred; /*Coloca uma borda na esquerda e acima do avatar em estilo relevo, se não quiser, apague esse trecho*/
}

Ao lado dos trechos destacados em negrito está a explicação do que aquele código modifica. Mude apenas o que estiver em negrito, não toque nos outros códigos, ok?
Os trechos em vermelho deixam a borda arredondada e os em laranja colocam sombra à seção. Se não quiser algum dos dois, apague todo o trecho.
Se quiser que o avatar de quem comentou fique redondinho, coloque 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 #cccccc; /*Sombra do avatar, apague essa linha se não quiser sombra*/
margin: 5px;
}

div.avatar-image-container img {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

É esse o código. Eu passei um tempo enorme verificando cada um e aperfeiçoando para que fique perfeito (me lasquei de digitar), portanto se você for reblogar, dê os devidos créditos a mim!!!

Mil Sweetkisses,
24 Comentários
Comentários

24 comentários:

  1. Sheila, vc é demais! Também fiquei muito chateada quando fui tentar personalizar os comentários e não dava, só com janela pop, mas agora, graças a você podemos!

    Bjs

    www.daimaginacaoaescrita.com

    ResponderExcluir
  2. Nossa como ficou bonito, deu até vontade de comentar...kkkkk
    Acho que vou tentar fazer no meu...
    Sabe o que eu queria, se tivesse uma opção no comentário que ao ser respondido no blog a pessoa que comentou recebesse uma notificação... tipo face.. quando vc é marcado em uma publicação... todos que responderem vc é notificado. Será se tem como???

    beijos!
    Simplesmente Danny

    ResponderExcluir
  3. muito legal,adorei vou tentar no meu
    bjss

    ResponderExcluir
  4. Lindinhaaa me ajudaaa eu tenteii fazer quase deu certo tem alguma coisa que precisa mudar...

    Confere... ficou a caixa de comentario antes das palavras...kkkkk

    HELP!!!
    http://simplismenteedanny.blogspot.com.br/2012/05/o-que-encontrar-numa-bolsa-de-mulher.html#comment-form

    ResponderExcluir
    Respostas
    1. Infelizmente esse é um erro comum do Blogger e ainda não há forma de consertá-lo. Estou pesquisando e trabalhando nisso, espero que em breve haja uma solução...

      Excluir
  5. Aiii, como é lindo flor *-*
    Beeijos

    www.a-dreamy.blogspot.com

    ResponderExcluir
  6. Eu achei que ficou lindo, eu tive que mudar o meu para janela poup-up para personalizar por que não tinha esse tutorial, agora tem acho que eu vou mudar para esse só para testar ele.bjs
    http://blogbondmais.blogspot.com.br/

    ResponderExcluir
  7. Ficou lindo a área dos comentários!Ótimo tutorial :D
    Te convido para participar do concurso lá no meu blog!
    Beijos

    blogmodaonline.blogspot.com

    ResponderExcluir
  8. Sabia q vc tinha mudado algo, viu sou observadora faei ontem. Super Sheila atacando novamente!!!!
    http://jujumeumundo.blogspot.com.br/

    ResponderExcluir
  9. Aforei o tutorial! eu vou ver se consigo personalizar no meu blog de teste... se tudo der certo fasso no i dont care tbm.

    1. O que você mais gosta no DSM?
    Desculpe, eu conheci o blog hoje, por isso não sei mt sobre o DSM

    2. O que você menos gosta no DSM?
    Pra ser sincera não gosto de designs mt chamativos e escuros....

    3. Se pudesse mudar alguma coisa aqui no blog, o que seria?
    O BG



    4. Que assunto você gostaria de ver no DSM (pode ser qualquer um, seja criativo)?
    Gosto muito de textos em blogs, com dicas pra vida pessoal

    5. Sente falta de algum post/seção que não estão mais no DSM? Se sim, qual(is)?
    Relembrando: não sei muito sobre o blog, conheci recentemente, não vou saber responder


    kisses;*
    www.baby-idontcare.blogspot.com

    ResponderExcluir
  10. Oi Sheila! Muito obrigada pela dica,eu já tinha visitado esse site só não conseguir fazer muita coisa... Acho que foi a preça! Tentarei mas vezes. Valeu!!
    Beij♥s
    Blog da Anjos♥

    ResponderExcluir
  11. Eu acho lindo comentários personalizados. O padrão do Blogger é mesmo bem podrinho HAUHEUAHAUEH Uso o Chrome, então eu teria que alterar os códigos, né? Achei suas alterações super fofas, e queria usar no meu próximo lay.

    Ah, e outra: eu uso comentários pop up. Será que o mesmo código rola, ou tem que ser outro?

    Desculpa esse monte de perguntas, é que sou n00b com códigos HUAHEUEAHUAH Não sei como você vê algum sentido naquele "inspecionar elemento" do Firefox. Aquilo parecia mistura de grego + mandarim + língua dos marcianos -nnn

    Beijo,
    muggle-world.blogspot.com

    ResponderExcluir
  12. tentei fazer isso e fico errado. Preciso de ajuda!

    ResponderExcluir
  13. Sheilaa então o meu deu certo... ebaa..... \O/
    Agora sobre a notificação eu estava falando no caso de você comentar no meu blog e eu responder, chegar uma notificação pra você informando que respondi... entendeu???

    beijos!!
    Simplesmente Danny

    ResponderExcluir
  14. Como sou nova na blogosfera, este post me ajudou muito... bem explicativo...

    Adorei o post... Mih!!!

    Bjão ✿◠‿◠)✿
    /(.”)__☆
    /||\
    _||_

    http://comente-se.blogspot.com.br/

    ResponderExcluir
  15. Ahhhhhhhhhhhhhhh... tudo que faltavaaa pra mim *.* olhinhos brilhando *.* muitoooo *.*...♥
    ficou tipo... MARAVILHOSOOOOO.
    Ahhhh... preciso mudar meu Blog, agora que consegui com sua ajuda milagrosa é claro a fazer meu proprio template... inhaaa... preciso arrumar tempo e animo!!
    Volto já!!

    ResponderExcluir
  16. Ótimo!!!! Já instalei no meu blog, agora só queria perguntar uma coisa: Será que eu fiz algo errado? Ou preciso apagar algum código?
    Olhe que onde eu comento aparece um fundo branco e aquele risco preto embaixo =//
    Será que vc pode me ajudar??
    Beijinho, obrigada.

    ResponderExcluir
  17. Deu certinho!!! Obrigada por responder tão rapidamente.
    Beijinhos e ótimo final de semana!!!

    ResponderExcluir
  18. Oi Sheila, amei o tutorial, já coloquei no meu, só não conseguir arrendondar as imagens.Me ajuda?

    http://www.diariovirtualdaane.blogspot.com.br/

    ResponderExcluir
  19. Gostei da tuto e consegui deixar a imagem dos comentários redonda, mas não consegui aumentar as margens!!!

    ResponderExcluir
  20. Muito obrigada, me ajudou bastante!! *_*

    Primeira vez que visito seu blog, estava exatamente procurando como fazer isso!!

    Seu blog é maravilhoso, parabens!!

    ResponderExcluir
  21. Querida os comentários ficaram muito um em cima do outro..tem como mudar? Beijão, me ajuda
    marta_kitty10@hotmail.com <-- manda para ai pff

    ResponderExcluir
  22. oláa amei seu blog e ja to seguindo
    qualquer hora da uma passadinha no meu tah
    http://falandodegarotapragarota.blogspot.com.br/
    bjinho
    Biah♥

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados