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.

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

Caja de suscripciones caja de seguidores de Facebook y redes sociales para blogger

Cambiar de estilos al Archivo del blog Widget para Blogger

Cambiar mis etiquetas por un menú desplegable

Como agregar un menú para mi blog de blogger con un solo widget

Como añadir un Drop Shadows para imágenes y ampliarlo al momento que pase el ratón en blogger.

Como eliminar con la tecnología de Blogger

Como hacer un Menú vertical desplegable para mi blog de blogger

Como insertar el formulario de contactos de blogger en una pagina

Como insertar iconos de redes sociales en Blogger

Como insertar un Headline de Noticias con un solo widget en blogger

Como insertar un Menú desplegable y un Slideshow para blogger

Como insertar una Galería de imágenes en Blogger o Wordpress

Como personalizar la cabecera de cada barra lateral de otro color

Crear un FanBox de Google plus en Blogger

Cómo crear, eliminar y cambiar las etiquetas en Blogger

Mostrar un Slideshow con mis entradas populares para blogger

Mostrar un widget desplegable de categorías para blogger

Necesito un Slider para mi blog de blogger

Nuevo estilo de etiquetas con menu desplegable para blogger

Personalizar la caja de comentarios de blogger

Publicar un Widget por etiquetas con imágenes en blogger

A continuación mire su demostración en la siguiente página web

Demo Clic aquí

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”

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”

2 Un clic en “Editar HTML”

Ahora se le abrirá el Editor HTML de su plantilla

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.

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

TAGS: Medios de Comunicacion SocialTrucos Blogger

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.