Mil Trucos Blogger

Espectacular fanbox de Facebook para Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

15 Comentarios

  1. Anonymous Anonymous
    Julio 7, 2014    

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

  2. Julio 7, 2014    

    lo coloco en mi pagina y me sale en blanco, ayudame porfa

  3. Julio 7, 2014    

    Hola, me gustó mucho pero me sale en blanco en mi blog

  4. Julio 7, 2014    

    igual a mi me quedo blanco

  5. Julio 8, 2014    

    a mí también se me queda en blanco

  6. Julio 8, 2014    

    Esperen que le pregunto a Hayder

  7. Julio 13, 2014    

    Qué puedo hacer para reducir el tamaño del fanbox

    • Julio 15, 2014    

      amigo como le isiste para que ya no te quedara blanco

  8. Julio 20, 2014    

    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

  9. Julio 20, 2014    

    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 🙂

    • Julio 20, 2014    

      Adrii muy ingeniosa tu solución |o|

      Gracias por comentar

  10. Septiembre 5, 2014    

    a mi me sigue saliendo en blanco! ayuda por favor!

  11. Octubre 3, 2014    

    Muchas gracias 🙂

  12. Jorge Jorge
    Noviembre 3, 2014    

    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>

Deja un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo