Espectacular fanbox de Facebook para Blogger

En el día de hoy voy a compartí un espectacular estilo para el Fanbox de Facebook, con algo de CSS se logra un cambio radical en el fanbox tradicional que nos proporciona facebook, teniendo como resultado final lo siguiente:


Para obtener este espectacular resultado, tienes que ir a Diseño, Añadir Gadget, HTML/JavaScript y pegar allí lo siguiente:

<div style="-moz-box-shadow: 0px 15px 20px 0px #777777; -webkit-box-shadow: 0px 15px 20px 0px #777777; background-color: #f4f4f4; border-radius: 15px; border: 1px solid #CCCCCC; box-shadow: 0px 15px 20px 0px #777777; height: 280px; margin: 5px; padding: 10px 0 10px 10px; width: 280px;"><div style="height: 280px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FMil-Trucos-Blogger%2F174666062584624&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
<br />

Lo que está resaltado en color azul, debes reemplazarlo por la URL de tu página de Facebook, y con ello ya tendrás este genial fanbox funcionando en tu web.

Y hemos terminado el tutorial del día de hoy, esperamos que a todos les haya gustado a todos.

0
Shares

15 thoughts on “Espectacular fanbox de Facebook para Blogger

  • julio 7, 2014 en 5:08 pm
    Permalink

    creo que el nombre debería ser “Espectacular estilo dado al fanbox de Facebook para Blogger”, ¿No te parece Juvinao? b-(

    Responder
  • julio 20, 2014 en 5:22 pm
    Permalink

    El problema debe ser por la URL de sus páginas de Facebook que no terminan en número como la mía, para ello hay un pequeño truco, pronto corregiré la entrada.

    Saludos

    Responder
  • julio 20, 2014 en 7:49 pm
    Permalink

    SI NOS LES APARECE, ES PORQUE SUS PÁGINAS TERMINAN LETRAS Y LO DEJAN PEGADO EL “&amp”

    SOLO DENLE UN ESPACIO ENTRE EL LINK Y &amp ASI COMO EL MÍO:

    “http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Entrelibrospage &amp

    A mí no me salía porque lo había dejado pegado, pero por curiosidad le di un espacio y ya me funciona 🙂

    Responder
  • noviembre 3, 2014 en 12:28 pm
    Permalink

    Cuidado, el script contiene publicidad a http://24work.blogspot.com (aunque no se vea en la página, le estás dando un enlace a esa web que Google utilizará).
    Sin publicidad quedaría así:
    <div style=”background-color: #f4f4f4; border-radius: 15px; border: 1px solid #CCCCCC; box-shadow: 0px 15px 20px 0px #777777; height: 280px; margin: 5px; padding: 10px 0 10px 10px; width: 280px;”><iframe src=”http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FMil-Trucos-Blogger%2F174666062584624&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false” scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:250px; height:258px;” allowtransparency=”true”></iframe>
    </div>

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *