add

Como insertar un formulario de contacto flotante en blogger


Como era de esperarse, hoy día aprenderán a realizar un truco muy interesante para blogger, voy a explicar cómo hacer que un formulario de contacto de blogger se haga flotante, que al momento de dar un clic al icono del formulario de contacto se desprenderá automáticamente y así los usuarios puedan dejarle cualquier pregunta o sugerencia de su blog de blogger, este formulario de contacto ahorra espacio y sobre todo funciona en todos los navegadores web. Lo que vamos hacer es añadir el formulario de contacto de blogger en nuestro blog y luego insertaremos unas líneas de código para que funcione este truco para blogger. Anterior mente publique un post sobre como insertar un formulario de contacto para blogger del cual les dejo el enlace. Formulario de contacto para blogger

Como insertar un formulario de contacto flotante en blogger
Como insertar un formulario de contacto flotante en blogger

A continuación mire su demostración en mi blog de demos, el formulario de contacto flotante se encuentra ubicado a la derecha del blog y lleva el nombre de “Contacto” dale un clic y se abrirá.


Les gusto verdad!

Vamos a trabajar

1 Ir a blogger

2 Un clic en “Diseño

Como insertar un formulario de contacto flotante en blogger

Nota: Si ya tienes habilitado el formulario de contacto en tu blog de blogger ya no necesitas seguir estas instrucciones, y si no lo tienes habilitado sigue las siguientes instrucciones

3 Abre un gadget “Añadir un gadget

Como insertar un formulario de contacto flotante en blogger

Se te mostrara una nueva ventana en la cual tendrás que dar un clic en “Más gadgets” en la cual te mostrar el widget “Formulario de contacto” dale un clic y se te desprenderá una ventana nueva en la cual solo basta con dar un clic en “Guardar” y ubícalo donde tú quieras
Mire la imagen a continuación

Como insertar un formulario de contacto flotante en blogger

Eso es todo ya tienes tu formulario de contactos en tu blog de blogger, ahora para realizar el truco de mostrar el formulario de contactos de forma flotante sigue las siguientes instrucciones.

4 Da un clic en “Plantilla

Como insertar un formulario de contacto flotante en blogger

5 Un clic en “Editar HTML

Como insertar un formulario de contacto flotante en blogger
Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Como insertar un formulario de contacto flotante en blogger

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Como insertar un formulario de contacto flotante en blogger

Busca este código

]]></b:skin>

Inserta el siguiente código justo arriba del código que encontraste

/*Formulario de contacto start by ayudadeblogger.com*/
.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a {
 padding: 5px 10px;
 background: #09f;
 color: white;
 font-weight: bold;
 display: inline-block;
 *display: block;
 zoom: 1;
}
.floating-ct-body {
 height: 285px;
 background: white;
 border: 1px solid #09f;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}

Busca este otro código

</body>

Inserta las siguientes líneas de código justo arriba del código que encontraste

<script type='text/javascript'>
//<![CDATA[
/*Formulario de contacto by ayudadeblogger.com*/
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contacto</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.floating-ct-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.floating-ct-body').slideUp();
 }
});
//]]>
</script>

Busca este código

</head>

Inserta el siguiente código arriba del código que encontraste

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Nota: Si ya utilizas un código jQuery en tu plantilla ya no necesitaras insertar el código, pero si no utilizas ningún código jQuery, tendrás que insertarlo en tu plantilla

Eso es todo ahora dale un clic en “Guardar plantilla”, visita tu blog de blogger y mira cómo funciona este formulario de contacto flotante para blogger.

Fácil verdad!

Recuerda suscribirte y recibirás mis nuevas actualizaciones directamente en tu bandeja de entrada

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos

2 comentarios:

  1. ¡Muchas gracias! Si bien pude agregar el widget a mi blog, no logré hacerlo flotante porque el buscador en HTML no encuentra el código: ]]> . ¿Hay algo que se pueda hacer al respecto?

    ResponderEliminar
    Respuestas
    1. Hola Mario, gracias por escribir, con respecto a lo que usted indica, todas las plantillas de Blogger disponen del código que se muestra en este tutorial, para poderle ayudar, por favor hágame saber la dirección URL de su blog de Blogger y con gusto le guiare

      Saludos.

      Eliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios