Muchos y muchas de vosotros/as seguramente tendreis en vuestro blog el fanbox o caja de seguidores de Facebook. Este widget esta bien, pero resulta un poco 'soso', ¿no os parece? Le podemos dar un toque mas 'cool' y personalizarlo a nuestro gusto utilizando un poco de CSS.
El fanbox en cuestion es asi 'de fabrica' y el codigo basico es este:
<iframe scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/REDEANDO/208808342516279& show_faces=true&header=false& stream=false&width=600&height=260& colorscheme=light"></iframe> |
Si le añadimos un borde y una imagen de fondo, la cosa va cambiando:
<iframe scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/REDEANDO/208808342516279& amp; show_faces=true& header=false&stream=false& width=400&height=260& amp;colorscheme=light" style="background-image: url(http://es.softpicks.net/screenshots/Gradient-Screensaver.jpg); border: 4px solid #000000; height: 260px; overflow: hidden; width: 400px;"></iframe> |
Ahora le redondeamos un poco los bordes:
<iframe scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/REDEANDO/208808342516279& show_faces=true&header=false& stream=false&width=400&height=260& =light" style="-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; background-image: url(http://es.softpicks.net/screenshots/Gradient-Screensaver.jpg border: 4px solid #000000; height: 260px; overflow: hidden; width: 400px;"></iframe> |
Y por ultimo le podemos dar un poco sombreado, por ejemplo:
<iframe scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/REDEANDO/208808342516279& amp;show_faces=true& header=false&stream=false&width=400& =260&colorscheme=light" style="-moz-box-shadow: 0px 0px 20px rgba(0,0,0,.8);box-shadow: 0px 0px 20px rgba(0,0,0,.8); -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.8); -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px; background-image: url(http://es.softpicks.net/screenshots/Gradient-Screensaver.jpg); border: 4px solid #000000; height: 260px; overflow: hidden; width: 400px;"></iframe> |
Yo os he dado una idea, vosotros podeis ponerle el fondo que querais y personalizarlo a vuestro gusto. Todo es cuestion de 'jugar' con el CSS.
