23 março 2012

Personalizando os comentários


Hey biscoitinhos de água e sal! Como está ai? Instalando muitas fontes? Ouvindo muita músicas? E no seu blog, os comentários tão aumentando? Tenho certeza! Mas nada melhor que um tutorial para personalizar comments né? (Ah.. claro que tem coisa melhor, mas enfim...) Vou ensina-las a deixar os comments semelhantes aos meus! ~~dance dance~~


Muitooo Importanteee : Só funciona na janela pop-up, dai vocês perguntam, mas na janela pop-up o seu não ta personalizado... eu sei, mas o  personalizado fica quando abrimos o post completo (clicando no título) e você desce e naquela área os comments ficam personalizados, sacou?
Enfim..Let's Go ao tuto:

Vá no seu HTML (Design > Editar HTML > Ctrl+F) ou (Modelo > Editar HTML > Prossseguir > Ctrl+F) e cole na caixa de pesquise o seguinte trecho:
#comments { 
Abaixo dele encontrará todo 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;
} 


Apague-o por completo!
No lugar dele coloque:


#comments h4 { /* Aqui é onde diz o número de comentários e o "Postar Comentário" */
margin: 0;
color: #FF6464; /* cor da letra */
font-family: Lucida Handwriting; /* fonte (essa é letra estilo cursiva) */
font-size: 28px; /* tamanho da letra */
}
#comments-block .comment-author { /* Aqui é onde diz a pessoa que comentou */
margin:.5em 0;
color: #000000; /* cor da letra */
font-family: Lucida Handwriting; /* fonte*/
font-size: 14px; /* tamanho da letra*/
border-bottom: 2px dashed #8fddf6; /* linha em baixo do nome */
padding: 5px;
}
#comments-block .comment-author a:link {
text-decoration: none;
}
#comments-block .comment-body {
background: #efefef; /* background do fundo do comentário */
border-right: 0px solid #FF6464; /* borda (direita) pode mudar para bottom (embaixo), top (em cima) ou left (esquerda) se preferir */
padding: 10px; /* espaço externo da esquerda */
font-size: 13px; /* tamanho da fonte */
color: #000000; /* cor da fonte */
text-align: justify; /* alinhamento do texto */
-moz-border-radius: 10px; /* bordas arredondadas */
-webkit-border-radius: 10px; /* bordas arredondadas */
border-radius: 10px; /* bordas arredondadas */
padding-left: 10px; /* espaço interno da esquerda */
padding-bottom: 12px; /* espaço interno da parte de baixo */
padding-right: 15px; /* espaço interno da direita */
padding-top: 10px; /* espaço interno da parte de cima */
margin: -.5em 0 0px;
-webkit-transition-duration: 1.50s;
}
#comments-block .comment-footer { /* Data do comentário */
margin:-.25em 0 2em;
color: #000000; /* cor da fonte */
font-size: 10px; /* tamanho da fonte */
}
.deleted-comment a {
margin: 10px 0 2em;
font-style: normal; /* coloque bold se quiser negrito e italic se quiser itálico */
color: #ececec; /* cor do comentário deletado" */
Me baseei no código do Jackie Dream
Agora vamos personalizar o avatar de quem comenta, vou dar 2 estilos, claro que podem personalizar do jeito que querem, mas quem não quer ter trabalho,dá um look:

Procure no seu HTML por:
/* Content
Vai visualizar assim:


/* Content
----------------------------------------------- */

Cole depois da segunda barra o seguinte código: (Esse é o código da imagem que é redondo e com o mouse em cima a pontinha do topo esquerdo "sobe")

div.avatar-image-container {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin-top: -2px; /* Margem externa do topo, para alinhar o avatar */
}
div.avatar-image-container img {
display:none;
border-radius: 50px; /* bordas */
-moz-border-radius: 50px; /* bordas */
transition-duration: 1.80s; /* duração da transição */
-moz-transition-duration: 1.80s; /* duração da transição */
-webkit-transition-duration: 1.80s; /* duração da transição */
}
/*Efeito de quando passar o mouse em cima da foto*/
div.avatar-image-container img:hover {
-webkit-border-radius: 50px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 50px;
-moz-border-radius-topleft: 0;
border-radius: 50px;
border-top-left-radius: 0;
opacity: 0.8; /* Opacidade */
-moz-opacity: 0.8; /* Opacidade */
-webkit-opacity: 0.8; /* Opacidade */
transition-duration: 1.80s;/* duração da transição */
-moz-transition-duration: 1.80s; /* duração da transição */
-webkit-transition-duration: 1.80s; /* duração da transição */
}
div.avatar-image-container img.delayLoad {
display:block;
}


O efeito da imagem quadrada que com o mouse em cima ela gira e fica redonda:


div.avatar-image-container { /* não é necessário modificas */
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin-top: -2px; /* margem de cima */
}
div.avatar-image-container img {
display:none; /* pode mudar para left ou right, mas recomendo que deixe assim */
-moz-border-radius: 0px; /* bordas arredondadas */
-webkit-border-radius: 0px; /* bordas arredondadas */
border-radius: 0px; /* bordas arredondadas */
transition-duration: 1.80s; /*duração da transição */
-moz-transition-duration: 1.80s; /*duração da transição */
-webkit-transition-duration: 1.80s; /*duração da transição */
}
div.avatar-image-container img:hover { /* Hover da imagem */
-moz-border-radius: 50px; /* bordas arredondadas */
-webkit-border-radius: 50px; /* bordas arredondadas */
border-radius: 50px; /* bordas arredondadas */
-webkit-transition: all 1.0s ease-out;
-webkit-transform: rotate(-360deg); /* quanto gira, aqui está volta completa */
transition-duration: 1.80s; /*duração da transição */
-moz-transition-duration: 1.80s; /*duração da transição */
-webkit-transition-duration: 1.80s; /*duração da transição */
}
div.avatar-image-container img.delayLoad {
display:block;
}
Boomm, people hoje é  só isso (só?), bom e ai gostaram? Ta tudo organizadinho  e bem explicadinho mas qualquer dúvida, só comentar!

9 comentários:

Biazynhah disse...

Muito legal o tutorial.
http://plumasepaets.blogspot.com

Polliana Barros disse...

Parabens pelo blog é lindo.
Ha algum tempo eu queria ter meu propio blog, mais não sei mexem em html.

Você poderia fazer um layout pra mim?

pollianaswan@gmail.com

Lívia Vasconcellos disse...

Muito interessante o tutorial.
http://blogapenasimagine.blogspot.com.br/

Candy Reis disse...

Aquelas fonts do trechy teen eu desenhei kk :D

Dayane disse...

Muito bom o tutorial *-*
Adorei o blog e estou seguindo

http://jujuba-d.blogspot.com/

bjo bjo

Chassy Cher disse...

Tutorial perfeito, sempre útil ^^
Flor, claro que eu aceito a afiliação, já li as regras e estou de acordo com todas elas; e tembém já te coloquei nos afiliados do Aponta pra fé e rema.
Beijos *-*

chassycher.blogspot.com

Jason S. Krueguer disse...

Você acertou o que eu estava procurando! Já tinha procurado várias vezes por esse tutorial e os que eu encontrava não davam certo. Mas esse deu (pelo menos no blog de testes).
Obrigado!

adraftbox.blogspot.com

Anônimo disse...

sem querer ser chata nem nada, mas tem ese tutorial igualsinho no cherry bomb: http://cherry-liah.blogspot.com.br/2012/02/personalize-area-dos-comentarios.html

TeTe disse...

@Anônimo Olha, Anônimo, vi isso sim, mas não copiei nada, eu creditei o Jackie Dream, que foi d onde me baseei pelo código, o outro foi feito por mim, as vezes os tutoriais se repetem mas se me inspiro ou reblogo um tutorial, sempre credito, ok?