Adicionar estilos na caixa de comentários do blogger

Blogger, CSS, Tutoriais
4

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.

✅ Canal no Youtube | Inscreva-se AGORA ✅

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

4 Comentários

  3. Leonardo Muito boa a matéria aqui, você é excelente ensinando coisas de site e blog, eu conheço muito pouco, estou tentando criar um blog, mas tá muito difícil, ainda bem que tenho uns amigos e me socorrem quando preciso, senão nem no Facebook eu ia conseguir postar direito.

    Esta caixa de comentários ai dessa matéria html é esta aqui que estou comentando?

    Responder

  4. Muito bom, ainda bem que achei aqui, se não fosse os amigos, nem no facebook eu ia conseguir postar fotos e comentar, quero fazer um blo de cachorro perdido, mas nem sei por onde começar. Sou burrão em celular e computador. Minha filha entende bem, eu ando como cego. Obrigado!

    Responder

Deixe um comentário

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