Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Personalizar la caja de fans de Facebook con Css




De nuevo vengo con otro tutorial que me ha parecido interesante compartirlo con todos ustedes, se trata de personalizar la típica caja de fans de Facebook con algo de estilos Css para simular un efecto cascada, que resultará la mar de atractivo, a mi parecer. El efecto del que hablo, parezca que tenga múltiples capas debajo de la caja fanbox de Facebook. Para ver un ejemplo, puedes verlo en este mismo blog, o en la siguiente imagen que se muestra debajo:





  1. Sí te gusta el resultado, lo puedes añadir perfectamente en Blogger o en otra plataforma. En Blogger sería de está forma, ves a Blogger→Diseño→Añadir Gadget y copia y pega el siguiente código que ves:

<style>
.facebookOuter {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.facebookOuter, .facebookOuter:before, .facebookOuter:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.facebookOuter:before, .facebookOuter:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.facebookOuter:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
.facebookInner {
height:155px;
overflow:hidden;
}
</style>

<center>
<div class="facebookOuter" style="float:center;">
<div class="facebookInner">
AQUÍ DEBERÁS DE COLOCAR EL CÓDIGO IFRAME DE TU CAJA DE FANS
</div></div></center>

Algunas configuraciones a tener en cuenta


  1. ¿Para colocar el iframe que te he resaltado en el código en mayúsculas?
  2. Debes de ingresar en Like Box: Desarrolladores.
  3. Una vez ingresado en dicho enlace, sigue estás instrucciones: 
  4. Añade tu URL de tu página de Facebook Fan.
  5. Añade el ancho de la caja, el height (la altura).
  6. Show Faces: Yes, Show Stream: No, Show Border: No, Color: Light, Show Header: No.
  7. Y finalmente le das al botón → Get Code.
  8. Ahora, selecciona la opción de código → Iframe, y coloca, inserta o copia y pégalo en la sección de la línea resaltada anteriormente. Y guarda el gadget.


Aizum Blog, martes, mayo 28, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9