Marcadores sociales con efecto opacidad o transparencia


Ya habíamos visto como agregar marcadores sociales a nuestro blog. Hoy les vamos a darles un toque especial con un efecto de opacidad.



1.§ Lo que tenemos que hacer es seguir los pasos de este post, pero en lugar del código que usamos, pegaremos el siguiente código tal como lo indica el post que mencioné:

<div class='msociales'>
<ul>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' class='msociales-redes' src='http://img30.imageshack.us/img30/1893/delicious24x24s.png'/></a></li>
<li><a expr:href='"http://digg.com/submit?phase=2&amp;amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a DiggIt!' class='msociales-redes' src='http://img30.imageshack.us/img30/8708/digg24x24.png'/></a></li>
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Google' class='msociales-redes' src='http://img17.imageshack.us/img17/6836/google24x24.png'/></a></li>
<li><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' class='msociales-redes' src='http://img2.imageshack.us/img2/1722/technorati24x24.png'/></a></li>
<li><a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Magnolia' class='msociales-redes' src='http://img30.imageshack.us/img30/3479/magnolia24x24.png'/></a></li>
<li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' class='msociales-redes' src='http://img30.imageshack.us/img30/7517/reddit24x24.png '/></a></li>
<li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blinklist' class='msociales-redes' src='http://img14.imageshack.us/img14/5392/blinklist24x24.png'/></a></li>
</ul>
</div>

2.§ Ahora buscamos ]]></b:skin> y encima de éste pegaremos:

.msociales ul{
display:inline;
font-size:100%;
margin:0pt !important;
padding:0pt !important
}
.msociales li{
display:inline;
list-style-type:none;
background:transparent none repeat scroll 0%;
margin:0pt;
padding:2px
}
.msociales img{
border:0pt none;
float:none;
margin:0pt;
padding:0pt
}
.msociales-redes{
opacity:0.4;
filter: alpha(opacity=40);
}
.msociales-redes:hover{
opacity:2;
filter: alpha(opacity=200);
}

3.§ Guardamos los cambios.

NOTA:

El efecto de transparencia u opacidad funciona en Opera, IE7, Firefox y Safari.

► Si deseas puedes aplicar el efecto pushbutton a los marcadores sociales, para ello mira esta entrada » Marcadores redes sociales con efecto pushbutton

12 opinaron:

G

Me encanta cómo se ven; lo voy a aplicar a mi blog.

Besos :)

Responder
squirrel

Muy buen post; como siempre los mejores códigos y utilidades para nuestro blog :)

Responder
Yessmi

El efecto es muy bueno, se ve muy bonito :)

Responder
Graciela

queda precioso así, también se puede utilizar la opacidad en otras partes del blog no???

Besos tesoro y una semana bonita :D

Responder
Jéssica YK

» G: van a quedar geniales en tu blog :)

» squirrel: gracias por tus palabras.

» Yessmi: sí, a mí también me gustó.

» Graciela: sí, podemos aplicar a distintas partes y también a imágenes.

S@lu2

Responder
Agus

Hola :)

Tengo una duda, pero antes de preguntar, tengo que decir que me parece fantástico el tutorial y el blog en general.

Cuando tengo lista mi plantilla para guardar me tira el siguiente error:
//
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The reference to entity "title" must end with the ';' delimiter.
//

Nu se que hacer :S Tienes alguna idea para mi?

Responder
Jéssica YK

Agus: he visto un blog donde lo has aplicado y no vi ningún problema; quizás ya lo solucionaste.

S@lu2

Responder
nakahito

hola tambien quisiera agregar facebook y twitter que codigo debo colocar?

Responder
Jéssica YK

» nakahito:
Para Twitter, agrega lo siguiente:

<a expr:href='&quot;http://twitter.com/home/?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='AQUÍ-URL-IMAGEN-BOTÓN' style='border:0px; padding:2px' valign='bottom'/></a>

Para Facebook:

<a expr:href='&quot;http://facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='AQUÍ-URL-IMAGEN-BOTÓN' style='border:0px; padding:2px' valign='bottom'/></a>

Reemplazas AQUÍ-URL-IMAGEN-BOTÓN por los botones que tengas para twitter y facebook.

S@lu2

Responder
nakahito

Gracias Jessica una ultima pregunta queria que quede asi:

Compartelo en:

iconos--------------------------

pero la frase me sale junta con los iconos como podria hacer un espacio

Responder
nakahito

para ser mas exactos quisera colocar los iconos al lado de la frase "compartelo : " el problema es que no logro entender la css que pusiste:S

Responder
Jéssica YK

» nakahito:
Para mostrar la palabra "Compártelo:", debes hacer lo siguiente:

Si deseas que la palabra está sobre los íconos, entonces pega lo que está en negrita sobre el código, así:

Compártelo
<div class='msociales'>
<ul>
<li><a expr:href='"http://del.icio.us/post?url=" +

Si deseas que la palabra esté al lado de los íconos, pega lo que está en negrita tal como se indica:

<div class='msociales'>
<ul>
<li>Compártelo<a expr:href='"http://del.icio.us/post?url=" +

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio