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
A continuación mire su demostración en
la siguiente página web
Les gusto verdad!
Vamos a trabajar
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='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”
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
21 comentarios: