Formulario de Contacto Personalizado

Para personalizar el formulario de contacto que nos proporciona Blogger, en nuestro blog ir a
Plantilla→ Personalizar→ Diseñador de Plantilla→ Avanzado→ Añadir CSS → Añadir código CSS personalizado y en el recuadro pegar el siguiente código.

/* Formulario de Contacto Personalizado
-------------------------------------------- */
.contact-form-widget {/* Contenedor general */
width: 500px; /* Ancho */
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: url(Url de la Imagen); /* Color de fondo */
color: #eee; /* Color de la fuente*/
}
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-button-submit {/*Cajas para insertar datos */
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-button-submit {/*Botón de envío */
border-color: #fff;/*Color del borde*/
background: #cc6600;/* Color de fondo */
color: #fff; /*Color de la fuente*/
}
.contact-form-button-submit hover {/*Botón de envío */
border-color: #fff;
background: #66bbdd; /* Color de fondo al pasar el cursor*/
color: #fff;
}

Para finalizar presionar Aplicar al Blog

→ Donde dice width: 500px; /*Ancho*/ para que el Gadget HTML/Javascript sea ubicado debajo del main-grapper (contenedor de las entradas)

◙ Se pueden cambiar todos los valores que están en rojo

►Ver Tabla de colores