Gadget de iconos fijo : El Escaparate de Rosa

A solicitud de varias personas explicaré como colocar un gadget de iconos fijos en nuestro blog.
El gadget se mostrará a la derecha de la pantalla y se mantendrá fijo mientras subimos y bajamos usando la barra de scroll para ver los contenidos del blog.

En el gadget están incluidas las imágenes que podéis usar si así lo queréis, aunque será muy fácil utilizar otras que os gusten más.
Las que he utilizado (por si queréis añadir alguna más al gadget del mismo diseño) podéis encontrarlas en Iconspedía.

[1] Copiamos y pegamos el siguiente código en un nuevo gadget HTML/Javascrip:

<div style='position: fixed; bottom: 30%; right: 1%;'/>
<a href="http://www.twitter.com/TWITER USUARIO/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjny0Yl60ssoBJEkK5LHwGe-UXBXMHp9SpMEeW7brA-Fw8WFdDCGVkHjaVaz0daF9-9-GIPSMf4u_1GEvHG5O1SbvMzRObLEpkRfjE3WBVhwBWBbQEL0cBm8LihM_icEzASREh3pj40LB9o/s1600/Twitter+2-32.png" /></a><br />
<a href="http://www.facebook.com/FACEBOOK USUARIO/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFh2GrgiqHkUfzC35bvvddbtEuNM2bgKqTjY0t_Bg4iP7ZQTN_YNffktR80F7hCDcmRtD0W1TsGboQCcfyN1DDDHpnKFjOHq0AaUHU7lEQtsLtn1ary7oOxwU_KsAx7QY8fK6yCgiLM6OE/s1600/Facebook-32.png" /></a><br />
<a href="http://feeds.feedburner.com/FEEDBURNER ID" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHgzAtnGicgyovrSkJIC55hl8KDqiS1hPVlGjJv53HPzmqo_muYhzLScdTXEOTVcgPwHH1B_iMJIRm8b0y_bSz_ObEKQuB8O707dAaddw2FE1xrGM-3xWj2hbjWGa9NteeweLrY9EXF4Lw/s1600/RSS-32.png" /></a><br />
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER ID&loc=es_ES" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg32_GqQWYEY-bysoZzgyXWdzbKwgo-dyMQDZQnsMnSiRQ3PTvAVMt2wy0D7lyBHJDcJkyNVDNeiDgInLUv-ehXU2Ln_wzb0x_trbrgYfkRYNe5Mem07Y3u_YZ93xlb0Q6g04op_MUlxVs7/s1600/Mairssl_32.png" /></a></div>

[2] Cambiamos ahora las partes del código que he resaltado en negrita por nuestros datos:

TWITER USUARIO El nombre/nick que utilizamos en nuestra cuenta de Twitter.

FACEBOOK USUARIO El nombre o id de nuestra página en Facebook.

FEEDBURNER ID El nombre de nuestro Feed en FeedBurner.
Este dato aparece dos veces porque el último icono posibilita la suscripción por correo a nuestros entradas.

[3] Destacadas en color verde están las urls de las imágenes que he utilizado, solo hay que cambiar cada url por la de la imagen que queramos utilizar.

[4] Para cambiar la posición del gadget (mostrarlo más arriba o más abajo y más separado del borde de la pantalla) Nos fijamos en esta parte de la primera línea del código: bottom: 30%; right: 1%; donde bottom sería la distancia del gadget a la parte de abajo de la pantalla y right sería la distancia o separación al borde de la misma.

VER EJEMPLO ONLINE:GADGET DE ICONOS FIJO

36 comentarios:

Eva Flores: Hola Rosa! un truco genial. ¿Se le podría añadir el efecto de transparencia como en los iconos de la sidebar?; 2/9/10
Exitad: Hola Rosa, tu blogger siempre me ayuda mucho, pero me gustaria saber, como puedo poner un menu super chulo y que se pueda modificar en mi cuenta blogger, por ejemplo uno como este: http://www.pubyfiesta.com/base.php?name=pubevent&pub_id=002739 porfavor respondeme, aunque no me prestes esa ayuda, asi puedo saber que has leido mi comentario contestame en: www.baracoa.tk , GRACIAS!; 2/9/10
Unknown: Rosa mi blog es ceciber.blogspot.com Es superhumilde porque no se casi nada de blog pero deseo mejorar ceci; 2/9/10
TheJerryPunck: Exelente; 2/9/10
Anónimo: *Eva* Si, dame un tiempito y la añado en la entrada... ;); 3/9/10
Anónimo: Dark David No es automático, son tags que añaden a cada entrada con palabras claves referentes a cada entrada para así tratar de posicionarla mejor en los buscadores.; 3/9/10
Anónimo: Exitad Lo siento, pero los comentarios los respondo aquí.; 3/9/10
Unknown: Se puede poner a la izquierda Rosita?? Saludos excelente aporte :); 3/9/10
ABEL HURTADO: Hola Rosita. Tengo mi blog en http://www.jazzconsaxofon.blogspot.com Durante dos años no he tenido problema con mis 3 columnas, pero ahora la tercera side bar aparece desplazada hasta el final de la segunda columna.¡Como se corrige esto? Mil gracias; 3/9/10
Anónimo: ABEL No hay una solución general para eso, habría que saber porque ha pasado...
De todos modos, te aconsejaría volver a cambiar la plantilla, ya que supongo no has mirado tu blog en otro navegador que no sea IExplorer...si lo vieses en Firefox te asustarías... está completamente destrozao y es un cúmulo de errores lo que hay en la plantilla...; 3/9/10
Anónimo: Surplus21Cambiando right por left; 3/9/10
eduiracheta: Hola Rosa me ha gustado mucho tu blog. Me he fijado que tienes en la columna de la derecha, cinco botones para captar seguidores (Rss, facebook...) me gustaría poner en mi blog el primero de ellos, como lo hago?
gracias; 3/9/10
Anónimo: Ed's Gallery
http://elescaparatederosa.blogspot.com/2010/06/gadget-de-marcadores-sociales-en-la.html; 3/9/10
Theemilio_crazy: Hola Rosa, tengo un problema grabe en mi blog y es que me quitaron mis privilegios de adm y me hecharon del blog junto a dos de amigos mios mas que subian a la pag, quien lo hiso se llama Brainiak5 y yo quisiera saber si hay alguna forma de yo poder recuperar mi blog nuevamente... este es el blog http://www.elmundodepeliculas.org

muchas gracias por todo adios!; 4/9/10
Flashes!: Ah bueno, pues perdón pero me podrias responder lo qe te pregunte en la tercera firma? Porfavor & Gracias por leer :)Por cierto se que te saldra otro nombre pero soy EXITAD, :); 4/9/10
Exitad: Hola Rosa, sabes lo del menu, ya me di cuenta que lo explicas por ahi, asi que no lo necesito ahora lo que necesito es saber como has hecho que te salga sabes en la pestaña de internet o mozilla, lo que sea.. sabes que siempre sale un dibujito? a mi me sale una b de blogger y a ti te sale una chica en un ordenador o asi .. sabes lo que te digo? me podrias decir como puedo cambiar la b de blogger por lo que yo quiera?; 4/9/10
Wuilmer Bolivar: Gracias.! ^^
No sabia de este truco, ya esta implementado.!

Sentí un poco de curiosidad, en enlace en la parte superior indica la cantidad de comentarios realizados.

Queda muy bien eso, en fin felicitaciones por tu blog esta de maravilla y gracias por compartir este método.

Saludos.!; 5/9/10
Anónimo: Dark David Lo único automático ahí, es el borde punteado, que en todos los post mediante CSS, lo demás son etiquetas que se añaden como hacemos en todas las entradas... si te queda la duda...¿porque no preguntas allí?; 5/9/10
Anónimo: Wuilmer Bolivar Gracias a ti!! ;); 5/9/10
Anónimo: Exitad Se lo que dices, si... se llama favicon:
http://elescaparatederosa.blogspot.com/2007/04/favicon-para-el-blog.html; 5/9/10
Anónimo: Theemilio_crazy Pues no se si será posible... si lo es, solo pueden hacerlo los de Blogger y tendrás que demostrar el blog era tuyo... deja tu consulta en el foro de Blogger:
http://www.google.es/support/forum/p/blogger/label?lid=7325950ed6049880&hl=es; 5/9/10
Exitad: Muchas gracias Rosa; 5/9/10
Unknown: Un excelente gadget para implementar. Totalmente funcional y facil de instalar.; 6/9/10
Jair Octavio: hola rosa, de nuevo por aquí, ayer te deje un comentario y hoy no lo miro, a lo mejor no entro porque estaba fallando el sistema por la lluvia.
Bueno mi consulta es sobre la imagen que se repite del blog [como creo que en todos], que es esta: http://a.imageshack.us/img443/231/bgcontainerbtm1.png
En el caso de mi blog.
Ahora lo que necesito es bajar la distancia, que no se repita desde arriba para que pueda editar las demás, mira aquí un ejemplo:
http://jairoctaviopruebas2.blogspot.com/
ahí como podrás mirar se nota debajo de la imagen del slider, (abajo). Ahora me gustaría saber qué debo hacer para que empiece a repetirse digamos de debajo de la siguiente imagen:
http://a.imageshack.us/img714/9664/bgcontainer11.png
Te lo agradecería muchísimo…; 6/9/10
A: Muchas Gracias Rosa por el aporte. Lo he implementado en mi Blog (anagarciadecuenca.blogspot.com) y va de maravilla; 8/9/10
Anónimo: © ۞Jair Octavio۞ Lo siento, pero no puedo ayudarte con eso...; 11/9/10
Jair Octavio: OK, relajate je je je, asi lo dejare, creo que se mirara mejor, saludos :D...; 11/9/10
Michael Martinez: hola, oye me gustaria saber como colar este bonito menu en el "top" pero que los iconos no se acmoden hacia abajo si no mas bien hacia los lados: es decir:
aasi esta:
.
.
.
.
lo quiero asi:
. . . .

Grcias,,; 18/9/10
Michael Martinez: uhy disculpa ya di con el truco..
es eliminar lo comun del codigo...

me autorespondo por si alguuien le interesa; 18/9/10
Jotaziel: tengo un problema :(( los iconos fijos me aparecen horizontal y no vertical? si me pudieras ayudar te lo agradeceria ;); 26/9/10
Anónimo: Jotaziel ¿Has añadido los <br /> después de cada enlace?... quizá al copiarlo en algún sitio para editarlo se fueron... suele pasar.; 26/9/10
Feng Shui Tips 88: Hola Rosa el boton de facebook no me funciona, sabras que ocurre. Me dice.. "No se pudo encontrar la página solicitada"... sabras que estoy haciendo mal? estoy en: http://fengshuitips88.blogspot.com/; 26/9/10
Anónimo: Irma Rosa Tapia No puedo ver tu blog porque es privado, así que no sabría decirte... supongo que un error en el código o en la url de Facebook...; 27/9/10
Adolfo Rodríguez: Hola Rosa. He introducido los iconos de redes sociales que tienes en tu página. El correspondiente a suscribirse no se redirecciona, da error. He copiado la URL de feedburner. No sé si esta ahí el problema.
Gracias de antemano.
http://convoirunning.blogspot.com/; 17/12/10
Anónimo: adolfo Te digo lo mismo que en el otro comentario... antes usa los iconos como debe ser y después pregunta... si yo ahora mismo me canso de usar esos iconos y los elimino, los tuyos también desaparecen entre otras cosas... si yo y otros nos tomamos el trabajo de subirlos ¿porque tu no?; 19/12/10
ofo1965: Lo siento, tienes razón. Pensaba que se quedaban alojados en algún servidor aún que tú los quitaras.; 23/12/10

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.