Personalizar Formulário de Comentários do Blogger!

Personalizar  Formulário de Comentários do Blogger!

Tutorial de hoje é a maior demanda e mais desejava, mas raramente respondidas na blogosfera. Para alguns designers personalizar o Blogger Formulário de comentário não é de alguma forma possível, enquanto para outros é complicado, mas a partir de hoje  cada blogueiro vai realmente  ser capaz de personalizar o formulário de comentário do Blogger, da melhor forma possível! Depois de algumas tentativas e erros que realmente conseguiu alterar a codificação do Blogger CSS oficial. Estamos felizes por ter trazido a você um tutorial que irá certamente permitir que você tenha um formulário personalizado comentar muito melhor do que o Wordpress, etc Typad Por favor, veja alguns exemplos abaixo:




Se você gostou desta nova descoberta! Vamos agora aprender a personalizar o formulário de comentário blogger / caixa para atender às suas preferências.

Adicionando um formulário para comentários personalizado para o seu Blog

Segui estes passos:

1. Vá para o Blogger> Layout> Edit HTML
2. Marque a caixa "Expandir modelos de widgets" no canto superior direito.
3. Procure o código abaixo, dica: - Pressione Ctrl + f

<div class='comment-form'>

4. Substitua este código com o código abaixo:

<div id='mbt-form'>

5. Agora procure por :]]></b:skin>

6. Logo antes de : ]]></b:skin> colar o código CSS abaixo:

#mbt-form iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ewZSTFTcIa4fhYcGRyLxf5-yvFb4zU15JMl5kha3HiG-l3B1ht7BxDfAvrhy_2MIOIUMSUiFlKPoEUM3rhOXaCtzTzQwiassDzzn5kv5hncYAqrSAgeHHi66zv5q_cSA5F6MbtH2dfSD/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHW97Zv3sraWmKs5NdP2rkxe6wewn1-RtLl41gBQMeBdISCKaNAJyPqnGQ5chS2zgff6AvMK6tM83WMqkkaAwKEiF2x5hdHSPwz8PBvF2mTsmNej-6YLK6QyW39gRGLu8xkLyD0AfdIL45/s400/plz-do-not-spam2.gif)no-repeat bottom right;
border:7px solid #7EB2AC;
}
#mbt-form a{
color:#7EB2AC;
}

7. Salve o seu modelo e ver o seu blog para ver um toque diferente:>
Personalizar o Blogger Comentário formulário de acordo com o layout do seu Blog

Vamos agora discutir as áreas importantes no código CSS acima para ajudá-lo a personalizar o seu formulário de comentário do Blogger de acordo com suas preferências.

Há três áreas importantes, que são,


# iframe MBT-forma

# mbt iframe formulário: hover

# mbt em forma de um
Aqui estão os detalhes de cada seção

1. Personalização para o modo activo


# iframe MBT-forma

Esta parte é responsável pelo aparecimento da caixa de comentários activa quando o cursor do mouse não é pairava sobre ela. Ele inclui as propriedades de estilo a seguir,

background: Esta propriedade é responsável pela cor de fundo, imagem de fundo e posição da imagem de fundo. Onde,

* # Ffffff: Esta é a cor de fundo. Você pode mudá-lo, usando o nossoGerador de Croes HTML
* URL: Este é o URL para a imagem de fundo. Eu usei o bebê no presente caso. Você pode mudar essa imagem com qualquer coisa que você gosta.
* Canto inferior direito: Isto posiciona a imagem de fundo. Coloquei o bebê 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. Tenho definir esses valores para o formulário de comentário no modo ativo (e não o rato em cima),

* O tamanho da fronteira para 7px,
* Estilo de borda para sólido. Você pode escolher sólida, pontilhada, tracejada etc Veja esta página em estilos de borda
* A cor da borda para # C7C7C7. Utilize o nosso CSS Color Chart para usar uma cor diferente.

padding: Esta propriedade CSS é responsável pela distância / gap entre a fronteira formulário de comentário e sua área de texto. Você pode aumentar este valor se você deseja inserir uma imagem no canto superior direito ou no canto esquerdo superior do formulário.

font: Esta propriedade CSS define a ousadia, a família de fonte eo tamanho do texto. Tenho o seguinte para definir o texto "Comentários como:"

* Ousadia ao normal,
* O tamanho de 12pt
* Família de fonte a "ms sans serif". Se no caso o browser não tem o "MS Sans Serif" font então pus Arial como um backup.

color: Esta propriedade define a cor do texto "Comentário de:". Use uma tabela de cor html para mudar a cor do texto.

width: Esta propriedade define a largura do seu formulário de comentário. Você pode ver o comentário do do meu blog é mais amplo do que o normal, porque eu ter ajustado a sua largura. Defina a largura da sua forma de comentário um pouco menor que a largura do seu post. Você pode encontrar a sua largura post por encontrar o seguinte código em seu modelo (Edit HTML)

2. Personalização para Mouse Hover Mode

Agora vamos discutir as propriedades CSS para a aparência do formulário quando o cursor do mouse é pairava sobre ela.

# mbt iframe formulário: hover

Ele tem quase as mesmas explicações para o fundo ea borda, como discutimos anteriormente. A definição destas duas propriedades CSS terá efeito apenas a segunda imagem que aparece no foco do mouse.

3. Personalização para o link Cores


# mbt em forma de um

Esta parte define a cor dessas duas ligações -> "Sair" e "Assine por e-mail". Esses links aparecem no canto inferior direito de cada comentário Blogger formulário.

color: Define a cor do link. Definir uma cor de link como contraste com a cor de fundo.

Espero que este tutorial será de grande ajuda para blogueiros e designers. Pedimos a todos que gentilmente link de volta se você deseja compartilhar este tutorial exclusivo com seus leitores e amigos para o desenvolvedor do tutorial  Bolgger Tricks. Agradecemos .