Formulario de contacto de Blogger desplegable

Ya sabemos que en todo blog, es indispensable un formulario de contacto, no importa que temática sea, siempre que te dirijas a un público, en algún momento ellos necesitarán ponerse en contacto contigo.

Puedes simplemente poner en un lugar visible tu correo electrónico o si prefieres "evitarles la fatiga" de todavía ingresar a su servicio de email a tus lectores opta por integrar un formulario de contacto.

Si usas Blogger, podrás integrarlo fácilmente. El mejor lugar para ponerlo visible puede ser la barra lateral (sidebar) o, aun mejor... flotando en la parte inferior de nuestro blog, para que lo tengan siempre visible y más rápido y fácil de acceder.

Dándole uso a un par de scripts de Blog Nivel, podemos realizar tal objetivo. Empecemos...

1. Antes que nada, nos iremos a Diseño→Añadir Gadget→Más gadgets y elegimos el gadget "Formulario de contacto".

Una vez integrado el formulario de contacto, necesitaremos utilizar un par de scripts para mover y hacer que se desplegue desde la parte inferior. Para ello...

2. Dirigirse a Plantilla→Editar HTML, presionamos CTRL+F, buscamos </body> y justamente antes de este pegamos lo siguiente:

<script src='https://googledrive.com/host/0B0LTexRNPYFjR3J4U3JHR0ZiQUk/FormularioFlotante.js' type='text/javascript'/>

3. Ahora buscamos </head> y antes pegamos:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href='https://googledrive.com/host/0B0LTexRNPYFjR3J4U3JHR0ZiQUk/FormularioFlotante.css' rel='stylesheet' type='text/css'/>

Guarda la plantilla, y listo.

Si tienen algún problema con el formulario, es decir, el cuadro está muy grande o pequeño, borra lo que se encuentra resaltado en amarillo del código anterior, buscas ]]></b:skin> y antes pegas lo siguiente.

/* FORMULARIO DE CONTACTO FLOTANTE /*
.ContactForm, .ContactForm .title
display: none;
text-align: left;
}

/* Estilos genereles */
.floating-ct {
position: fixed;
width: 250px;
right: 0;
bottom: 0;
z-index: 999
}

/* Botón "Contacto" */
.floating-ct-head a {
padding: 5px 10px;
background: #09f;
color: white;
font-weight: bold;
display: inline-block;
display: block;
zoom: 1.1;
}
.floating-ct-head {
text-align: right;
}

/* Caja del formulario */
.floating-ct-body {
height: 330px;
background: white;
border: 1px solid #09f;
padding: 10px;
display: none;
}
.floating-ct-body .ContactForm {
margin: 0;
display: block!important;
}