Bom dia vamos lá com mais uma partilha,eu gostei do resultado final. Como na imagem acima mostra , contact form personalizado que mudei neste gadget,foi botão,cabeçalho,cores,etc etc.
Mas poderá visualizár melhor aqui online:Entre Aqui!!!
Então vamos aplicár no blogger,siga os passos abaixo :
Sempre faça uma cópia do seu template para caso de dár erro...
(1) Vamos colocar contact form á sua sidebar/footer escolha onde quiser...
(2) Feito isso entre em modelo e depois html e vamos procurar este trecho:
]]></b:skin>
(3)Cole este meu código acima desse trecho...
.contact-title {width: 300px;line-height: 43px;margin: 0px auto 0px;font-size: 19px;font-weight: 500;
color: white;text-align: center;text-shadow: 0 1px #000;background: #666;border-radius: 3px;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);}
.namebt1{color:#fff; float:right;padding:5px;margin-top:10px;width:25%;background:#666;text-align:center;}
.emailbt2{color:#fff; float:right;padding:5px;margin-top:10px;width:25%;background:#666;text-align:center;}
.areamsg3{color:#fff; float:right;padding:5px;margin-top:10px;width:25%;background:#666;text-align:center;}
.contact-form-widget{text-align: center;color: #666;margin-left: 33px;}
.contact-form-name{background: #F0F0F0; border: 1px solid #D2DADD;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; max-width: 300px; color: #666;}
.contact-form-name:hover {}
.contact-form-email{background: #F0F0F0; border: 1px solid #D2DADD;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; max-width: 300px; color: #666;}
.contact-form-email:hover{}
.contact-form-email-message{background: #F0F0F0; border: 1px solid #D2DADD;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; max-width: 300px; color: #666;}
.contact-form-email-message:hover{}
.contact-form-name:focus {}
.contact-form-email:focus {}
.contact-form-email-message:focus {}
.contact-form-button-submit { background: #666;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; border:1px solid #000;color#fcfcfc;float:left; height: auto; margin: 10px 0 0; max-width: 300px; padding: 5px 10px; width: 100%; cursor: pointer;}
.contact-form-button-submit:hover {background:#000;border:1px solid #000;}
(4)Agora procure este trecho caso tenha colocado na sidebar...
<div class='sidebar' id='sidebar-wrapper'>
(5) Espanda click na setinha do contact form...
(6) Agora veja imagem abaixo e faça igual deixe ficar só:
<b:includable id='main'>
Apague tudo tiver dentro e coleque meu código...
</b:includable>
(7) Código abaixo e cole no espaço apagou ...
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<h1 class='contact-title'>Bem Vindo</h1>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<span class='namebt1'>Nome</span>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
<p/>
<span class='emailbt2'>Email</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
<p/>
<span class='areamsg3'>Mensagem</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 300px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
Bom feito isso já tem contato na sua sidebar ou footer do seu blog,alguma coisa deixe recado,Fuiiiii
Mostra SmilesOculta Smiles