Tutorial el Fanbox de facebook Flotante en blogger

Dj Dionicio 8:57 | , ,

La caja de Fanbox de Facebook flotante en blogger con efecto deslizante Seguimos con los tutoriales en esta ocación vamos hacer que el fanbok de facebook sea flotante en nuestro blog de blogger
 
Se trata de un gadget que muestra una pestaña en un extremo del blog, y al pasar el cursor sobre ella aparece el fanbox de Facebook con un efecto deslizante.
Verlo Funcionado LIVE DEMO

Tutorial fanbox de Facebook con un efecto deslizante en blog de Blogger
  • Vamos A Diseño
  • luego Edición de HTML
Busca lo siguiente

    </head>


    Justo Antes del código anterior pegamos este otro código.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">

    </script>




    Le damos Gurdar planilla.

    • De nuevo Vamos a Diseño
    • Después Añadir un Gadget
    • seleccionamos donde dice HTML/JavaScript

    Copia y pega esto código dentro del cuadro.

    <script type="text/javascript">

    //<!--

    $(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

    //-->

    </script>

    <style type="text/css">

    .floatinglikebox{background: url("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

    .floatinglikebox div{border:none;position:relative;display:block;}

    .floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

    .floatinglikebox span a{color: #808080;text-decoration:none;}

    .floatinglikebox span a:hover{text-decoration:underline;}

    </style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/Djdionicio.tk&width=251&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://besttricksblogger.blogspot.com/" target="_blank">+Creado por!</a></span></div></div>



    Reemplaza donde dice http://www.facebook.com/Djdionicio.tk por la URL de tu página facebook y por ultimo le damos Guardar y listo verás una pestaña en un extremo del blog, eso seria todo si tienen alguna duda háganla saber con gusto les ayudaré ok.
    REGÍSTRATE: Tu Hotmail o Gmail Aquí:
    ¡Compártalo con tus Amigos!

    16 comentarios:

    Alan Ldy dijo...

    Muy bueno!! Ya lo agregue a mi web

    Dj Dionicio dijo...

    Es un gusto saber de tí amigo me alegra que te haya servido el tutorial ¡gracias por comentar!

    Cesar Decimo dijo...

    Muchas gracias amiga

    Haru Akiyama dijo...

    Muchas Gracias :D

    Gabry Tapia dijo...

    sapo

    Andrea Sánchez dijo...

    Gracias! muy fácil y queda genial. Gracias por compartir.

    Dana Gonzalez dijo...

    hola gracias pero tengo un problema me sale en blanco la caja de facebook

    Dana Gonzalez dijo...

    hola gracias pero tengo un problema me sale en blanco la caja de facebook

    Jeffrey Toribio dijo...

    ami me sales en blanco tan bien saludo desde república dominicana un fiel seguidor de esta web me gustarías un poco de ayuda aqui esta mi pagina http://laseriemusical.blogspot.com/ http://www.laseriemundialrd.net/

    hAlamH Serpiente dijo...

    Gracias por el post =D Sólo tengo una duda...

    ¿Cómo hago para que la caja se quede abajo y no arriba?

    Rjaea Radio dijo...

    Gracias por su aporte sirve de mucho pero lamentablemente amigo al insertarlo me provoca error en los slider y tengo 2 diferente y ambos funcionan mal al insertar el fanbox :(

    jose david tola aleve dijo...

    muy buena me sirbio de mucho

    Creatividad Maxima dijo...

    hola la cajita si me funciono pero me saco la barrita de desplazamiento :( me puedes ayudar?

    Creatividad Maxima dijo...

    ademas saque la cajita despazable de face y luego medoy cuenta que no me aparecia y actualize la pagina muchas veces al final fuy a editas html y borre el codigo

    Creatividad Maxima dijo...

    hola la cajita si me funciono pero me saco la barrita de desplazamiento :( me puedes ayudar?

    JMPC dijo...

    como hago para que no se borre la barra de desplazamiento? o sea colo el fan box, me aparece y todo chevere pero el slide de imagenes en mi pantalla principal se congela y no funciona

    Publicar un comentario