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

Ranking de visitantes: Top 10

En Libros que voy leyendo seguimos creciendo y explorando todas las posibilidades de Blogger. Esta vez hemos editado nuestro primer gadget, el Top 10 Visitantes.

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

(Actualización 13/10/2011: Reducimos los pasos necesarios a la mitad!)


1- Haz clic en Añadir al Blog

2- Selecciona el blog al que quieras añadirlo y haz clic en "Configurar gadget"

3- No hace falta que le pongáis título porque ya lo tiene, sólo debéis seleccionar "Guardar" y ya está! ¡El top 10 visitantes aparecerá el sidebar de vuestro blog!


Manual antiguo:

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 lateral (Sidebar) en el que queramos que aparezca el Top visitantes



3- Elegimos la opción "Añade tu propio"



4- En el recuadro pega la siguiente dirección URL:




5- Haz clic en el botón "Añadir por URL"

6- Dale a "Guardar" ¡Y ya está! La primera vez que visitéis la página tardará unos segundos en cargar pero no os preocupéis, es normal, en las visitas posteriores ya estará en su sitio desde el comienzo.

Si tenéis alguna sugerencia, o queréis personalizar algún apartado del gadjet no dudéis en comentarlo. Puedo hacer uno específico para vosotros. Por ejemplo, si en vez de "Top 10 visitantes" queréis que ponga "Top 10 lectores" o "Top 10 amigos", o cambiar "x visitas" por "x lecturas" o "x cotilleos"... hay muchas posibilidades!

Lo dicho, estamos aquí para lo que queráis.

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

Saludos!
Lourdes y Edu

PD: La única pega que tiene el gadget es su dependencia del menú de seguidores, si este último no aparece el gadjet tampoco lo hará ya que no tiene de dónde recoger los datos para mostrar las estadísticas.

De momento tenemos una solución temporal para subsanar la desaparición del menú seguidores ya publicada aquí: ¿Cómo solucionar la desaparición del menú de miembros/seguidores? ¡Esperemos que Blogger lo solucione pronto! 



Related Posts Plugin for WordPress, Blogger...
.

Visitantes recientes

En Libros que voy leyendo seguimos creciendo y explorando todas las posibilidades de Blogger. Esta vez hemos editado el gadget Visitantes recientes.


Es totalmente configurable, ya que podéis elegir el tamaño de las fotos y la cantidad de filas y columnas. ¿Cómo instalarlo? ¡Es muy fácil! Sólo tenéis que seguir los siguientes pasos


1- Haz clic en Añadir al Blog

2- Selecciona el blog al que quieras añadirlo y haz clic en "Configurar gadget"

3- Si queréis podéis configurar el número de caras en cada fila (faces per row) y el número de filas (number of rows). El tamaño de las fotos es también configurable gracias al menú desplegable. Si queréis ver cómo quedan vuestras configuraciones antes de añadir el gadget al blog, podéis hacer clic en Actualizar.

4- Una vez tengáis el gadget configurado a vuestro gusto, debéis hacer clic en Guardar y ya esta! Tendréis el Visitantes Recientes en vuestro blog!

Saludos!
Lourdes y Edu
.

Prueba plantilla reseña

.

Prueba plantilla prereseña

.