Formulario de Contacto de Blogger personalizado utilizando CSS

Para modificar el diseño del Gadget de Formulario de Contacto Oficial Blogger solo utilizaremos código CSS


Para instalar la primera lista de entradas seguir los siguientes pasos:


Nos dirigimos al Escritorio Blogger.

• Hacemos clic en Diseño. 
• Hacemos clic en Añadir un Gadget  de Formulario de contacto y lo ubicamos donde queramos poner el gadget. 

Luego vamos a:

• Plantilla
• Personalizar
• Diseñador de Plantillas
• Avanzado
• Añadir Código CSS personalizado, en el recuadro pegar el siguiente Código:

/* Formulario de Contacto ---------------------------*/ .contact-form-name, .contact-form-email, .contact-form-email-message { max-width: 270px; width: 100%; font-weight:bold; } .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover { border: 1px solid rgb(221, 221, 221); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset; } .contact-form-name { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFU2SAV91PAocJJTGkzvc1w0PNJ5Y-OwY2wp-Aa3bex_X2ifg7-4r8zF4dOKVMgbiPBgjGr4XL95RHvFbYiXGEBGm8NcLrVHLVxF7FSw60KdbW9ks6_Q58E1_eQew-t_jL45MMBjpyyiD6/h120/user_12x16.png) no-repeat 2px 5px; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family: Arial,sans-serif; font-size: 12px; font-weight:bold; height: 24px; margin: 0; margin-top: 5px; padding: 5px 15px 5px 28px; border-radius: 3px; vertical-align: top; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; /* Firefox 4 */ -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.2s ease-in-outs; } input.contact-form-name:focus { border: 1px solid rgba(82, 168, 236, 0.8); outline: 0px none; box-shadow: 0px 1px 1px #33aaff inset, 0px 0px 8px #33aaff; border-radius: 3px; } input.contact-form-email:focus { border: 1px solid rgba(82, 168, 236, 0.8); outline: 0px none; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6); border-radius: 3px; } .contact-form-email { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Y4e2r0hcXwArDVOFN5qohK4T-KOtdT4ltA3w8I2eRxUvw0bzd2ZZbXY8ba1XbKl0EWJwYClU96qe7MfPq9_0Zufp4Jq8pErM1TbF3AF1AX2nLCFk2sKP1LXF9e-8K5It34PaBZ5ZHlI/s1600/email.png) no-repeat 2px 5px; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family: Arial,sans-serif; font-size: 12px; font-weight:bold; height: 24px; margin: 0; margin-top: 5px; padding: 5px 15px 5px 28px; border-radius: 3px; vertical-align: top; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; /* Firefox 4 */ -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.2s ease-in-outs; } .contact-form-email-message { background: #FFF; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family: arial; font-size: 12px; margin: 0; margin-top: 5px; padding: 10px; vertical-align: top; max-width: 270px!important; height: 110px; border-radius:4px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; /* Firefox 4 */ -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.2s ease-in-outs; } .contact-form-email-message:focus { border: 1px solid rgba(82, 168, 236, 0.8); outline: 0px none; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6); } .contact-form-button { display: inline-block; vertical-align: baseline; margin: 8px 2px 0px; height: 25px; outline: medium none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial,Helvetica,sans-serif; padding: 0.3em 2em 0.55em; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); border-radius: 0.5em; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); background: none repeat scroll 0% 0% #33aaff; border: 1px solid #33aaff; width: 250px; } input.reset-button { display: inline-block; vertical-align: baseline; margin: 8px 2px 0px; height: 28px; outline: medium none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial,Helvetica,sans-serif; padding: 0.3em 2em 0.55em; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); border-radius: 0.5em; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); background: none repeat scroll 0% 0% rgb(255, 126, 67); border: 1px solid rgb(255, 126, 67); width: 80px; color: #FFF; } input.reset-button:hover { text-decoration: none; border: 1px solid #ff8942; background: #ff8942; } input.reset-button:active { position: relative; top: 1px; } .contact-form-button:hover { text-decoration: none; border: 1px solid #ff8942; background: #ff8942; } .contact-form-button:active { position: relative; top: 1px; border: 1px solid #ff8942; } .contact-form-button-submit:focus, .contact-form-button-submit.focus { border: 1px solid rgb(255, 137, 66); background: none repeat scroll 0% 0% rgb(255, 137, 66); } .contact-form-button-submit:focus:hover, .contact-form-button-submit.focus:hover { border: 1px solid #33aaff; background: none repeat scroll 0% 0% #33aaff; box-shadow: 0px 0px 0px 1px #ff8942 inset, 0px 1px 1px #33aaff; } /*for FireFox*/ input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : 0px;} /*for IE8 */ input[type="reset"]:focus, input[type="button"]:focus { outline : none;}



Así tendrás el Formulario de Contacto personalizado en tu blog de Blogger