1 ene 1979

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...

7 comentarios:

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

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

    Gracias Carol!

    Saludos
    Edu

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

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

    Saludos
    Edu

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

    ResponderEliminar
  6. 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

    ResponderEliminar

Recuerda visitar nuestra política de privacidad. Esperamos tus comentarios