Já é possível personalizar o formulário de comentário do Blogger.
Este tutorial, que foi criado por Mohammad Mustafa Ahmedzai do My Blogger Tricks (MBT), vai realmente permitir-lhe ter um formulário de comentário personalizado muito melhor do que o Wordpress, Typad, etc.
Dê uma olhada em alguns exemplos abaixo:
E, para ver os efeitos destes, visite o My Blogger Tricks e lá, passe o cursor do mouse sobre as imagens por 3-4 segundos...é realmente fantástico e diferente!!!
Nota do autor: - O código CSS a seguir é para o formulário de comentário com um bebê nele. Outros códigos CSS serão fornecidos apenas para assinantes. Se você não se inscreveu ainda, inscreva-se agora, assinando o Feed do MBT e deixe NESTE POST um comentário com seu ID e-mail.
Siga estes passos:
1. Ir para o Blogger > Layout > Editar HTML
2. Marque a caixa " Expandir modelos de widgets "no canto superior direito.
3. Procure o código abaixo: (Use Ctrl + F)
<div class='comment-form'>
4. Substitua por este:
<div id='mbt-form'>
5. Agora, procure por ]]></ b: skin> e imediatamente acima dele, cole o código CSS abaixo:
#mbt-form iframe{
background:#ffffff url(http://3.bp.blogspot.com/_7wsQzULWIwo/Sx1aCAx_44I/AAAAAAAACeo/HZz8QQT0etM/s400/plz-do-not-spam1.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:450px;
}
#mbt-form iframe:hover{
background:#ffffff url(http://1.bp.blogspot.com/_7wsQzULWIwo/Sx1Zs5rasXI/AAAAAAAACeg/0fBam5AkHS0/s400/plz-do-not-spam2.gif) no-repeat bottom right;
border:7px solid #7EB2AC;
}
#mbt-form a{
color:#7EB2AC;
}
7. Salve o modelo e comemore a mudança! 
PERSONALIZANDO...
Agora vamos discutir as áreas importantes para o código CSS acima para ajudá-lo a personalizar o seu formulário de comentário do Blogger de acordo com suas preferências.
Existem três áreas importantes, que são:
#mbt-form iframe
#mbt-form iframe:hover
#mbt-form a
1. Customização para (#mbt-form iframe) - Active Mode
Esta parte é responsável pelo aparecimento ativo da caixa de comentário quando o cursor do mouse não está sobre ele. Isso inclui as propriedades de estilo a seguir:
background : Esta propriedade é responsável pela cor de fundo, imagem de fundo e da posição da imagem de fundo. Sempre que,
-
# Ffffff : Esta é a cor de fundo. Você pode mudá-lo, usando o
Color Chart -
url: Esta é a URL para a imagem de fundo. Foi usado o bebê no presente caso. Você pode mudar essa imagem com qualquer coisa que você gosta.
-
canto inferior direito : Esta posição da imagem de fundo. O bebê aparece no canto inferior direito. Você pode posicionar a imagem na parte inferior direita ou da direita para a esquerda ou superior, inferior ou superior esquerdo.
border: Esta propriedade CSS define o tamanho da borda / largura, estilo e cor da caixa de comentário, valores definidos para o formulário de comentário no modo ativo (e não no mouse over),
-
tamanho da borda para 7px,
-
estilo de borda para o sólido. Você pode escolher sólida, pontilhada, tracejada, etc .Ver esta página
estilos de borda -
cor da borda para # C7C7C7. Utilize o CSS Color Chart para usar uma cor diferente.
padding: Esta propriedade CSS é responsável pela distância entre o formulário de comentário e sua área de texto . Você pode aumentar esse valor se você deseja inserir uma imagem no canto superior direito ou no canto superior esquerdo do formulário.
font: Esta propriedade CSS define negrito ou normal, a família de fonte e o tamanho do texto. Foi estabelecido o seguinte para o texto "Comentar como:" (Coment as)
-
negrito para normal
-
tamanho para 12pt
-
família de fontes para "ms sans-serif". Se no caso o navegador não tem o "MS Sans Serif" font então pus Arial como um backup.
-
cor: Esta propriedade define a cor do texto "Comentar como:" . Utilize o nosso Color Chart para mudar a cor do texto.
width: Esta propriedade define a largura do formulário de comentário. Você pode ver que o comentário do blog do Mohammad é maior do que o normal, porque ele ajustou a sua largura. Defina a largura da forma do seu comentário um pouco menor do que sua largura de post. Você pode encontrar a sua largura de post , encontrando o seguinte código em seu modelo (Editar HTML)
.post
2. Customização para (#mbt-form iframe:hover) - Mouse Hover Mode
Agora vamos discutir as propriedades CSS para a aparência do formulário quando um cursor de mouse é passado sobre ele. Tem quase as mesmas explicações para o fundo e borda discutidas anteriormente. A definição dessas duas propriedades CSS terá efeito apenas sobre a segunda imagem que aparece no foco do mouse.
3. Customização das cores Link (#mbt-form a) - Link Colors
Esta parte define a cor destes dois links -> " Sair "e" Assine por e-mail ". Esses links aparecem no canto inferior direito de cada Formulário de Comentários do Blogger.
Cor : Define a cor do link. Definir uma cor de link como contraste com a cor de fundo.
Outro tutorial bacana que encontrei:
Como Realçar os Comentários do Autor do Blog
Leia também:
Comentários do Facebook no Blogger
