48

Gadget de marcadores sociales en la sidebar

Comparto con vosotros el gadget que podéis ver en la parte de arriba de mi sidebar, ya que son varias personas las que me lo han solicitado.

Gadget marcadores sociales

Para instalar el gadget solo tenéis que copiar su código, pegarlo en un gadget de HTML en la sidebar y hacerle los cambios oportunos.

<div id="marcadores-sociales" style="text-align:center;">
<a class="rss" href="URL_DEL_FEED" target="_blank" title="Suscribe"><img src="URL_DEL_ICONO_RSS" /></a><a class="twitter" href="URL_DE_TU_PAGINA_EN_TWITTER" target="_blank" title="Sígueme en Twitter"><img src="URL_DEL_ICONO_TWITTER" /></a><a class="facebook" href="URL_DE_TU_PAGINA_EN_FACEBOOK" target="_blank" title="Estoy en Facebook"><img src="URL_DEL_ICONO_FACEBOOK" /></a><a class="technorati" href="http://technorati.com/account/signup/" target="_blank" title="Technorati Favorito"><img src="
URL_DEL_ICONO_TECHNORATI" /></a><a class="youtube" href="URL_DE_TU_CANAL_EN_YOUTUBE" target="_blank" title="Mi canal en Youtube"><img src="URL_DEL_ICONO_YOUTUBE" /></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.technorati img { opacity:0.8;}
a.technorati:hover img { opacity:1;}
a.youtube img { opacity:0.8;}
a.youtube:hover img { opacity:1;}
</style>


Los cambios para adaptar el gadget a las necesidades de cada uno, son sencillos y están resaltados en negrita.

En cuanto al CSS que incluye el código, es el que proporciona la opacidad (el efecto claro/oscuro al paso del ratón), si queréis prescindir de este efecto elimináis el código desde <style type='text/css'> a </style>


Si vais a usar los iconos como los míos o queréis ver algunos para escoger, en Iconspedia los encontraréis.

Entradas Relacionadas:

48 comentarios:


Bilosony2™

Hola Rosa!! no es mejor usar este truco con sprite?? para ocupar menos por la cantidada de imagenes?? va yo ago eso y con los mismo resultados :D

Saludos!!!

Anónimo

Bilosony2™ Mejor o peor según o que quieras... para mejorar el tiempo de carga si lo es, pero yo soy de las que a veces me gusta cambiar algún icono concreto por otro y así se complica muchísimo menos...

EBblogger

Gracias rosa me re sirvio, che me podes decir como poner los emoyicones que vos tenes en tu blog en mi blog.

http://www.animex38.blogspot.com

Bilosony2™

Si tienes razon :D cuando uno todavia no se decide que iconos usara casi como definitivamente es mejor tner las imagenes cada una por su lado :D


Saludos!!

Anónimo

Desasnate Lo encuentras en Vagabundia.
http://vagabundia.blogspot.com/

Alexis Moya

Rosa, la parte que agregas al codigo, (la del style) es posible agregarla a cualquier imagen en un blog y asi conseguir el mismo efecto que tienes aca?

Anónimo

Klgo. Alexis Moya R. Si, siempre que le des una clase a la imagen, que será la que uses en el css, fíjate que en este código cada imagen lleva su clase. Ejemplo:

a class="rss"

Mabel

Hola Rosa! te he visto en tu página de Facebook y he visto que en la pagina principal aparecen tus etiquetas, como hago para poner las mias en mi pagina? Muchisimas gracias!

Basi

Gracias Rosa
¡¡ Siempre aprendemos cosas con tus tutoriales¡¡
Y encima las practicamos.
Ya lo tengo es su sitio.
Saludos

Anónimo

MabelAsí:
http://humanossinsentido.blogspot.com/2010/03/insertar-una-nube-de-etiquetas-de-tu.html

Mabel

Ya mismo entro, muchas gracias Rosa!!! :D

depozoblanco

Al hilo de esto, comentar que hace algún tiempo, BLOGGER, permite "Mostrar botones para compartir". Esto es estando en DISEÑO-CONFIGURAR ENTRADAS DEL BLOG-EDITAR. Una vez dentro, cuando estemos editando en este apartado de CONFIGURAR ENTRADAS DEL BLOG, podemos ver las diferentes Opciones de la página de entrada, y elegir la que deseemos pinchando en ella. Pues no hace mucho, que han agregado "Mostrar botones para compartir", y seleccionando esta casilla, DEBE DE APARECER al final de la entrada. Pero aquí es donde yo pregunto: lo he hecho, y no me aparece cuando aparece el blog publicado, Y NO TENGO CARGADA UNA PLANTILLA DISEÑADA, tengo una de las de blogger, y por más opciones que habilito o deshabilito, dejando siempre seleccionada la que ahora me interesa, la de "Mostrar botones para compartir", NO ME APARECE cuando veo el blog publicado. Eso sí, cuando estoy en "CONFIGURAR ENTRADAS DEL BLOG", y visualizo las opciones que existen, abajo, te avanza una especie de vista de cómo quedaría todo con los botones que has seleccionado, y en este avance, sí que aparecen mostrados los botones para compartir. Rosa, te recuerdo mi blog, por si puedes echarme una mano:
http://pozoblanconews.blogspot.com

Gracias por la ayuda

Anónimo

depozoblancoMira en esta entrada como habilitarlos:
http://elescaparatederosa.blogspot.com/2010/06/botones-de-compartir-oficiales-de.html

depozoblanco

Muchas gracias, Rosa, he tomado nota, he modificado la plantilla según comentas en la entrada indicada y ya sí que me aparecen habilitados los "botones para compartir". GRACIAS

Antonio Ruiz

Hola Rosa!

Gracias por este post. Hace 2-3 días lo hice y funcionaba perfectamente el de facebook (el que me interesaba. Puse sólo dos iconos, RSS y facebook). Sin embargo, desde anoche no sé porqué no se ve el icono de facebook (sí el de RSS). Tal vez sea problema del navegador. Con Firefox sólo veo el de RSS y con IE veo dos aspas(en forma de X) no los iconos.

Con IE al hacer click en cualquiera de las X sí me lleva al enlace correspondiente.

¿Qué se te ocurre que ha podido pasar?

Muchas gracias.

Antonio Ruiz

Hola Rosa!

Solucionado. He subido nuevos iconos y ya se ve bien. No entiendo qué pudo pasar. Juraría que no hice ningún cambio antes.

Gracias y saludos.

Anónimo

Antonio Ruiz Yo veo los iconos sin problemas, tanto en IE como en Firefox en sus últimas versiones... quizá accediste en un momento que tu conexión estaba algo más baja y no llegó a cargar la imagen... a veces pasa.

CULIBLANCO por FRANCISCO NIETO

Hola Rosa, pongo el gadget como dices, pero no me sale nada. El blog, lo cambie a dominio. Creo que ese puede ser el problema, pero hay alguna solución.
Un saludo y gracias

Anónimo

CULIBLANCO No hay problema sea con dominio o no. No se si estás copiando y pegando el gadget tal cual... fíjate que hay que hacerle los cambios pertinentes, sustituyendo tus datos por lo que está en negrita, incluidas las urls de tus propios iconos.

CULIBLANCO por FRANCISCO NIETO

Rosa, nada, no me sale nada. Y no ya que hacer.

CULIBLANCO por FRANCISCO NIETO

Rosa este de Gadget de iconos fijo que sale al lado, si que me sale bien. Pero me gustaria ponerlo como tu arriba en el sidebar. Este es mi blog, por si ves algo raro. www.culiblanco-futbol.com,
Gracias y perdona si soy pesado

Anónimo

CULIBLANCO Ese te sale porque las imágenes están incluidas... en este has de colocar la url de tus propias imágenes.

CULIBLANCO por FRANCISCO NIETO

Tienes razón Rosa, que torpe. Ahora si. Ahora estoy intentando poner el e-mail, pero no se como hacer el enlace.
Pero muchas gracias Rosa.

Anónimo

CULIBLANCO
http://elescaparatederosa.blogspot.com/2008/02/enlace-correo-electrnico.html

CULIBLANCO por FRANCISCO NIETO

MUCHAS GRACIAS ROSA. Ya está. :D

Carol

Hola Rosa, se que esta no es la entrada pero queria agradecerte la ayuda prestada con los marcadores sociales por defecto del blog.

muchas gracias !!

un saludo

Anónimo

4ever Entonces funcionó :D
Gracias a ti!!!

Carol

y que no funciona contigo chiquilla!!

gracias nuevamente por estar siempre que te necesitamos

;)

Unknown

Hola rosa¡
Me preguntaba, como podria cambiar por ejemplo el icono de tecnorati por el de flicr, es decir, para que me agreguen a favoritos y tal...es que tecnorati no uso, y yo y el codigo no nos llevamos bien, que tendria que cambiar?

Anónimo

Layka En realidad solo es fijarse un poco y cambiar la línea de technorati por algo así:

<a class="flicr" href="URL_EN_ FLICR/" target="_blank" title="Mi flicr"><img src="
URL_DEL_ICONO_FLIRC" /></a>

Después en el CSS, en lugar de lo de technoratti, pones esto:

a.flirc img { opacity:0.8;}
a.flicr:hover img { opacity:1;}

Unknown

Oh¡¡ Muchas gracias¡¡ Esta tarde me pondre con el ^_^. Por cierto, he puesto un enlace en mi blog hacia aqui ^___^ no veas lo que estoy aprendiendo y haciendo pasito a pasito gracias a ti

Diverso Magazine

Coloque todo según el código y funciona, pero los iconos los coloca uno arriba del otro y no de lado como esta aquí, que pasara?

Anónimo

Diverso Magazine Podría ser que el espacio donde lo estás colocando sea demasiado estrecho para que entren todos los iconos...

El Director de Valverde ACCA

Que es SIDEBAR por favor? Coloque los iconos en el blog y no se ve la imagen lo que se ve es una xxxx, que ago Gracias

El Director de Valverde ACCA

Por favor Rosa como ago para colocar los iconos de redes social como el tuyo, se que los explicas arriba pero no entiendo por que al colocarlo en mi blog salen xxxxx tambien me invitas a la Web Iconspedia, pero me dicen que tengo que descargarlo, aqui me confudo mas porque no se como subirlo a mi blo, por favor que ago Gracias. http://www.finanzasdigital.blogspot.com/

Anónimo

El Director Sidebar es la columna estrecha de nuestro blog, en mi caso a la derecha, donde puedes ver los iconos colocados y funcionando...

Anónimo

El Director Es difícil explicar algo así en un comentario, además de ser algo tan básico que debería ser lo primero que tendrías que aprender antes de tratar de conseguir este tipo de cosas...

En el código que doy, hay que sustituir donde dice "URL DEL ICONO..." por la url correspondiente de cada uno de los que tu vas a usar.
La url se consigue, bajando los iconos a tu PC (descargandolos) y después subiendolos de nuevo a un alojamiento de imágenes y alli optienes la url necesaria para colocar en el código... también y es lo más adecuado, puedes usar Blogger:
http://elescaparatederosa.blogspot.com/2009/02/alojar-imagenes-en-blogger.html

Antolín Isidro

Hola rosa necesito tu ayuda, el caso es que quiero poner en mi blog un enlace a traves de un icono a mi página de flickr.
me explico mejor, quiro poner un icono que al hacer click en el me abra una nueva ventana con mi página de flickr.
Soy un poco torpe en la informatica, te agradeceria enormemente tu ayuda.
un saludo y gracias de antemano

Anónimo

ORGUETA

<a href="URL_DE_LA_PAGINA_EN_FLICKR" target="_blank" title="Mi Flickr"><img src="URL_DEL_ICONO" /></a>

Antolín Isidro

Rosa muchas gracias por tu atención y ayuda, me ha funcionado, pero abusando de tu atención quisiera preguntarte: si en lugar de tener el icono alojado en alguna web o página, estuviera en mi pc que tendria hacer??

Un saludo y una vez más muchas gracias por tu atención

Anónimo

ORGUETA Eso no es posible, siempre han de estar alojadas en internet para poder usar su url.

Antolín Isidro

Hola Rosa, otra vez acudo en tu ayuda, siempre te has tomado la molestia de al menos contestarme, que no todos lo hacen.
No se si este es el tema adecuado donde hacerte la pregunta, pero bueno te la formulo aquí.
Te comento, tengo un blog dedicado a la fotografía, y quisiera que cuando colgara una foto en él, al hacer click en la foto ocurriera como pasa en algunos de estos blogs (http://www.angel-gonzalez.es/
http://fernanlima.blogspot.com/); es decir que me aparezca la página en blanco con la foto.

No se si me he explicado bien....bueno 1 saludo y espero tu respuesta.
Muchisimas gracias de antemano.

Anónimo

ORGUETA Para que eso suceda, no tienes más que subir las fotos directamente desde tu PC al editor de Blogger.

Antolín Isidro

Una vez más, muchas gracias por tu atención.

ALEJANDRO GALICIA

Es muy interesante este gadget sin embargo, una gran pregunta, yo que no se nada de lenguaje HTLM ignoro donde colocar cada código ¿hay una forma de saber si en donde colocaré el código es el lugar que realmente quiero? O si hay una especie de planilla de guía para saber ubicar cada cosa? Gracias. http://unoenlared.blogspot.com/

Anónimo

Alejandro En este caso, creo que está bien claro en la entrada:
"Para instalar el gadget solo tenéis que copiar su código, pegarlo en un gadget de HTML en la sidebar y hacerle los cambios oportunos."

Unknown

Hay forma de colocar un icono de email pero en lugar de enviar email de contacto permita la suscripción al feed del blog por correo ?Gracias Rosa.

Anónimo

Juan Martin Claro. Una vez activada la suscripcion por correo en FeedBurner, te dan un código para mostrar un formulario de suscripción (tipo al mio)... no tienes más que usar en el icono, solo la url que aparece en ese código sin el resto del código y el icono llevará a la casilla de suscripción por mail...

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.

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