Adicionar estilos na caixa de comentários do blogger

Templates disponibilizados pelo próprio blogger seguem um certo padrão no estilo do formulário de comentários, mas se você assim como eu gosta de modificações no layout do blog que tal desta vez customizar a caixa de comentários usando estilos em CSS e utilizando alguns hacks? Como personalizar a caixa de comentários do blogger, este será o post de hoje.

Peço que antes de começar-mos faça um backup do seu template para evitar problemas.

Primeiramente vá até a página de “Configurações” do blogger, clique em “Comentários” e verifique se a “Posição do formulário de comentários” está marcada “Postagem abaixo incorporada“. Após configurada, vamos aplicar os estilos.


Passo 1 – Aplicando os Estilos:
Vou disponibilizar os estilos já prontos, mais você pode alterá-los ao seu modo. Para facilitar este trabalho a Ariane do TNB publicou um artigo sobre o uso da extensão para Firefox Web Developer, confira.

Vamos começar. No blogger clique na aba design e em seguida clique em editar HTML.

Localize o trecho:  ]]></b:skin>

Antes dele adicione os códigos abaixo:

CSS para alterar todo o corpo do formulário: Adicione ou substitua pelo código a seguir:

#comments h4 { /* Este é titulo do formulario */
margin:0;
font: 110% ‘Tahoma’, Trebuchet, Arial, Verdana, Sans-serif;
color: #000;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author { /* O espaço do nome de quem comentou */
background: #8BC6E2;
color: #fff;
font: bold 100% ‘Tahoma’, Trebuchet, Arial, Verdana, Sans-serif;
border-bottom: solid 3px #D1E9F3;
padding: 5px;
padding:3px;
margin:.5em 0;
}
#comments-block .comment-body { /* Area do texto do comentario */
background: #F9F9F9;
border: 1px solid #EBEBEB;
font: 100% ‘Tahoma’, Trebuchet, Arial, Verdana, Sans-serif;
padding: 15px;
margin:.25em 0 0;
}
#comments-block .comment-footer { /* Rodape dos comentarios */
margin:-.25em 0 2em;
line-height: 1.4em;
margin-top:2px;
font: 85% ‘Tahoma’, Trebuchet, Arial, Verdana, Sans-serif;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}

O código acima é encontrado no template padrão Mínima do blogger, caso o seu template tenha o mesmo código apenas substitua-o.

Passo 2: Instalando os Hacks:
Confira uma pequena lista de hacks que podem ser utilizados na caixa de comentários:

-> Destacando os comentários do autor no blog.
-> Alterar o link “0 comentários” por imagem ou texto.
-> Personalizar caixa de comentários do blogger. – Compulsivo

2 Comentários

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.