Personalize a área dos comentários

Oi minha gente! Perdão por ficar tanto tempo sem postar. E perdão por ficar todo post me desculpando por isso. Sem mais delongas vamos ao que interessa: o tutorial. O pessoal tem me pedido muito pra fazer esse post. É simples, mas um pouco longo. Eu não estou nem sabendo como começar. Talvez dando os créditos ao Mundo Blogger seja uma boa opção. Mais uma vez ele é a fonte do nosso conhecimento HAHA.

 Tem outra coisa chata nesse tutorial: como se trata da área dos comentários, não tem como ver as modificações somente visualizando, ou seja, primeiro tem que salvar para depois poder ver como ficou. Por isso, faça tudo num blog de testes e só depois passe para o seu blog.

Também já pude notar que, infelizmente, a maioria do pessoal usa os novos templates do blogger. Então vou me basear neles pra montar o tutorial. Vamos lá:


1. Pra começar, vá em Design, Editar HTML e localize o seguinte 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;
}
Para facilitar a sua busca dê Ctrl+F e procure só por #comments {

Selecione tudo isso, apague, e no lugar dele, cole:

 /* Comments
----------------------------------------------- */
#comments h4 {
margin: .75em 0;
}
#comments-block .comment-author {
margin:.5em 0;
}
.comment-author a{
margin:0px;
color:#8d16df;
}
#comments-block.avatar-comment-indent {
margin-left: 0;
}
#comments-block .avatar-image-container {
float: left;
position: static;
margin-right: 10px;
}
#comments-block .comment-body {
margin: -.5em 0 0px;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
}
.comment-timestamp, .comment-timestamp a {
color:#b557f8;
font-size:12px;
}
#comments-block .comment-body p {
margin:-.5em 0 0px;
}


Pronto, agora vamos entender esse código:
Usei uma imagem com cores ridículas  do modelo de comentário daqui do MN para ilustrar . 

A parte de cima, a área onde tem o nome de quem escreveu o comentário, pode ser editada na parte #comments-block .comment-author { e a cor do nome em .comment-author a{ do código.

O avatar do autor, eu coloquei no código pra que ficasse dentro da "caixa" do comentário, assim como o do MN. Se quiser que ele fique do lado de fora da "caixa" é só apagar no código a seguinte parte:

#comments-block.avatar-comment-indent {
margin-left: 0;
}
#comments-block .avatar-image-container {
float: left;
position: static;
margin-right: 10px;
}

A área onde fica o conteúdo do comentário, isto é, o texto que o cidadão escreveu, pode ser editada em #comments-block .comment-body { .

E a parte de baixo, a área onde fica a hora, dia, mês e ano em que o comentário foi postado pode ser ser editada em #comments-block .comment-footer { e a cor e o tamanho em .comment-timestamp, .comment-timestamp a { .

Mas aí você pergunta: Andreza, como assim "pode ser editada"??

Você pode editar de várias maneiras:

- Para colocar uma imagem de fundo em alguma(s) parte(s) do código é só acrescentar:

background: url("URL DA SUA IMAGEM") repeat;

- Para colocar uma cor acrescente:

background: #000;

Coloquei preto na cor acima. Para mudar use o código da cor desejada. Nessa tabela tem várias cores.

- Para colocar uma borda simples:

border: 1px solid #000;

Para conhecer outros modelos de borda, inclusive a borda arredondada que usei no MN, clique aqui.

É isso pessoal. Espero de verdade que tenha ajudado.

29 comentários:

Tonný disse...

Oii, to seguindo aqui seu blog. segue o meu please?
http://popnewsmusic.blogspot.com/

Viviane disse...

Oii, fofa, aceita parceria e segue? Já to seguindo! Bjuus

Anônimo disse...

Oi flor queria saber, o comentário fica sem a caixinha mesmo?
Ou dá pra colocar uma personalizada?
Bjks

Yan Gomes disse...

Oi Andreza, aqui no código do design do meu blog não está aparecendo o primeiro código, o código que será substituido pelo outro e eu quero colocar isso no meu, mais não estou conseguindo. Se puder me ajudar, eu te agradeço muito! Beijos e segue o meu blog? É novo :D

http://yan-gomes.blogspot.com/
http://twitter.com/Yan_Gomes_

Profano Feminino disse...

Gostei do tutorial, precisa de um pouco de paciencia pra fazer , mas no final vale a pena.

www.profanofeminino.com

We ♥ Fashion disse...

Lindooo, seguindo, segue ? -> http://modamssan.blogspot.com

Ana Luiza disse...

pefeito *-*

Juh disse...

oi fofis,
conheço o seu blog a pouko tempo mais AMO! bem já li muitas postagens antigas e queria saber se vc não podia seguir meu blog e falar por meio de um coments oq acha dele?! o endereço é www.juh-sweetgirl.blogspot.com
bjux
JUH

photokeeper disse...

Muito legal o tutorial *-*
Pode ter certeza que irei usar nesse novo design de aniversario (de 1 ano de blog)
Não perca viu? Vai ter postagens super legais de passeios e exposições que vimos quando viajamos. Essa semana especial vai começar dia 11 e terminar dia 18
Espero você lá!
Kisses, fanaticospornoticia.tk

HeyLiah disse...

Vou usar as dicas, muito útil! =)
Kissus
cherry-liah.blogspot.com

Lia disse...

Amei o tutorial, super util!
Seguindo, retribui?

Beijos,
www.croffyshane.blogspot.com

Anônimo disse...

Olá tudo bem?
Passei pra avisar que tem selinho pra você no meu blog*
Beijos ♥
http://apenasumagaroota.blogspot.com/

Teen disse...

Oi menina nerd,queria muito sua ajuda...
Como fasso para personalizar o bem-vindo do blog
igual esse blog?mas com meu tema???

http://tvfabulous.blogspot.com/

Style Included disse...

não consegui.Logo começo a publicar o blog e se você aceitar parceria eu vou agradecer,será um orgulho ter você!
Andei vendo o blog e vi uns tutoriais super legais,já aproveitei alguns.O Menina Nerd é muito legal,parabéns! Já estou seguindo,você merece e tenho certeza que o blog vai ajudar muitas pessoas inclusive eu. Estou mega feliz de conhecer algo tão bom assim,se você ignora parcerias por comentários por favor me comunique ai eu vou até a página de contatos.Obrigada,muito mais sucesso.
http://styleincluded.blogspot.com/

Novidades para Garotas disse...

ooi,naum entendi muito a dica.to seguindo seu bloog,segue o meu?:

Crazy Girls disse...

OIEE, faz um tutorial explicando como faz pra colocar esse "Ler Mais"?
Obrigado , adoro o blog s2

Jefferson Reis disse...

Fiz uma bagunça e não consegui, rs

Nethan disse...

Não consegui :´(

Polyana disse...

Coisa difícil... u.ú
kissus

Polyana disse...

Demorei muutio, mas consegui! não ficou igual o daqui não... nem apareceu borda e nem ficou arredondado, mas tah valendo! ^.~
kissus

http://adoleser-girls.blogspot.com/

Anônimo disse...

Ai, não consigo fazer isso!
Eu já tentei várias e várias e várias e várias e várias e várias e várias vezes e nunca dá certo *---*

O que será que tá errado ?!

Beijos ♥
blog-da-lolica.blogspot.com

Unknown disse...

Oiii, você poderia me dizer como usar os outros tipos de bordas especificamente a sua? BJSS
http://blogmaniasdemeninas.blogspot.com/

Dulcinéa Benevides disse...

Oii, to seguindo aqui seu blog. segue o meu.
http://neiabenevides11.blogspot.com/

Beeijos!

Anônimo disse...

Flor, eu consegui! Mais na parte author, a do nome, fica uma parte da cor que eu coloco como plano de fundo para fora!!! O que eu estou fazendo de errado?
Me responde por favor! É um dos últimos tutoriais que estou precisando pro meu blog!
Beijinhos

Pipoquinha disse...

Aconteceu a mesma coisa comigo, a parte onde está o nome do cidadão da saindo pra fora!

Ana Lola disse...

Andressa, por favor, né?? O que anda acontecendo com o MN que todos os tutoriais a imagem e o texto sai uma em cima da outra.
Olha, eu queria MUITO fazer esse tutorial, mas desse jeito não vai dar!

Thaís Lima Fotografias e Design disse...

Eu uso o antigo, faz um post para os antigo por favor??
pq esse novo não da :(
Obg!

Anônimo disse...

muito bom Andressa...Amei o tuto...faça muito mais viu!Beijinhos Parabéns pelo blog...

http://123make.blogspot.com/

Anônimo disse...

Por favor florzinha, tenta editar esse post dos comentários, que está meio grudado, e não dá para entender direito...obrigada (leu?agora apaga, bjs flor amo seu blog vou divulga-lo... blog 1,2,3...Make!)