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
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”
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”
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
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.
1 Un clic en Tema
2 Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, 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 le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
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
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¡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?
ResponderEliminarHola 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
EliminarSaludos.