Deixando o Formulário de Contato Padrão do Blogger Dark

Nesta postagem compartilho com vocês esta dica de como deixar o formulário de contato Dark. É muito simples. Espero que gostem!!!

Entre em "Modelo" - "Editar HTML" e procure pela tag

]]></b:skin>

Tendo encontrada a tag, cole ACIMA dela o seguinte estilo css

#formcontact { margin:0 auto; width:451px; height: 380px; background:#222222; position:relative; border:1px solid #262626; }
#formcontact h3 { color:#ffffff; font:bold 20px verdana; text-transform:uppercase; text-align: center; padding:5px 0 5px 15px; background:#222; border-bottom: 1px double #333; border-top: 1px double #111; margin:10px 0px; }
#ContactForm1_contact-form-name { margin:0px 10px 10px 10px; padding:10px 10px; width:350px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; color:#ffffff; }
#ContactForm1_contact-form-email { margin:0px 10px 10px 10px; padding:10px 10px; width:350px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; color:#ffffff; }
#ContactForm1_contact-form-email-message{ margin:0px 10px 10px 10px; padding:7px 7px; width:355px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; overflow:hidden; height:150px; color:#ffffff; }
#ContactForm1_contact-form-submit{ margin:0px 10px 10px 10px; padding:4px 7px; background:#CC0000; position: relative; cursor:pointer; float:right; width:100px; border-bottom: 1px double #660000; border-top: 1px double #660000; border-left:1px double #FF0033; border-right:1px double #FF0033; }
#ContactForm1_contact-form-submit:hover { background:#ff0000; }
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 250px; margin-top:10px; }
#ContactForm1 {display:none}

Se você quiser personalizar as cores deixando no seu gosto, é simples, basta você modificar as partes que eu destaquei em azul no código acima.

Para facilitar, você pode ver nossa tabela de cores clicando aqui.

Agora, salve e feche a parte de adição.

Agora, entre em "Layout" - "Adicionar um Gadget" -  "HTML/JavaScript" e cole o seguinte código

<div id="formcontact">
<h3>Contact Form</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nome" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Enviar" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 250px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

Tendo colado o código, basta salvar e pronto!!!

Deixe seu comentário!!!