Instalación de Aplicaciones Formulario de contacto Blog

instalar un widget flotando en el formulario de contacto del blog . 

Como sabemos el formulario de contacto servicio de correo electrónico es uno de los blog que sirve para conectar entre el visitante y el propietario del blog para comunicarse entre sí personalmente. La forma en que la entrega de mensajes era bastante fácil, sólo tenemos que escribir su nombre, dirección de correo electrónico, y el contenido del mensaje. Así que no se molestan en registrarse en la cuenta de correo electrónico, pero el formulario de contacto está disponible en nuestro propio blog. Ok, sólo a modo de instalación.

El siguiente widget es una combinación de código de formulario de contacto en pares en la página estática. 

1. Abrir el blog> Edición de HTML> Luego puso el código CSS de abajo justo encima de ]]> </ b: skin>

/* CSS Contact Form */
.ContactForm, .ContactForm .title {
 display:none;
}
.floating-ai {
 position:fixed;
 width:250px;
 left:0;
 bottom:0;
 z-index:999;
}
.floating-ai-head a {
 padding:5px 10px;
 background:#2997e0;
 color:#fff;
 font-weight:400;
 display:inline-block;
 font-family:Oswald,sans-serif;
 text-transform:uppercase;
 *display:block;
 zoom:1;
 transition:all 0.3s linear;
}
.floating-ai-head a:hover {
 background:#2588ca;
 color:#fff;
}
.floating-ai-body {
 height:285px;
 background:#fff;
 padding:10px;
 display:none;
 box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
}
.floating-ai-head {
 text-align:left;
}
.floating-ai-body .ContactForm {
 margin:0;
 display:block!important;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
 background:#eee;
 margin-bottom:10px;
 border:none;
 color:#8f8f8f;
 padding:2px;
 width:75%;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
 background:#f5f5f5;
 transition:all 0.3s linear;
}
#ContactForm1_contact-form-email-message {
 background:#eee;
 margin-bottom:10px;
 border:none;
 color:#8f8f8f;
 font-family:Oswald,sans-serif;
 padding:5px;
 width:95%;
}
#ContactForm1_contact-form-submit {
 width:100px;
 color:#fff;
 font-family:Oswald,sans-serif;
 text-transform:uppercase;
 font-weight:400;
 font-size:14px;
 cursor:pointer;
 background:#57ad68;
 border:none;
 float:left;
 transition:background 0.3s linear;
}
#ContactForm1_contact-form-submit:hover {
 background:#468a53;
}

2. Instale el script de abajo justo encima de  </ body> y guardar la plantilla.

<script type='text/javascript'>
//<![CDATA[
$('body').append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">Contact</a></div><div class="floating-ai-body"></div></div>');
$('.ContactForm').appendTo('.floating-ai-body');
var slide_up_ai = false;
$('.floating-ai-head a').click(function(){
 if (!slide_up_ai) {
 slide_up_ai = true;
 $('.floating-ai-body').slideDown();
 } else {
 slide_up_ai = false;
 $('.floating-ai-body').slideUp();
 }
});
//]]>
</script>

3 A continuación, poner el widget formulario de contacto en Diseño> Añadir Gadget> Seleccionar Otros Gadgets> y añadir widgets Formulario de Contacto

4 Por último, guarde el widget y ver los resultados