Formulário de Comentário Personalizado Blogger

 

 

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

Posted in: Tutoriais