Updadte: conheça o novo formato de personalização de comentários clicando aqui.
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.- Entre em Modelo > HTML (caixinha branca abaixo da miniatura do seu template);
- Clique em qualquer parte do HTML e aperte Ctrl + F no teclado;
- Cole na caixinha que abriu (Search) o código:
]]></b:skin> e aperte a tecla "Enter";
- 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;
-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*/
}
.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;
}
-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,

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!
ResponderExcluirBjs
www.daimaginacaoaescrita.com
pois
ExcluirNossa como ficou bonito, deu até vontade de comentar...kkkkk
ResponderExcluirAcho 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
muito legal,adorei vou tentar no meu
ResponderExcluirbjss
Lindinhaaa me ajudaaa eu tenteii fazer quase deu certo tem alguma coisa que precisa mudar...
ResponderExcluirConfere... 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
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...
ExcluirAiii, como é lindo flor *-*
ResponderExcluirBeeijos
www.a-dreamy.blogspot.com
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
ResponderExcluirhttp://blogbondmais.blogspot.com.br/
Ficou lindo a área dos comentários!Ótimo tutorial :D
ResponderExcluirTe convido para participar do concurso lá no meu blog!
Beijos
blogmodaonline.blogspot.com
Sabia q vc tinha mudado algo, viu sou observadora faei ontem. Super Sheila atacando novamente!!!!
ResponderExcluirhttp://jujumeumundo.blogspot.com.br/
Aforei o tutorial! eu vou ver se consigo personalizar no meu blog de teste... se tudo der certo fasso no i dont care tbm.
ResponderExcluir1. 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
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!!
ResponderExcluirBeij♥s
Blog da Anjos♥
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.
ResponderExcluirAh, 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
tentei fazer isso e fico errado. Preciso de ajuda!
ResponderExcluirSheilaa então o meu deu certo... ebaa..... \O/
ResponderExcluirAgora 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
Como sou nova na blogosfera, este post me ajudou muito... bem explicativo...
ResponderExcluirAdorei o post... Mih!!!
Bjão ✿◠‿◠)✿
/(.”)__☆
/||\
_||_
http://comente-se.blogspot.com.br/
Ahhhhhhhhhhhhhhh... tudo que faltavaaa pra mim *.* olhinhos brilhando *.* muitoooo *.*...♥
ResponderExcluirficou 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á!!
Ótimo!!!! Já instalei no meu blog, agora só queria perguntar uma coisa: Será que eu fiz algo errado? Ou preciso apagar algum código?
ResponderExcluirOlhe que onde eu comento aparece um fundo branco e aquele risco preto embaixo =//
Será que vc pode me ajudar??
Beijinho, obrigada.
Deu certinho!!! Obrigada por responder tão rapidamente.
ResponderExcluirBeijinhos e ótimo final de semana!!!
Oi Sheila, amei o tutorial, já coloquei no meu, só não conseguir arrendondar as imagens.Me ajuda?
ResponderExcluirhttp://www.diariovirtualdaane.blogspot.com.br/
Gostei da tuto e consegui deixar a imagem dos comentários redonda, mas não consegui aumentar as margens!!!
ResponderExcluirMuito obrigada, me ajudou bastante!! *_*
ResponderExcluirPrimeira vez que visito seu blog, estava exatamente procurando como fazer isso!!
Seu blog é maravilhoso, parabens!!
Querida os comentários ficaram muito um em cima do outro..tem como mudar? Beijão, me ajuda
ResponderExcluirmarta_kitty10@hotmail.com <-- manda para ai pff
oláa amei seu blog e ja to seguindo
ResponderExcluirqualquer hora da uma passadinha no meu tah
http://falandodegarotapragarota.blogspot.com.br/
bjinho
Biah♥