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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJg5obLmFFFRZK6Ux8zBb0OUcWg2sNxWatJl_kcDhFzHn9148KJdXgqBffp2UXBjCf5a7ZHOA2qixxf1SB-lR_F-ofXBorwRCSqRXrXorSR06MnFMjzgbiR_VdfzCt_xEf9x3j_wmyzYA/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:

    Unknown 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!

    Unknown dijo...

    Muchas gracias amiga

    Futaba Hotaru dijo...

    Muchas Gracias :D

    Anónimo dijo...

    sapo

    Andrea dijo...

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

    Unknown dijo...

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

    Unknown dijo...

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

    Unknown 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/

    Ouroboros dijo...

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

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

    Unknown 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 :(

    Unknown dijo...

    muy buena me sirbio de mucho

    Unknown dijo...

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

    Unknown 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

    Unknown dijo...

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

    José Peguero 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