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/AVvXsEhJcyWptIuwKOlX2sH0w67i7fOGUJJmlkFjySYSZuph5nUwf5Jmllp9wRFZ1A3h2T-ABAWP2ENx6qPjy-P6KI_Gwqdglvyu4eEPaJAHuIk-XeJulLjbU82OCNQ8eNJiVATSSnTGlLGw83q8/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.
a las
Etiquetas:
RSS
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
52 comentarios:
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.
Interesante Rosita. Gracias. Seria posible hacer lo mismo usando algún tipo de imagen alentando a que comenten no? Salu2
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
Gracias Rosa por el truco mua!! http://www.thesharefree.com/
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 :)
: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!!!
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
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.
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.
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.
@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!
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;
Graciela ¡Genial corazón! ¡Muakisss! :D
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
Nelson Díaz A mi no me pasa...y he probado con todos los navegadores...:O
rEaLiStA ¡Gracias!:D Quedo a la espera...
BanakaBanaka!! ¡Cuidadin que te lo pisas!! Ja,ja,ja, eres la monda :D
Jo que pena Rosa no me funciona :( crees que puede haber otra forma?
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
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
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.
Elizabetha Souvre ¡Gracia corazón!
En cuanto revise mis seguidores en Twitter, te "follow" yo también. :D
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.
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 ;)
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?
tengo todo puesto tal y como dices "SI" en las 2 cosas
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...
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 ;)
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.
Eso ya me parece exagerado
Ademas, el RSS nunca me ha parecido muy productivo...
aah vale, muchas gracias!!!!
Francisco Bórquez™ Depende...para mi es primordial en un blog.
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!
El Moderador Lo siento, pero no hago intercambio de enlaces.
Soy C, millones de gracias, hice lo que me dijiste y ya tengo la opción comentarios, Gracias. mARIA
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
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
Hola, soy Anna, al fin he conseguido poner un boton flotante en mi blog, muchas gracias.
http://feinaperthothom.blogspot.com/.
Muchas gracias por el truco esta increible
http://cronicasdeunamovida.blogspot.com/
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?
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...
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...
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.
Hola Rosa, muchissimas gracias por tu ptonta ayuda :)
Ya lo he puesto en mis 3 blogs y funcionan todos de maravilla... un besote!
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/
Sebas Tienes que colocar el código del paso [2] en tu plantilla antes de ]]></b:skin>
Muchas gracias! ahi pude ponerlo :D
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 :)
Monica Puedes tenerlos dos si te apetece sin problemas.
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
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
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.
Comentar con el formulario antiguo