24 novembro 2011

Personalizando área dos comentários

Eu tô postando aqui um tutorial super fácil de como personalizar a área dos comentários que é muito fácil, clique em leia mais para ver o tutorial.
Primeiro vá em Designer >> Configurações >> Comentários e onde tem o nome Posição do formulário de comentários selecione a opção Janela pop-up e depois salve.
PS: Depois que houve mudanças no formulário de comentários do blogger, esse tutorial só funciona em blogs que tenha os comentários configurados para abrir em uma janela pop-up ou em outra guia. Então os Blogs onde os formulário de comentário aparece logo abaixo da postagem, por enquanto não podem ser personalizados.

irá ficar assim:


primeiro procure esse código:

/* Posts
 e encima dele acrescente esse aqui:
/* COMENTÁRIOS
-----------------------------------------------*/
#comments {
 background:#FFFFFF;
padding: 15px;
}
#comments h4 {
background:;
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;background:;
}
#comments-block .comment-author {
Font-weight: bold;
color:#68838B;
font-size:12px;
margin:.5em 0;
font-family:tahoma;
height: 30px;
 color:#FF9DC5;
line-height:2em;
 background: #000000;
}
#comments-block .comment-body {
background:;
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
 background:#35CCCC;
line-height: 1.4em;
color:#111;border: 20px #FFF5EE;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 75;
font-size: 11 px;
line-height:1.5em;
 background:#FFFFFF;
color:#111;border: 0px #535456;
}
se você quiser esse aqui: 



acrescente esse código:

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
font-weight: bold;
font-size: 100%;
line-height: 1.4em;
letter-spacing:.1em;
color: #fff; /*** cor do "Postar um comentário" e "x comentários:" ***/
-webkit-border-radius: 15px;
-webkit-border-top-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius: 15px;
-moz-border-radius-topright: 1px;
-moz-border-radius-bottomleft: 1px;
border-radius: 15px;
border-top-right-radius: 1px;
border-bottom-left-radius: 1px;
}
#comments-block {
margin:1em 0 1.5em;
line-height: 1.6em;
}
#comments-block .comment-author {
background: #666; /*** fundo do autor ***/
font-size: 14px; /*** tamanho da fonte do nome do autor ***/
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
line-height: 1.4em; /*** espaço entre as linhas ***/
padding: 8px; /*** margem interno da área do comentário ***/
background: #D3D3D3; /*** fundo da área do comentário ***/
-webkit-border-radius: 15px;
-webkit-border-top-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius: 15px;
-moz-border-radius-topright: 1px;
-moz-border-radius-bottomleft: 1px;
border-radius: 15px;
border-top-right-radius: 1px;
border-bottom-left-radius: 1px;
}
#comments-block .comment-footer {
margin:7px 0 2em;
line-height: 1.4em;
font-size: 100%; /*** tamanho da fonte da data do comentário ***/
text-align: right; /*** alinhamento da data do comentário ***/
letter-spacing:.1em; /*** espaçamos entre as fontes da data ***/
-webkit-border-radius: 15px;
-webkit-border-top-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius: 15px;
-moz-border-radius-topright: 1px;
-moz-border-radius-bottomleft: 1px;
border-radius: 15px;
border-top-right-radius: 1px;
border-bottom-left-radius: 1px;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
margin: 10px 0 2em;
font-style: italic;
color: #171717; /*** cor do recado de 'comentário deletado' ***/
-webkit-border-radius: 15px;
-webkit-border-top-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius: 15px;
-moz-border-radius-topright: 1px;
-moz-border-radius-bottomleft: 1px;
border-radius: 15px;
border-top-right-radius: 1px;
border-bottom-left-radius: 1px;
}


se você quiser esse aqui:



acrescente esse código:

/* Comments
----------------------------------------------- */
#comments {
background: url (http://i51.tinypic.com/1y70ig.gif); none repeat scroll top center;
padding: 15px;
}
#comments .comment-author {
padding-top: 1.5em;
}
#comments h4 {
margin: 1em 0;
font-weight: bold;
font-size: 90%;
line-height: 1.4em;
letter-spacing:.1em;
color: #f56bcc; /*** cor do "Postar um comentário" e "x comentários:" ***/
}
#comments-block {
margin:1em 0 1.5em;
line-height: 1.6em;
}
#comments-block .comment-author {
background: #666666; /*** fundo do autor ***/
font-size: 15px; /*** tamanho da fonte do nome do autor ***/
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
line-height: 1.4em; /*** espaço entre as linhas ***/
padding: 8px; /*** margem interno da área do comentário ***/
background: #D1F3F3; /*** fundo da área do comentário ***/
-webkit-border-radius: 10px; /*** bordas arredondadas na área do comentário ***/
-moz-border-radius: 10px;
border-radius: 10px;
}
#comments-block .comment-footer {
margin:7px 0 2em;
line-height: 1.4em;
font-size: 90%; /*** tamanho da fonte da data do comentário ***/
text-align: right; /*** alinhamento da data do comentário ***/
letter-spacing:.1em; /*** espaçamos entre as fontes da data ***/
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
margin: 10px 0 2em;
font-style: italic;
color: #666666; /*** cor do recado de 'comentário deletado' ***/
}




Depois vocês só é só editar com as cores que vocês preferirem e vizualiazar para ver se está tudo ok. espero ter ajudado alguém beijos pra vocês.
Comentários
5 Comentários

5 comentários:

  1. O blog Garota Descolada vem trazendo para você um conteúdo bastante elaborado do mundo fashion e moderno, ou seja, moda, fofoca, diversão, dicas, tutoriais com várias utilidades podendo utilizar em seu blog ou site e em você. E mais...contamos com uma equipe dedicada que é 'loucamente apaixonada' por blogar para trazer o melhor conteúdo da atualidade para você. Lembre-se sua visita faz a diferença e comentar e seguir faz parte.OBG!

    ResponderExcluir
  2. Olá, adorei o tutorial.
    Usava esse, mas troquei por um outro que acho mais moderno e organizado.

    Obrigada mesmo assim!

    Beijo!
    www.meianoiteequinze.blogspot.com

    ResponderExcluir
  3. legal os tutoriais ! =))
    visita ?
    www.paradateen1.blogspot.com
    beijoooooooooos ! rs ;*

    ResponderExcluir
  4. ahhh vlw eu consegi

    http://morangueteteen.blogspot.com/
    já to seguindo o seu segue o meu ? bjss

    ResponderExcluir
  5. Adorei esse tutorial, na verdade eu amoo todos os tutoriais daqui e salvei o seu blog nos meus favoritos, tenho certeza que vou precisar de seus tutoriais no meu próximo designer. beijos

    http://s2alanacard.blogspot.com/

    ResponderExcluir

- Fique a vontade para comentar, mas seja sempre educado(a)
- Seu comentário precisa ser relacionado com o assunto do post, caso não seja use a Cbox AQUI :)
- Não falar palavrões e não ficar criticando.
- Se for dar sugestões que seja para a melhoria do blog.
- Quer Parceria? então siga meu blog e coloque meu banner e me avise.
- Deixe a URL do seu blog para que eu possa retribuir.
- Não precisa pedir pra seguir que eu vou.
- ah e Não participo de concursos,e tags NÃO INSISTA!