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




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: