Botón flotante de RSS

Un botón que invita a las visitas a suscribirse a nuestro feed.

La diferencia de este botón con los que vemos habitualmente en cualquier blog, es que este aparecerá "flotando" al borde derecho de nuestra pantalla y permanecerá en una posición fija mientras hacemos scroll en la página.

Podéis verlo funcionando en este blog de pruebas.

[1] Vamos a Edición HTML de nuestro panel de Blogger y localizamos casi al final de todo el código de la plantilla la etiqueta </body>
Justo sobre esa etiqueta colocamos el código para el icono:

<a class='feedback' href=' URL_DEL_FEED ' style='display:scroll;position:fixed;bottom:270px;right:0px;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheCgUCZZtCqW7VkvstdI22vMwEU9NKoIoW-AXMdXGM08gEaGYtS9I8nuNNty84t3az6a3jvOO9U3K8z8joYXdfSjox9TczdrxzzjPa5pk_KCC74bGhbaoKHtKXLkniVG9v9b0FEnIJgo9I/s320/rss_orange_l.jpg'/></a>

En "URL_DEL_FEED" colocamos la dirección del feed de nuestro blog.

En "bottom" controlamos la altura de la pantalla a la que se verá el botón.

[2] He añadido una clase al botón (feedback) en el código, lo que nos permitirá usando algo de CSS añadirle un efecto de opacidad al botón (opcional):

/* Boton RSS
--------------------------- */
.feedback{ opacity:0.6; filter: alpha(opacity=60);}
.feedback:hover{ opacity:2; filter: alpha(opacity=200);}

En el código está incluida la url de la imagen de color naranja del ejemplo, os dejo el mismo modelo de botón en distintos colores por si queréis usar alguno.

RSS BLUERSS GREENRSS COLOR

0 comentarios:

Publicar un comentario