Volte para a página inicial Sobre o blog Coisinhas úteis Perguntas frequentes

15/11/2012

Área dos comentários personalizada

Tumblr_lybj71lwq31qcbtbdo1_500_large_large

Oi lindos! Trouxe mais um tutorial e minha mãe deve ta querendo me matar porque ainda to aqui kkk faz mal não. Bom, eu acabei de ver ele lá naquele blog búnito e.e Usem tá? E não me deixem no vacuo g.g ps: quem em deixar vai apanha na bundona kk

Créditos >> Let's Dream






Uma das coisas mais feias do blogger é a área dos comentários,com aquele fundo cinzahorrível.Hoje eu vou ensinar a mudar isso de uma maneira bem simples.Aprendi esse tutorial no Menina Nerd,só modifiquei algumas coisinhas básicas.Neste post ela explica tudo certinho.

Só tem uma coisa,esta personalização só funciona  em blogs que tenha os comentários configurados para abrir em janela pop-up ou em outra guia.Para fazer isso vá na aba Configurações >Comentários >Posição do formulário de comentários e marque a opção "Janela pop-up" (ou Página inteira).E agora vamos personalizar!

Sua área dos comentários vai ficar assim:
Só lembrando que,você pode mudar a cor do fundo que está "cometário (comi o N *o*) ilustrativo" pra uma cor diferente da que está na data,assim ficará com três cores diferente.Tipo assim:


 Como é a área dos comentários que estamos editando,não dá para ver as modificações apenas clicando em Visualizar,você tem que salvar pra depois ver como ficou.Então recomendo que faça em um blog de testes e depois passa para seu blog ou baixe seu modelo completo .Pois que se algo der errado você vai ter uma cópia.

Ok,vamos ao tutorial !
1- Vá em Design >>Editar HTML,dê ctrl+f e procure por #comments { .
Agora apague 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;
}

E substitua por esse:
/* Comentarios
----------------------------------------------- */
#comments h4 {
margin: .75em 0;
}

#comments-block .comment-author {
background: #ff7ea8;  /* cor do fundo do nome de quem comentou*/
margin:.5em 0;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}

.comment-author a{
margin:0px;
color:#FF1493; /*cor do link do nome de quem comentou*/
}

#comments-block .comment-body {
background: #ffd7e4; /*fundo do texto do comentário*/
margin: -.5em 0 0px;

}
#comments-block .comment-footer {
background: #ffd7e4; /*fundo da parte em que está a data*/
margin:-.25em 0 2em;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;

}
.comment-timestamp, .comment-timestamp a {
color:#f5b4ff; /* cor da data */
font-size:10px; /* tamanho da fonte da data */
}
#comments-block .comment-body p {
margin:-.5em 0 0px;
}

Agora é só alterar as cores se quiser.E o que está em negrito são as bordas arredondadas,é só apagar se preferir.É isso,espero que tenham gostado.Qualquer dúvida é só comentar ok.

Um comentário:

  1. Eu já usei essa area dos comentários num layout do meu blog, fica perfeitoo! Amei o tuto!!

    Cliquesnocapricho.blogspot.com

    ResponderExcluir