[Blogger - Customização] - Customizando as "regras" dos comentários do Blogger

Neste artigo atenderei ao pedido da leitora Andreza, que me pediu para criar um artigo explicando como customizar aquela área onde postamos as regras para comentar. Eu, sinceramente, não sei se essa área possui um nome específico, então vou chamá-la de "área das regras" — bem original, diga-se de passagem. Para quem ainda está em dúvidas sobre à qual área estou me referindo, abaixo há uma imagem ilustrativa.


Agora que já sabemos sobre o que estamos falando, vamos ao tutorial de como customizar essa área. O processo é extremamente simples, portanto, basta seguir os passos abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>

3. Imediatamente acima deste código, adicione este outro código.

/* ----- Customização da área de regras dos comentários ----- */
 
.comment-form p {
    font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; /* fonte da área de regras */
    color: #333333; /* cor da fonte da área de regras */
    background: #FFFBCB; /* cor de fundo da área de regras */
    border: 2px solid #000000; /* borda da área de regras */
    text-align: justify;
    padding: 10px;
    line-height: 1.5;
}


Se você utilizar o código exatamente como foi mostrado acima, o mesmo deixará a área de regras do seu blog exatamente como no exemplo mostrado abaixo.

- Todos os comentários são moderados e só ficarão disponíveis após serem aprovados.
- Não coloque o link do seu blog dentro do comentário, pois ele não será aceito.
- A área de comentários não é a casa da mãe Joana, então tenha respeito. Não use palavrões.
- Não serão mais aceitos comentários anônimos.
- Contatos pessoais, devem ser feitos na página de contato.
- Não deixe links desnecessários nos comentários.

Se você tiver conhecimentos em CSS, poderá customizar essa área da maneira que quiser, caso contrário altere somente as partes que possuem comentários à frente. Os comentários são escritos da seguinte maneira: /* exemplo de comentário */. Caso queira mudar as cores dos elementos, veja essa tabela de cores.

4. Para finalizar clique no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo. Agora vá no seu blog e confira como ficou. Se você gostou deste artigo, achou ele útil ou ficou com dúvidas, participe deixando um comentário.

Atualização — 08.10.2011 às 17h42
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 9 comentários neste artigo!

  1. Ai vlw msm por ter postado esse tutorial, bjus!

    ResponderExcluir
  2. Ahh, no meu blog naum funcionou, mas vlw do msm jeito ;)

    ResponderExcluir
  3. Andreza: o que aconteceu é que eu sempre uso como base para os tutoriais de customização os templates do Designer do modelo, mas como você tem um template personalizado, os código mudam um pouco. No seu caso, troque o . (ponto) por # (jogo-da-velha), seu código deve ficar assim:

    #comment-form p {

    Isto com certeza irá funcionar no seu template! Agradeço as visitas, comentários e sugestões. Volte sempre!

    ResponderExcluir
  4. Nossa era só trocar por "#", vlw vc ensina muito bem :)

    ResponderExcluir
  5. Andreza: pois é, em CSS e HTML uma letrinha pode fazer a diferença! Rsrs, agradeço o elogio! [=

    ResponderExcluir
  6. Pergunta: ao invés de cor de fundo, é possível usar imagem??

    ResponderExcluir
  7. Sybylla: depende de onde você quer por a imagem. O código para por cor de fundo é o seguinte:
    background:#000000;
    O código para por uma imagem é:
    background:url(link-da-imagem) no-repeat left top;
    Mas o código acima é variável dependendo de como você quer alinhar a imagem.

    ResponderExcluir
  8. AHHHH!!! rsrs Desculpe, mas não consigo pôr imagem de fundo. Vai ficar com cor mesmo.

    Valeu Igor pelas dicas e pela ajuda, seu site é show.

    ResponderExcluir
  9. AH! Funcionou!!! Obrigada!! Nada que um pouco de força bruta e ignorância não resolva! rs

    ResponderExcluir