Gadget de iconos fijo con opacidad : El Escaparate de Rosa

Justo en la entrada anterior veíamos como colocar un gadget de iconos fijo en nuestro blog.

En un comentario de esa misma entrada, nuestra amiga *Eva* me solicitaba si era posible el añadir a los iconos del gadget opacidad, tal como habíamos visto en el gadget de marcadores sociales en la sidebar.

El procedimiento es el mismo, añadimos una clase a cada icono y, mediante ese dato, aplicamos el CSS necesario para conseguir la opacidad.
El resultado podéis verlo en el mismo blog de pruebas donde había colocado los otros, pero en este caso el gadget con opacidad se muestra a la izquierda de la pantalla.

Copiamos y pegamos el código en un gadget HTML/Javascript y hacemos los cambios necesarios tal como veíamos en la entrada anterior, para incluir nuestros datos.

<div style='position: fixed; bottom: 30%; right: 1%;'/>
<a class="twitter" 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 class="facebook" 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 class="rss" 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 class="rss-mail" 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>
<style type='text/css'>
a.rss img {opacity:0.8;}
a.rss:hover img {opacity:1;}
a.twitter img { opacity:0.8;}
a.twitter:hover img { opacity:1;}
a.facebook img { opacity:0.8;}
a.facebook:hover img { opacity:1;}
a.rss img { opacity:0.8;}
a.rss:hover img { opacity:1;}
a.rss-mail img { opacity:0.8;}
a.rss-mail:hover img { opacity:1;}
</style>

Nota:

El gadget se mostrará a la derecha de la pantalla tal como el anterior, para cambiarlo a la izquierda tendremos que cambiar right por left (en la primera línea del código).

27 comentarios:

xstok18x: seve fantastico muchas gracias :D :D :D; 7/9/10
Monica: Rosi preciosos los iconitos,pero a mi no me quedan en vertical,porque motivo sera???? :0; 8/9/10
Eva Flores: Eres una crack! qué rápida! Mil gracias.
Salut!
Eva; 8/9/10
Jorgelina: Muchas gracias Rosa!
Quisiera que me indiques cómo incorporar un nuevo icono para que los visitantes puedan enviar un correo.; 8/9/10
MJ Vásquez Contreras, msc: Rosa, blogger in draf rediseñó el gadget de entradas recientes (desde otro blog), pero no se puede incluir la url del blog que queremos mostrar... ¿hay alguna solución para esto?; 8/9/10
Marflo: Rosa: quisiera saber como puedo incluir en mi plantilla la flechita de "Responder a este comentarista", lo busque pero no lo encuentro. Gracias!; 9/9/10
Dialoguista: Rosa: yo otra vez molestando ;) Acabo de volver a poner las entradas con "leer más" tal cual como explicaste vos en un momento y que me funcionó bárbaro. Pero ahora no funciona. Vos hablabas algo de que google dejaria de tener alojado el script asi que yo lo descargue del post que hiciste, pero ¿dón de ubico ese texto? tengo que publicarlo en algun lado? pobre haciendo una entrada borrador con ese texto, pero nada ;(; 9/9/10
San Toti: Rosa:

Si quisiera poner la opacidad en el fondo (background) del mismo div, y no en cada ícono, ¿cómo hago?, ¿incluyo las condiciones de opacidad en style=text/css, o refiero ahí mismo a un .xxx (css) ya hecho en la plantilla?

Saludos.

José; 9/9/10
Anónimo: MonicaQuizá has copiado el código antes en algún editor y se han ido por lo que sea las <br /> del mismo... esa etiqueta es la que hace salgan en distinta línea, es decir, en vertical.; 10/9/10
Anónimo: *Eva* ¿Rápida?... y yo que pensé me había demorado demasiado :D
Gracias!; 10/9/10
Anónimo: JorgelinaAntes del </div> de cierre del código, tendrías que incluir algo así:
<br/><a class="mail" href="mailto:DIRECCION DE CORREO AQUI"><img src="IMAGEN AQUI" /></a>

Después añadir en el CSS, antes de <style> por ejemplo, alg como esto:
a.mail img { opacity:0.8;}
a.mail:hover img { opacity:1;}; 10/9/10
Anónimo: Marflo Y lo verás en mi próxima entrada :D; 10/9/10
Anónimo: mjvasquez No veo ningún gadget de entradas recientes en Draft que incluya esa opción... :O; 10/9/10
Jorgelina: Gracias Rosa! Quedó perfecto! Todo lo bueno de mi blog te lo debo a ti, pero aún me falta mucho por aprender. A pesar de haber intentado miles de veces algunos trucos como los títulos de etiquetas expandibles no lo he podido sacar, si en la página principal.
Seguiré intentando...; 10/9/10
Anónimo: Dialoguista Has de subir el archivo con ese texto, tal como lo descargas, aun alojamiento y después enlazar su url en el código.
http://elescaparatederosa.blogspot.com/2009/05/donde-alojar-los-script.html; 10/9/10
Anónimo: JoséAñades la clase al div:
<div class="Opacity" style='

Y sustituyes todo el CSS que se coloca para los iconos, por algo así:
<style type='text/css'>
a.Opacity {opacity:0.8;}
a.Opacity:hover {opacity:1;}; 10/9/10
Anónimo: Hola Rosa :D
Te queria pedir ayuda, el otro día estaba haciendo un tutorial tuyo: http://bit.ly/ci8JTf
Y resulta que no tenia este codigo :S Te agradeceria mucho si me ayudas :D Muy bueno tu blog, que tengas un buen día; 10/9/10
Dialoguista: Muchas Gracias!!! Ahora pruebo seguir el post que me recomendas :D; 11/9/10
Matías Aravena: Gracias Rosa, ahora lo aplicaré en mi blog. Saludos ;); 11/9/10
Anónimo: Kamii :) Y porque dejas el comentario aquí en lugar de la erada del tutorial que dices... es un lío para mi y además de esta manera los demás no pueden encontrar ayuda en los comentarios... déjala allí por favor.; 11/9/10
Alberto Fuentes: gracias me funciono muy bien y gracias muchas gracias!! jiji me an sido muy utiles tus consejos en mi blog, Saludos que estes bien :D; 17/9/10
RICARDO: BUenas noches, busco ayuda con respecto a un problema del gadget recent post advanced de blogger, el hecho es que no se porq ya no se visualizan y solo keda un espacio en blanco..q pudo haber pasado++puedo hacer???? ayudaaa; 18/9/10
Anónimo: RICARDO Ese gadget aún está en periodo de pruebas, así que andará dando fallos supongo... nada que nosotros podamos controlar en eso...; 18/9/10
Parlox: Hey gracias Rosa por este dato, lo implemente en los dos blogs en los que estoy involucrados, y en ambos casos quedaron super bien... gracias... Dios te bndiga y guarde en Su amor y paz... ciao.; 9/10/10
Anónimo: PARLOX ¡Muchas gracias y bendiciones para ti también!; 9/10/10
Anónimo: Muchas Gracias,Rosa y muchos Besos♥ para ti ;); 10/10/10
RaúlSG: Muchas gracias Rosa, funciona a la perfección. :D; 21/11/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.