{Tutorial} Fanbox de facebook con efecto deslizante


Hola! este es mi primer tuto y trata de una fanbox de facebook con efecto deslizante
 si quieres ver como queda da clic aqui 



Solo tienes que pegar este codigo en un gadget html/javascript, para los que usan plantilla clasica ,colocar en el  lugar que desee,dentro de un gadget
<style>
#flotante1 {
position:fixed;
top:100px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1002;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante2 {
position:fixed;
top:240px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1003;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante3 {
position:fixed;
top:380px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante1:hover, #flotante2:hover, #flotante3:hover {
right:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
div.likeboxwrap {
margin-top:-5px;
margin-left:-45px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
}
</style>
<!-- Primera pestaña -->
<div id='flotante1'>
<img src='http://lh3.googleusercontent.com/-vq69jjHi_aA/UKxnEYWptDI/AAAAAAAADdU/1bjiSBYnRSo/fb_tab.png' style='float:left;'/>
<div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'>
<span><div class='likeboxwrap'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350' style='border:Dashed 1px; overflow:hidden; width:240px; height:325px;'/></iframe>
</div>
</span></div>
</div>
<br>
si quieres poner otra pestañita solo tienes que copiar y pegar donde dice PRIMERA PESTAÑA.

http://static.tumblr.com/rltvkjt/9lnlmr41u/th_k_atencao.gifBorra y cambiahttp://static.tumblr.com/rltvkjt/9lnlmr41u/th_k_atencao.gif

Borra:
http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook

Cambia por:

La Url de tu pagina de facebook (no la de twitter)

Nota de Luna: AYUDA PARA LOS QUE NO LES SALE :

Apartir de :

<span><div class=’likeboxwrap’>

borra todo lo de abajo y coloca este codigo:

<iframe src=”//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%XXXXXXXXXXXX&amp;width=240&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false” scrolling=”no” frameborder=”0” style=”border:none; overflow:hidden; width:240px; height:258px;” allowtransparency=”true”></iframe>
</div>
</span></div>
</div>
<br />

Y luego cambia XXXXXXXXXXXX por el numero de url de tu pagina:

Un ejemplo  la url de mi pagina Lunany Kawaii es esta:

https://www.facebook.com/pages/Lunany-kawaii/514077101992556

Los numeros 514077101992556 lo remplazo donde esta XXXXXXXXXXXX


y listo ,aora busca tu url de tu pagina y los numeros que tenga copialos en XXXXXXXXXXXX


Si quieres la de google+ haz lo mismo pero con este codigo:




Cambia XXXXXXXXXXXXXX por el numero del perfil, esto:



Eso fue todo, bye!!
Notitas de Luna:
Para Kramer DeKretos: primero para cambiar el color de los bordes que esta azul , tienes que buscar este codigo:
3c5a98
Para encontrar otros colores y que te de el codigo de ese color que quieres busca en esta pagina:
Elijes un color y te da un codigo 
Ese codigo lo remplazas en 3c5a98
Y listo ya tenemos los bordes del Fanbox  con el color que querían.
Aora para cambiar de color la cajita Fanbox donde dice Facebook buscas esto :
http://lh3.googleusercontent.com/-vq69jjHi_aA/UKxnEYWptDI/AAAAAAAADdU/1bjiSBYnRSo/fb_tab.png
Es la imagen de la cajita de facebook ,tu tienes que hacer otra imagen ,con ayuda de photoshop o otro programa,pero yo les dejo un modelo mio este:
 clic aqui para descargar

Alli pueden cambiar los colores photoshop :3 lo guardan en .png y lo suben a 
Yo les enseñare de tinypic
Ya al subir la imagen, les dara la url
lo remplazan en http://lh3.googleusercontent.com/-vq69jjHi_aA/UKxnEYWptDI/AAAAAAAADdU/1bjiSBYnRSo/fb_tab.png
Y listo n.n ,eso es todo.



att:
http://3.bp.blogspot.com/-yo6I1gkctFk/UZe5NVTaT7I/AAAAAAAAAIM/-B8lr38wxnM/s1600/alis.png

16 comentarios :

  1. waa gracias..ya lo puse en i blog y quedo genial!!
    gracias!

    ResponderEliminar
  2. muy buen tutorial, gracias por el ^^

    ResponderEliminar
  3. Kyaaaa Gracias por el tuto!!!!
    Lo voy a poner en mi blog ;3

    Muchos saludos y Cuidense!!

    ResponderEliminar
  4. Está genial el tutorial, debe quedar muy bien :)

    ResponderEliminar
  5. este truco lo había visto en algunos blogs ^^
    ahora gracias a ti ya sé como usarlo ^v^

    besos!!! ^-^

    ResponderEliminar
  6. Devo ser a la unica que no le aparece ;( Me sale pero paso el cursor por encima y no aparece nada de nada too blanco :$

    ResponderEliminar
    Respuestas
    1. O.O¡ Aw algo debe tar mal tonces ,como no me permite en comentarios codigos,te respondere en una pagina lo que tienes que hacer:
      http://lunany-kawaii.tumblr.com/cajadefacebook

      Notita: El codigo sale largo,pero copialo ,saldra bien, x3

      Eliminar
  7. ya lo puse pero me gustaría saber como le puedo cambiar los colores...
    Gracias :)

    ResponderEliminar
  8. otra pregunta, como puedo dejar el botón estático así como el tuyo? es q cuando subo y bajo la barrita no se, como q se mueve y quiero q se quede quieto....

    ResponderEliminar
  9. Muchas gracias luna lo utilizare y te dare todo el credito

    ResponderEliminar
  10. Respuestas
    1. Hay una notita para los que no les sale o.o ,tampoco te sale ? ,ni la cajita nada? o.o

      Eliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥