Como agregar de forma flotante la caja de seguidores de Facebook y Google+ en Blogger


Necesitaban insertar de forma flotante una caja de seguidores Fanpage de Facebook y una caja de seguidores de Google+ en Blogger con unos simples pasos? Has llegado al sitio adecuado. Les informo que es muy fácil de realizar este truco, algunas páginas web y blogs utilizan este sistema para atraer a más usuarios a que se suscriban a sus perfiles sociales y así obtener más tráfico web en sus páginas, gracias a las nuevas actualizaciones que se realiza diariamente. Sobre todo si un blog o una página web es interesante, les aseguro que los usuarios que visitan sus blogs se añadirán a sus perfiles sociales. Lo que vamos hacer es copiar un código y pegarlo en un widget, el cual ara que se muestre de forma flotante a lado derecho de su blog o página web. No vamos a utilizar ningún script para que no nos cause errores con los otros posibles códigos que tengamos en nuestro blog. Y al final realizaremos unos dos cambios para que se muestre nuestros perfiles sociales de Facebook y Google+. Esta caja de seguidores flotante de Facebook y Google+ funciona en todos los navegadores web como Firefox, Google Chrome, Internet Explorer etc.

Como agregar de forma flotante la caja de seguidores de Facebook y Google+ en Blogger

Además, si necesitan obtener más trucos para Blogger, les dejo algunos artículos que publique anteriormente


A continuación mire su demostración en la siguiente página web
Les gusto verdad!

Vamos a trabajar

Actualización de código

1 Ir a Blogger.com

2 Un clic en “Diseño


3 Abre un gadget “Añadir un gadget

Como agregar de forma flotante la caja de seguidores de Facebook y Google+ en Blogger

4 Busca el widget que dice “HTML/Javascript” ábrelo


5 Ingresa las siguientes líneas de código en su interior

<style>
#flotante1 {
position:fixed;
top:100px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1002;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante2 {
position:fixed;
top:240px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1003;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante1:hover, #flotante2:hover, #flotante3:hover {
right:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
div.likeboxwrap {
margin-top:-5px;
margin-left:-45px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
}
</style>

<!-- Primera pestaña -->
<div id='flotante1'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwwKhozsLx1V-rf31xSyupg04FK-JmITsPleff_JmqVvNkaFdsdQeWVGAS6GtpX0gNu7fU-MEERsS75uJHhKiPX0T_mnCYfUc34jR2sINHJ2Kq_0991xxJszTlVrE0WDT2ONbz0uH0q1I/' style='float:left;'/>
<div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'><div class="fb-page" data-href="https://www.facebook.com/ayudadeblogger" data-width="298" data-height="248" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/ayudadeblogger"><a href="https://www.facebook.com/ayudadeblogger">Ayuda de Blogger</a></blockquote></div></div>
</div></span></div></div>

<!-- Segunda pestaña -->
<div id='flotante2'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu6ItO-UNRVdYDKuB6ep5dzOVI-cTHua9e48rmeLRicRmEAIk-GTlTHFW51fnaUW7LtdW6qdAf3NyEkvw1OYF7mpe2yYHW0p6Tl09a-AHaFNEcXja2w804kJr7BtbLnhGYUom3J8sbhb0/s159/goo_tab.png' style='float:left;'/>
<div style='background: #9A9FA8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap' style="padding-left:20px; padding-top:15px; height:310px !important;">

<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/109993546188820326294" data-source="blogger:blog:followers" data-width="240">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'es'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>

</div></span></div></div>

Realice los siguientes cambios:

He marcado de dos diferentes colores en los cuales ustedes tendrán que realizar sus diferentes cambios

Borra las tres URLs que están marcadas de color azul por la dirección URL de su Fanpage de Facebook  https://www.facebook.com/ayudadeblogger

Cambia el nombre que dice Ayuda de Blogger por el nombre de su FanPage

Y por último, también debes borrar los números que están marcados de color rojo, por el número correspondiente de tu ID de Google+, puede ser de tu perfil o de tu página de Google+.

Eso es todo, ahora dale un clic en “Guardar” y ubícalo en el sidebar

1 Un clic en “Plantilla

Como agregar de forma flotante la caja de seguidores de Facebook y Google+ en Blogger

2 Un clic en “Editar HTML

Como agregar de forma flotante la caja de seguidores de Facebook y Google+ en Blogger

Ahora se le abrirá el Editor HTML de su plantilla

Como agregar de forma flotante la caja de seguidores de Facebook y Google+ en Blogger

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

 Blogger

Busca este código

<body>

Si no encuentran ese código pueden buscar este otro código

<body expr:class=

Ingresa el siguiente código justo abajo del código que encontraste

<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>


3 Ahora da un clic en “Guardar plantilla

Fácil verdad!

Recuerda suscribirte a mis nuevas actualizaciones, para que recibas mis publicaciones directamente en tu correo electrónico

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

22 comentarios:

  1. Hola, lo primero decirte que eres de gran ayuda para mi que soy una inesperta total en estos temas.
    He seguido los pasos uno a uno, y me sale perfectamente la caja de google, pero la de facebook sale vacia. me puedes ayudar por favor.
    Saludos.
    Carmen Mora.

    ResponderEliminar
    Respuestas
    1. Hola, claro que te puedo ayudar, enviame la direccion URL de tu blog, y asi poder verlo y decirte donde esta el error.
      Saludos

      Eliminar
    2. Hola excelente trabajo pero donde coloco lo de google+ ya que esta marcado de rojo como tu dices

      Eliminar
    3. Borra toda esta URL https://plus.google.com/109993546188820326294 y remplazalo por la direccion URL de tu Google+
      Saludos.

      Eliminar
  2. El cuadro sale en blanco para facebook

    ResponderEliminar
    Respuestas
    1. Debes haber cometido algun error o borrado por accidente algun codigo, vuelve a insertar todo de nuevo y veras que te funciona..
      Saludos

      Eliminar
  3. ami me pasa lo mismo, la de fb sale vacia, no tendra algo que ver con mi pagina de facebook, por que dejo el codigo con tu direccion y entonces funciona..

    ResponderEliminar
  4. //---------------------------------------------------------------------------------------------------------------------------------//
    href=https://www.facebook.com/humbertothen&width
    //---------------------------------------------------------------------------------------------------------------------------------//
    asi es como pongo mi pagina de facebook y no me sale, claro sin las lineas, las puse aqui para dividir

    ResponderEliminar
  5. para los que el cuadro de facebook le sale en blanco, lo que sucede es que no funciona con paginas personales, deven crear una fan page en facebook, me pasaba lo mismo lo hice asi y me funciono...

    ResponderEliminar
  6. Hola muchas gracias,, me fue de gran ayuda solo en el facebook lo que me salio en blanco ya lo he vuelto a borrar y colocado de vuelta pero sigue igual este es la URL de mi blog
    http://isidro.zonanetwork.com

    ResponderEliminar
  7. hola no se como consigo ="AGREGA TU FEEDBURNER-LINK-AQUI"

    ResponderEliminar
  8. hola ya lo hice pero los cuadros mes salen en blanco gracias

    ResponderEliminar
  9. hola me sale los cuadros en blanco mi blog es http://dekosmanualidades.blogspot.com/ gracias

    ResponderEliminar
  10. Saludos, hay forma de poner el twitter tambien?

    ResponderEliminar
  11. Hola, agradezco tu ayuda, me sale solo una ilera pequeña de las personas que siguen mi fan page, quisiera se mostrara el cuedro completo y se vean mas perfiles. Elimine el de google, no lo necesitaba. Mi blog http://maestropensante.blogspot.com/

    ResponderEliminar
  12. hola me a salido super ien las dos cajitas pero me salen en blanco ?

    ResponderEliminar
    Respuestas
    1. Hola Karla, cual es la dirección URL de su blog de Blogger y así poder observar su inconveniente.

      Saludos.

      Eliminar
  13. hola un saludo, no encuentro con ningún código me sale 0 de 0,
    no se donde puede estar el error
    body expr:class=

    ResponderEliminar
    Respuestas
    1. Hola, gracias por escribir, con respecto a su pregunta debe buscar el siguiente código:

      <body>

      Saludos

      Eliminar
  14. yo lo que parece le sucedio a la mayoria la caja me sale en blanco solo uso face y ya tengo fanspage ayuda

    ResponderEliminar
    Respuestas
    1. Hola Haber, sobre su pregunta, como usted puede ver el demo funciona correctamente, por favor realice las instrucciones tal como lo muestro en el tutorial

      Saludos.

      Eliminar
  15. Hola como estan todos, me pasaba lo mismo pero despues de ponerlo asi donde va tu pagina lo consegui http://facebook.com/tupagina y me salio

    ResponderEliminar