52

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='http://1.bp.blogspot.com/_gcgjC6O3wCs/SgrRWQQjeXI/AAAAAAAAAQs/WPzM1JnSwXI/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

Entradas Relacionadas:

52 comentarios:


LokoGB

Ya intente colocar ese botón pero no combina con mi blog :( Porcierto Rosa :D ya puedo hacer una entrevista sobre Blogger, si te parece bien la idea te mando las preguntas por correo.

Surplus21

Interesante Rosita. Gracias. Seria posible hacer lo mismo usando algún tipo de imagen alentando a que comenten no? Salu2

web.nenasok

Gracias rosa por el truco lo implementare en mi blog, rosa una consulta por que es que despareci de google? con mis palabras claves, blog : www.nenasok.com

Cristobal

Gracias Rosa por el truco mua!! http://www.thesharefree.com/

ana

Hola Rosa, perdon que te ponga aquí el comentario pero no se donde ponerlo.

Mira, mi problema es que quiero añadir margen a la derecha, en la zona donde están los post, a la izquierda esta el margen pero a la derecha el texto es cortado por la linea divisoria de la sidebar. Seguro que es más fácil verlo, aqui te pongo la URL.

http://pruebadqq.blogspot.com/

Gracias :)

Graciela

:D hola Rosa Rosa!!!...he colocado subscribir como una forma más práctica de comunicarnos, le agregué el botoncito en html...no sabía cómo hacerlo de otra manera...mira que nos has traído 'ideas' con ésto...besitos!!!

Papito Macho Montador

Una cosita Rosa, que código tienes para que se muestren así los comentarios??, es que los tuyos me gustan mucho, así separados el nombre de la persona que opinó con el comentario y con color de fondo azulito, es precioso, además lleva numerados los comentarios, que más se puede pedir? jejeje me lo podrias decir por favor?? Gracias

Nelson Diaz

Saludos mi apreciada Rosa, desde el dia de ayer mi blog presenta un problema que bloquea el acceso al mismo, arroja el siguiente mensaje al intentar acceder:
"internet explorer no puede abrir el sitio.... operacion anulada"

He investigado, pero no le encuentro solución.

Podrias tu ayudarme amiga??

Nota: También me ha ocurrido en el tuyo, desde equipos diferentes, al intentar enviar esta consulta.. Estoy enviandola desde Google Chrome.

rEaLiStA

Muchas gracias Rosa, como siempre ayudandonos pero bueno algun dia te lo pagaremos,jejejej

Solo dame un poco de tiempo para enviarte unos scripts que pueden ser muy utiles para los blog y asi los publiques.

Hasta luego y saludos.

BanakaBanaka!!

Ligerito, ligerito...Rosa, me encanta... Y con un poco de CSS en vez de la imagen tampoco quedaría mal,no?

Bueno, con todo el morro te voy a dejar un enlace a mi última entrada, que también va sobre código (pocas pero seguras...jejeje):
JQuery ToolTips personalizadosBueno, tu y todos tus lectores quedan invitados.

Un beso!!
★Iván.

Rosa

@LokoGB Cuando quieras :D

@Surplus21 Claro, puedes usar cualquier imagen apropiada.

@web.nenasok Ni idea :O Eso solo lo sabrá Google, supongo :S

@Cristobal ¡Gracias a ti!

Rosa

ana Localiza esta parte del código:

.post {
margin-top:0px;
margin-right:0px;
margin-bottom:30px;
margin-left:0px;
}
Y justo debajo de .post {

añade esto:

padding-right: 10px;

Rosa

Graciela ¡Genial corazón! ¡Muakisss! :D

Rosa

Papito Macho Montador Estas dos entradas te ayudarán:

http://elescaparatederosa.blogspot.com/2007/08/color-de-fondo-en-los-comentarios.html

http://elescaparatederosa.blogspot.com/2009/04/numeracion-de-comentarios.html

Rosa

Nelson Díaz A mi no me pasa...y he probado con todos los navegadores...:O

Rosa

rEaLiStA ¡Gracias!:D Quedo a la espera...

Rosa

BanakaBanaka!! ¡Cuidadin que te lo pisas!! Ja,ja,ja, eres la monda :D

ana

Jo que pena Rosa no me funciona :( crees que puede haber otra forma?

Elizabetha Souvre

Oh Rosa me pasa seguido en los blogs ultimamente..dejo un comentario y no se guarda sniff

solo pasaba a visitare y decirte que volvere luego a aprender muchas cosas sobre como conformar blogs (que me fascinan desde que empece hace casi tes años y todo se hacia directamente en la platilla htlm) que he dejado de lado por tempo...es que estoy terminando mi tesis y estoy histerica @_@

Te sigo en Twitter

=)

Gracias por tu valiosa ayuda

Yeltsin_Nicolas

Hola! amiga! como le puedo! hacer para que los comenten los usuarios Rapidamente en mi BLOG!
que apareciera

Nombre
Sitio de web
Mensaje!

Sin tener que registrarse y tambien si redirigir a otra pagina para poner el antibot etc...
por favor! amiga :D

Rosa

ana Tiene que funcionar así, porque solo es CSS y un poco de código HTML...¿lo has colocado en algún blog donde yo pueda mirar el error? Si es así dime donde para mirarlo...ha de estar mal la url de la imagen o alguna "tonteria" sin importancia seguro.

Rosa

Elizabetha Souvre ¡Gracia corazón!
En cuanto revise mis seguidores en Twitter, te "follow" yo también. :D

Rosa

Yeltsin_Nicolas Eso también me gustaría a mi :( pero es Blogger quien tiene acceso a la parte de comentarios, nosotros no podemos modificar nada ahí, lo siento.

ana

Toma Rosa, esta es la url de mi blgo de pruebas http://pruebadqq.blogspot.com/ aquí coloque lo que me dijiste y no da nigun resultado, como si no lo hubiese puesto. Gracias por tu interes ;)

Rosa

ana Me da la impresión de que es cosa de tu editor de entradas en la configuración...

En tu panel Configuración- Formato comprueba si tienes puesto SI en Convertir saltos de línea

Y en Configuración - Básico también SI en ¿Mostrar el modo de composición para todos sus blogs?

ana

tengo todo puesto tal y como dices "SI" en las 2 cosas

Rosa

ana Perdona :$ me despisté...

Mira en esta parte:

@media all {
div#main {
float:right;
width:54%;
margin-right: 10px;
margin-left: 10px;
padding:20px 0 10px 1em;

En esa última línea pon algo así:

padding:20px 10px 10px 1em;

O sea, donde estaba el 0 he puesto 10px, si lo necesitas pones más o menos, ahí creo que es el cambio necesario...

ana

ueeeeeeeeeee Rosa la mejor, Rosa la mejor, Rosa la mejor jejeje :D ahora si, ya esta puesto el margen y quedo bien.

Solo que me di cuenta de una cosita, fijate en esta entrada

http://pruebadqq.blogspot.com/2009/05/descargar-star-trek-xi-alta-calidad.html?showComment=1243119148524#c2938192479089262762

Ves los ultimos comentarios? se salen del marco donde deberían estar, algun consejo para evitar esto? Muchas gracias Rosa eres, la mejor ;)

Rosa

ana Eso lo hace el formulario de comentarios...como ves, si escribes mucho texto sin cambiar de línea, le sale un scroll (que no debería de salir) que permite alargarse de forma exagerada.
En el CSS de los comentarios está todo correcto, pero si usas el formulario de ese modo, eso pasará en tu blog, en el mio y en cualquiera...lo bueno es que nadie lo hace, sino es para fastidiar.

Francisco Bórquez™

Eso ya me parece exagerado

Francisco Bórquez™

Ademas, el RSS nunca me ha parecido muy productivo...

ana

aah vale, muchas gracias!!!!

Rosa

Francisco Bórquez™ Depende...para mi es primordial en un blog.

El Moderador

Hola te agregue a mi blog de tutoriales y ebooks si les interesa pueden hacer lo mismo se los agradeceria..

http://tutorialestodosonline.blogspot.com

Saludos!

Rosa

El Moderador Lo siento, pero no hago intercambio de enlaces.

c

Soy C, millones de gracias, hice lo que me dijiste y ya tengo la opción comentarios, Gracias. mARIA

COCOFANSCLUB ♥

HOLA ROSA PERDON POR MI IGNORANCIA!!PERO ME PUEDES DECIR DONDE ENCUENTRO EL EFECTO SUBIR BAJAR PARA MI BLOG,LO HE VISTO CON ORIGINALES MOTIVOS !!
GRACIAS UN BESO

Rosa

COCOFANSCLUB ♥ Yo solo he publicado el de "subir" si quieres usar los dos, puedes visitar a Gem@:

http://gemablog-.blogspot.com/2009/04/subir-y-bajar-con-efecto-deslizante.html

Anna Mª de la Mota

Hola, soy Anna, al fin he conseguido poner un boton flotante en mi blog, muchas gracias.
http://feinaperthothom.blogspot.com/.

Pancho Tama

Muchas gracias por el truco esta increible

http://cronicasdeunamovida.blogspot.com/

Pancho Tama

Una duda... el truco no vale para internet explorer??? en ese exporardor no funciona ademas que lios que tienen explorer con los archivos PNG ¿habra solucion?

Rosa

Pancho Tama En mis pruebas se veía correctamente en IE, otra cosa es si usas .png la gran mayoría de las veces IE no muestra ese formato o lo hace añadiéndole fondo a la imagen...

Alegna

Hola a mi me funciona el botón, solo tengo una duda... cuando dices:

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

Como sé cual es la direción del Feed de mi blog?

Muchas gracias por todo tu trabajo...

Rosa

Alegna Depende del blog. Por ejemplo, para "la casita verde" sería esta:

http://lacasitaverde.blogspot.com/feeds/posts/default

Paralos otros lo mismo, solo que cambias la url del blog por la del blog donde vas a colocarlo.

Ah, asegurate de que al colocarlo en un blog, en Configuración - Feed del sitio - Permitir feeds del blog tengas puesto "Completo" así podrán recibir tus entradas en sus lectores de feed los visitantes que se suscriban a tu blog.

Alegna

Hola Rosa, muchissimas gracias por tu ptonta ayuda :)

Ya lo he puesto en mis 3 blogs y funcionan todos de maravilla... un besote!

Sebas

rosa rosa la maravillosa! muchas gracias, me quedo bien de bien. lo que si, el efecto de opacidad no se como ponerselo. me lo explicas? es que soy un novato en esto xD

http://todoanime-descargadirecta.blogspot.com/

Rosa

Sebas Tienes que colocar el código del paso [2] en tu plantilla antes de ]]></b:skin>

Sebas

Muchas gracias! ahi pude ponerlo :D

Monica

Muy Bueno lo del boton,y queda muy mono!!! :o no importa que deje el otro que ya tenia colocado Rosy o lo tengo que quitar??? Besotes :)

Rosa

Monica Puedes tenerlos dos si te apetece sin problemas.

Cocofansclub

Que bueno este boton ROSA!!me quedo lindisimo!! y con el efecto de opacidad mucho mas atractivo,yo tampoco sabia donde colocar la opacidad...pero aprendi que leyendo todos los comentarios encontras todas la respuetas!!!
gracias MAESTRA!!!
UN BESOTE
C.M

Rosa

Cocofansclub Así es...a veces no todas las respuestas, pero si la mayoría o una orientación sobre aquello que buscamos.

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S