Hace unos dias les mostraba como hacer una barra social con CSS3, pero un lector del blog me mando un mail preguntandome como hice ese widget social que tengo a la derecha. Donde ademas de los enlaces sociales tenemos el boton de “Me gusta” de facebook. Este post es para enseñarles como hacer eso.

Ya saben que mientras menos plugin usen mejor para su servidor (hosting) y mejor para sus visitas pues se carga mas rapido el blog.

El resultado final deberia verse asi:

Paso 1- Buscar las imagenes, como siempre. Que sean chiquitas esta vez.

Paso 2- En un widget de texto pegar esto:

[html]

Te gusta
ParaisoLinux?

Via RSS

En Delicious

En Facebook

En Twitter

[/html]

Paso 3- En el archivo style.css de su theme pegar lo siguiente:

[css] p.rss2 { line-height: 30px; background: url(‘images/trss.png’) no-repeat 0px 7px; padding: 0 0 0 23px; float: left; color: #C16518; }

p.twitter { line-height: 30px; background: url(‘images/ttwitter.png’) no- repeat 0px 7px; padding: 0 0 0 23px; float: left; color: #C16518; }

p.facebook { line-height: 30px; background: url(‘images/tfacebook.png’) no- repeat 0px 7px; padding: 0 0 0 23px; float: left; color: #C16518; }

p.delicious { line-height: 30px; background: url(‘images/tdelicious.png’) no- repeat 0px 7px; padding: 0 0 0 23px; float: left; color: #C16518; } .left,.alignleft {float: left;} .right,.alignright {float: right;}

.like-box{ background: #6D84B4; border: 1px solid #FFFABB; color: white !important; padding: 6px; text-align: center; } [/css]

Otra vez es un codigo sencillo donde lo unico que tienen que revisar son las url de los servicios y las imagenes. Espero que les sirva :)