add

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='http://lh3.googleusercontent.com/-vq69jjHi_aA/UKxnEYWptDI/AAAAAAAADdU/1bjiSBYnRSo/fb_tab.png' 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='http://lh6.googleusercontent.com/-vQ5RYEg0TVU/UOCXFfh4mZI/AAAAAAAADz4/kWTI9_MxfPE/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

emailEnviar por correo

17 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. 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

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios