nota automatica

viernes, 23 de mayo de 2014

5 Estilos Para El Formulario de Blogger

Hace unos días os mostraba la forma de personalizar el formulario de Contacto de Blogger y añadirlo a una página estática. Hoy he diseñado 5 formularios oficiales de blogger, así que hoy estoy emocionado de compartir este formulario personalizado con todos ustedes.

Vamos a ver todos los diseños y podréis elegir cualquiera de las formas que ustedes prefieran y agregarlo a vuestro blog. Para instalarlo en una página estática seguiremos los siguientes pasos:

Para instalar el formulario en una página estática vamos a seguir estos pasos:
Lo primero sería añadir el widget a la sidebar.
1.- Diseño > Añadir gadget ( Formulario de Contacto).- Guardar.


Bien,  ya lo tenemos instalado en nuestra sidebar.

Lo siguiente sería ocultarlo en todas las partes del blog y para ello buscamos: </head> y justamente antes colocamos:

<b:if cond='data:blog.url != &quot;&quot;'>
<style type='text/css'>
#ContactForm1 {
display: none;
}
</style>
</b:if>

2.- Ahora vamos al menú Páginas.
Haga clic en Nueva página y elegir la página en blanco.
Presione HTMLcopie y pegue el código del formulario que prefiera.

Estilo 1:
formulario de contacto blogger
<style type="text/css">
.contact-form-button {
cursor:pointer;
height: 32px;
line-height: 28px;
font-weight:bold;
border:none;
}
.contact-form-button {
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
margin-top:2px;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
background:#585858;
color:#fff;}
.contact-form-button:hover {
text-decoration: none;
background:#fff;
color:#585858;
border:none;}
.contact-form-button:active {
position: relative;
top: 1px;
}
</style>

<table width="520" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td width="250" style="padding:5px;background:#ccc;"><form name='contact-form'>Nombre<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>Email<span style='font-weight: bolder;'></span><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>Mensaje<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/><input class='contact-form-button contact-form-button-submit id='ContactForm1_contact-form-submit' type='reset' value='Borrar'/> <div style='text-align: center; max-width: 222px; width: 100%'><p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p><p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p></div></form></td><td width="250" style="padding: 5px;background:#ccc;" align="left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd4ErMSoDvDab87I_rFX1XmoOtZygftEqcd1lnguI_Wg3aRPP-NoT3wNllIog44_VChslOQbSPmHT6fFK6P-6_uYKPa1cMZ4-ca7bGxF_PRP949ugVVn2_8rSDSB5A6Mwqrg56TScnoIY/w267-h250-no/formulario-contacto1.jpg"/></td></tr></table>

Estilo 2:
formulario de contacto blogger
<style type="text/css">
.contact-form-button {
cursor:pointer;
height: 32px;
line-height: 28px;
font-weight:bold;
border:none;}
.contact-form-button {
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
margin-top:2px;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
background:#fff;
color:#585858;}
.contact-form-button:hover {
text-decoration: none;
background:#CFCDCD;
color:#000;
border:none;}
.contact-form-button:active {
position: relative;
top: 1px;}
</style>

<table width="520" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td width="250" style="padding:5px;color:#fff; background:#414040;"><form name='contact-form'>Nombre<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>Email<span style='font-weight: bolder;'></span><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>Mensaje<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/><input class='contact-form-button contact-form-button-submit id='ContactForm1_contact-form-submit' type='reset' value='Borrar'/> <div style='text-align: center; max-width: 222px; width: 100%'><p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p><p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p></div></form></td><td width="250" style="padding: 5px;background:#414040;" align="left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQULH71gAtgi8sLZhu37qCyRjLGZjnWzthOniXK_g6hIs0KAkVicLy4rcewlPY9YUcrQQU9TagGn-u8cnZ3hpTpbN7sBtUDWXB6H9WPG2mQROVKfWv1vgj9Un3E1zgM6b4vFWdCLuvZdg/w267-h250-no/1.gif"/></td></tr></table>

Estilo 3:
formulario de contacto blogger
<style type="text/css">
.contact-form-button {
cursor:pointer;
height: 32px;
line-height: 28px;
font-weight:bold;
border:none;}
.contact-form-button {
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
margin-top:2px;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
background:#fff;
color:#0B37FC;}
.contact-form-button:hover {
text-decoration: none;
background:#fff;
color:#000;}
.contact-form-button:active {
position: relative;
top: 1px;}
</style>
<table width="520" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td width="250" style="padding:5px;color:#fff; background:#0B37FC;"><form name='contact-form'>Nombre<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>Email<span style='font-weight: bolder;'></span><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>Mensaje<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
<input class='contact-form-button contact-form-button-submit id='ContactForm1_contact-form-submit' type='reset' value='Borrar'/> <div style='text-align: center; max-width: 222px; width: 100%'><p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p><p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p></div></form></td><td width="250" style="padding: 5px;background:#0B37FC;" align="left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiQrnPDH9NQEa5JlM-6mKe_-hw03HLSYDqVE1wwalcct-OcauOfzvDLMzwGcJypAXZ921qPT3rlyAIcBPpCM1yebhQkb4sh6EhUu8FA_r3TYUVpJXuzdQYF_oGgFfsIWQ9kFcBemLt2Xw/w267-h300-no/email-marketing1.jpg"/></td></tr></table>

Estilo 4:
formulario de contacto blogger
<style type="text/css">
.contact-form-button {
cursor:pointer;
height: 32px;
line-height: 28px;
font-weight:bold;
border:none;}
.contact-form-button {
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
margin-top:2px;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
background:#fff;
color:#000;}
.contact-form-button:hover {
text-decoration: none;
background:#D2F7E1;
color:#000;
border:none;}
.contact-form-button:active {
position: relative;
top: 1px;}
</style>
<table width="520" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td width="250" style="padding:5px;color:#fff; background:#0CB753;"><form name='contact-form'>Nombre<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>Email<span style='font-weight: bolder;'></span><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>Mensaje<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
<input class='contact-form-button contact-form-button-submit id='ContactForm1_contact-form-submit' type='reset' value='Borrar'/> <div style='text-align: center; max-width: 222px; width: 100%'><p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p><p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p></div></form></td><td width="250" style="padding: 5px;background:#0CB753;" align="left"><img src="http://www.brillomart.com/img/contactof.jpg"/></td></tr></table>

Estilo 5:

formulario de contacto blogger
<style type="text/css">
.contact-form-button {
cursor:pointer;
height: 32px;
line-height: 28px;
font-weight:bold;
border:none;}
.contact-form-button {
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
margin-top:2px;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
background:#fff;
color:#000;}
.contact-form-button:hover {
text-decoration: none;
background:#D67878;
color:#000;
border:none;}
.contact-form-button:active {
position: relative;
top: 1px;}
</style>
<table width="520" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td width="250" style="padding:5px;color:#fff; background:#A90A0A;"><form name='contact-form'>Nombre<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>Email<span style='font-weight: bolder;'></span><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>Mensaje<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
<input class='contact-form-button contact-form-button-submit id='ContactForm1_contact-form-submit' type='reset' value='Borrar'/> <div style='text-align: center; max-width: 222px; width: 100%'><p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p><p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p></div></form></td><td width="250" style="padding: 5px;background:#A90A0A;" align="left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6SY5_yzwvRd6xV33uhdJ4YkJxVCwAqZjGdlTbBjjLWybLX5hW3KpT-bdMh21lob04NYbG3k3SFcack9nhd0cZONpTOz4l7Jb7NnKD-kiIJgNXC4JARa-p1GmDTdkzpKoLusJV1BxHV-k/w244-h284-no/contacto.jpg"/></td></tr></table>

Finalmente publicar la página.
Imprimir artículo

No hay comentarios:

Publicar un comentario

Mil Trucos Blogger