Caja Pop Up "Me Gusta" de Facebook para Blogger Caja Pop Up "Me Gusta" de Facebook para Blogger
Caja Pop Up "Me Gusta" de Facebook para Blogger
Página 1 de 2 12 ÚltimoÚltimo
Mostrando resultados del 1 al 10 de 14
  1. #1
    Caja Pop Up "Me Gusta" de Facebook para Blogger
    Colocar una caja Pop Up de "Me Gusta" en Facebook en una buena opción para nuestro Blog de Blogger. Sería una forma más de poder decirles a nuestros visitantes "Hola, ¡los invito a seguir mi blog en Facebook!". A algunos les puede resultar molesta la caja, a otros no, lo he hablado con varios seguidores de mi blog y me han dicho que a ellos no les molestaría. Si bien hoy por hoy no la tengo agregada en mi blog no quita que algún día lo haga. De paso los invito a suscribirse a mi facebook desde la FanBox que tengo agregada en la SideBar derecha . Bien es fácil de agregar, primero les muestro una foto de cómo luce dicha caja y luego les enseño a agregarla.

    Invitados no pueden ver imágenes en los mensajes. Por favor regístrate en el foro.

    ¿Les gustó? Bueno, lo primero sería ir a DISEÑO, luego a AÑADIR UN GADGET, elegimos el gadget HTML/ JAVASCRIPT y dentro de el volcamos el siguiente código:


    Código:
    <style>
    
    /*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
    */
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
    /*
    
    
    User Style:
    Change the following styles to modify the appearance of ColorBox. They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
    */
    #cboxOverlay{background:#000;opacity:0.5 !important;}
    #colorbox{
    box-shadow:0 0 15px rgba(0,0,0,0.4);
    -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
    -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
    }
    #cboxTopLeft{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOC...600/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOC...600/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) repeat-y -211px 0;}
    #cboxContent{background:#fff; overflow:visible;}
    #cboxLoadedContent{margin-bottom:5px;}
    #cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn...background.png) no-repeat center center;}
    #cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-...00/loading.gif) no-repeat center center;}
    #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
    #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
    #cboxPrevious{left:0px; background-position: -51px -25px;}
    #cboxPrevious.hover{background-position:-51px 0px;}
    #cboxNext{left:27px; background-position:-75px -25px;}
    #cboxNext.hover{background-position:-75px 0px;}
    #cboxClose{right:0; background-position:-100px -25px;}
    #cboxClose.hover{background-position:-100px 0px;}
    .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
    .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
    .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
    .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
    /*-----------------------------------------------------------------------------------*/
    /* Facebook Likebox popup For Blogger
    /*-----------------------------------------------------------------------------------*/
    #subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
    }
    #subscribe a,
    #subscribe a:hover,
    #subscribe a:visited {
    text-decoration:none;
    }
    .box-title {
    color: #3B5998;
    font-size: 20px !important;
    font-weight: bold;
    margin: 10px 0;
    border:1px solid #ddd;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding:10px;
    line-height:25px; font-family:arial !important;
    }
    .box-tagline {
    color: #999;
    margin: 0;
    text-align: center;
    }
    #subs-container {
    padding: 35px 0 30px 0;
    position: relative;
    }
    a:link, a:visited {
    border:none;
    }
    .demo {
    display:none;
    }
    </style>
    
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
    <script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    if (document.cookie.indexOf('visited=true') == -1) {
    var fifteenDays = 1000*60*60*24*30;
    var expires = new Date((new Date()).valueOf() + fifteenDays);
    document.cookie = "visited=true;expires=" + expires.toUTCString();
    $.colorbox({width:"400px", inline:true, href:"#subscribe"});
    }
    });
    </script>
    <!-- This contains the hidden content for inline calls -->
    
    <div style='display:none'>
    <div id='subscribe' style='padding:10px; background:#fff;'>
    <h3 class="box-title">Mantente en contacto con nosotros a través de Facebook. Sólo presiona el botón Me gusta <center><p style="line-height:3px;" >▼</p></center></h3>
    <center>
    
    <iframe src="//www.facebook.com/plugins/likebox.php?href=URL DE TU FACEBOOK&amp;width=300&amp;colorscheme=light&amp;show_face s=true&amp;border_color=%23ffffff&amp;stream=false &amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
    
    </center>
    </div>
    </div>
    Una vez hecho reemplacen lo que está en azul por el texto que sutedes quieren que aparezca por sobre la caja de Facebook y segundo reemplacen lo que está en rojo por la URL de sus páginas de Facebook. Acá terminamos, ojalá les sea de ayuda. ¡Saludos!

  2. Hola que tal, sabes que plugin puedo usar para wordpress que tenga la misma finalidad que este, Saludos!
    Citar Citar  

  3. Muchisimas gracias amigo!!!
    Citar Citar  

  4. #4
    Cita Iniciado por SoupierNebula89 Ver Mensaje
    Hola que tal, sabes que plugin puedo usar para wordpress que tenga la misma finalidad que este, Saludos!
    no lo se!! solo para blogger
    Citar Citar  

  5. #5
    Registro
    29-noviembre-2016
    Edad
    37
    Mensajes
    2
    justo lo que necesitaba, lo voy a usar, gracias
    Citar Citar  

  6. #6
    Registro
    25-agosto-2014
    Ubicación
    colombia
    Edad
    21
    Mensajes
    1.797
    y para wordpres?
    Citar Citar  

  7. #7
    Registro
    12-noviembre-2016
    Edad
    24
    Mensajes
    90
    Es reposnsive ?
    Citar Citar  

  8. #8
    Muchas gracias!!
    Citar Citar  

  9. #9
    Registro
    07-enero-2013
    Ubicación
    Vivo En Limbo
    Edad
    29
    Mensajes
    1.107
    A probar si funka pues hare video explicativo Gracias, que tengas linda noche espero funcione de veras Gracias por el TUTO
    Citar Citar  

  10. Caja Pop Up &quot;Me Gusta&quot; de Facebook para Blogger
    kiki87fb le falta la x para cerra
    Citar Citar  

Página 1 de 2 12 ÚltimoÚltimo

Temas similares

  1. Tutorial: Caja Pop Up "me gusta" de Facebook para Blogger
    Hola a todos, Primero aclaro que esto no es algo inventado hecho por mí, fue donado por uno de mis colaboradores a mi pagina y como resulto súper...
    Respuestas: 98
    Último mensaje: Hoy
  2. ¿Alguna caja de "Me gusta" o "follow" de facebook (que sea responsive?
    Tengo algunas webs y le estoy implentando sus respectivas fanpage, pero ando buscando una caja de me gusta, de share que me sirva, asi sea un plugin...
    Respuestas: 3
    Último mensaje: 19-jun-2016
  3. Necesito Caja Pop Up "Me Gusta" de Facebook para blogger que sea centrado?
    Quien me pueda ayudar con esto, se lo agradesco
    Respuestas: 4
    Último mensaje: 08-abr-2015
  4. Tutorial: Caja Pop Up "Me Gusta" de Facebook para blogger (funcionando)
    Saludos a todos, he modificado el código para ayudaros con la caja, que en un tutorial anterior de:...
    Respuestas: 21
    Último mensaje: 12-ene-2015
  5. ¿plugins Caja De Comentarios facebook "en modo caja flotante lateral "es posible?
    ¿plugins Caja De Comentarios facebook "en modo caja flotante lateral con efecto Deslisante "es posible? en plataforma universal html :p4: ...
    Respuestas: 0
    Último mensaje: 30-dic-2012

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •