Botones de Suscripción

Hoy os queremos enseñar a añadir los accesos directos en forma de botones que se desplazan automáticamente  con la página, como los que podéis ver a continuación:


En Libros que voy Leyendo, optamos por añadir 4 formas de suscribirse al blog: Facebook, Twitter, Feed y RSS, pero podéis personalizarlo quitando algunos, si no tenéis perfil en alguna de las redes.

Añadirlo a tu blog es algo muy sencillo, basta con seguir los pasos que se os muestran a continuación:

1- Entra en Blogger, y ve a la sección "diseño" (dos opciones para acceder a "diseño")



2- Haz clic en "Añadir un gadget" en el pie de página:


3- Del menú que os aparecerá (menú "Lo Básico") debéis elegir la opción HTML/Javascript, que aparece así:


4- Os aparecerá un menú como éste:


No hace falta que le pongáis título y en el recuadro titulado contenido, pegáis el código que podéis ver a continuación:



<div style='position: fixed; bottom: 1%; right: 1%;'>
<table border="0"><tr><td>
<div style="clear: both;font-size: 8px;text-align:center;margin-top:-10px;"><a href="http://www.librosquevoyleyendo.com/2011/09/botones-de-suscripcion.html" ><p>Quiero esto en mi blog!</p></a></div>
<a href='DIRECCIÓN DE FACEBOOK' target="_blank"><img border="0"style='background:transparent;border:none;' src="https://lh3.googleusercontent.com/-p_wo_waLTFY/TpHl7s_biOI/AAAAAAAAB1M/ojbhib0hkcU/h80/facebook-icon.png" /></a>
<a href='DIRECCIÓN DE TWITTER' target="_blank"><img border="0"style='background:transparent;border:none;' src="http://2.bp.blogspot.com/-WIAlw6PxXBA/TfmmiU6tYrI/AAAAAAAAATo/fOx9pdanDVo/s1600/twitter-icon.png" /></a>
<a href="DIRECCIÓN DEL FEED" target="_blank"><img border="0"style='background:transparent;border:none;' src="http://2.bp.blogspot.com/-FvrOQNuGUQI/Tfmm2ZVVRAI/AAAAAAAAATw/9Zmy123uCZA/s1600/rss-icon.png" /></a>
<a href='DIRECCIÓN DE VUESTRA LISTA DE CORREO' target="_blank"><img border="0" style='background:transparent;border:none;' src="http://4.bp.blogspot.com/-WrDypC0Ot5s/TfmViMlMS1I/AAAAAAAAATY/8Rp7MK0FIWc/s1600/rss-mail.png" /></a>
</td><td>
</td></tr></table>
</div>




Antes de guardar, deberéis personalizar todo ese galimatías para que funcione en vuestro blog, para ello debéis sustituir algunos elementos del código:


PARTE ROJA = CÓDIGO: Imprescindible: es la cabecera del código. No modificar a no ser que conozcas el lenguaje HTML.

PARTE AZUL = FACEBOOK: Debéis poner vuestra dirección de Facebook en el lugar indicado.
(Si no queréis que aparezca este botón, podéis prescindir de toda esta parte del código)

PARTE CELESTE = TWITTER: Debéis poner vuestra dirección de Twitter en el lugar indicado.
(Si no queréis que aparezca este botón, podéis prescindir de toda esta parte del código) 

PARTE NARANJA = FEED: Debéis poner vuestra dirección del Feed en el lugar indicado.
(Si no queréis que aparezca este botón, podéis prescindir de toda esta parte del código) 

PARTE AMARILLA = LISTA DE CORREO: Debéis poner la dirección para suscribirse a vuestra lista de correo en el lugar indicado.
(Si no queréis que aparezca este botón, podéis prescindir de toda esta parte del código) 

PARTE ROJA = CÓDIGO: Imprescindible: es el pie del código. No modificar a no ser que conozcas el lenguaje HTML.


Ejemplo del código para nuestro Blog de pruebas: (Sólo botones de Facebook y Twitter)

<div style='position: fixed; bottom: 1%; right: 1%;'>
<table border="0"><tr><td>
<div style="clear: both;font-size: 8px;text-align:center;margin-top:-10px;"><a href="http://www.librosquevoyleyendo.com/2011/09/botones-de-suscripcion.html" ><p>Quiero esto en mi blog!</p></a></div>
<a href='http://www.facebook.com/profile.php?id=100002962815807' target="_blank"><img border="0"style='background:transparent;border:none;' src="https://lh3.googleusercontent.com/-p_wo_waLTFY/TpHl7s_biOI/AAAAAAAAB1M/ojbhib0hkcU/h80/facebook-icon.png" /></a>
<a href='http://twitter.com/librosqvleyendo' target="_blank"><img border="0"style='background:transparent;border:none;' src="http://2.bp.blogspot.com/-WIAlw6PxXBA/TfmmiU6tYrI/AAAAAAAAATo/fOx9pdanDVo/s1600/twitter-icon.png" /></a>
</td><td>
</td></tr></table>
</div>


Como podéis ver, hemos prescindido de las partes naranja y amarilla, colocando nuestras direcciones de Facebook y Twitter en los lugares indicados dejando el resto sin modificar.


Una vez hayáis personalizado el HTML y lo hayáis pegado en el menú anterior, podéis hacer click en guardar y ya tendréis vuestros propios botones flotantes!

El resultado en nuestro Blog de pruebas es este par de botones colocados en la parte inferior derecha de la pantalla, que se desplazan con ella:


Para más gadgets o manuales no dudéis en visitar la sección Tutoriales

Próximamente publicaremos un tutorial avanzado, en el que explicaremos cómo añadir 2 botones de Facebook en vez de uno (Uno para el perfil y otro para la página, como hemos hecho nosotros), explicación de ciertas partes del código que permiten colocar los botones flotantes arriba-abajo-izquierda-derecha, añadir otros botones de otras redes sociales, etc.

Saludos a todos!
Lourdes y Edu



Related Posts Plugin for WordPress, Blogger...
Siguiente
« Anterior

7 comentarios, ¡deja el tuyo!

Pulsa aquí para comentarios, ¡deja el tuyo!
9 de octubre de 2011, 20:53 ×

¡Muchísimas gracias! En cuanto tenga un ratito pruebo a ver si me sale :D
Un beso

Responder
avatar
admin
Edu
12 de octubre de 2011, 22:21 ×

Un placer Inés! Ya vemos que lo has puesto bien y hasta has colocado un botón de blogger! :)

Gracias Carol!

Saludos
Edu

Responder
avatar
admin
23 de octubre de 2011, 15:13 ×

Hola chicos :)
¿Para cuando el tutorial de como colocarlos en un lado u otro? Lo estoy deseando :)
Un beso y cuidaros

Responder
avatar
admin
Edu
27 de octubre de 2011, 20:50 ×

Si no lo tengo listo esta semana lo publicamos la siguiente Mari Paz!

Saludos
Edu

Responder
avatar
admin
Isa
5 de noviembre de 2011, 17:25 ×

Estoy encantada con los tutoriales, y como por pedir que no quede, me gustaría uno para hacer un banner.

Responder
avatar
admin
27 de agosto de 2013, 16:57 ×

Hola. lo he tenido puesto en mi blog sin ningún problema durante un tiempo, pero ahora me sale un icono de una señal como de tráfico de prohibido pasar.... en blanco (aquí en el blog veo que sale igual) ¿hay solución?

un saludo
Maka

http://bookceandoentreletras.blogspot.com

Responder
avatar
admin
Gracias por tu comentario :)