Todo se puede aprender
...si se quiere.
Home » , » Seguidores Flotantes de Facebook, Twitter y Google + en el Lateral de tu Blog

Seguidores Flotantes de Facebook, Twitter y Google + en el Lateral de tu Blog

5 de abril de 2014 | 16:12


Voy a mostrar como colocar los Seguidores de Twitter, Google+ y el Fanbox de facebook en el lateral del Blog.
Se muestra solo una pestaña fija a la derecha, y al pasar el cursor se abre mostrando el gadget de los seguidores. (el de Facebook solo funciona con páginas, no perfíl).

VER EJEMPLO EN MI BLOG --->

Para instalarlo en vuestros Blogs hay que seguir estos pasos:
1.- Ingresa en musicpaax.com/twitter, "generar código", autoriza a la aplicación y rellena el campo colocando tu nombre de usuario. Después se va a usar!.

2.- Ir a Diseño-Añadir un gadget-Html/Javascript-Y en su interior colocamos lo siguiente:


<style>#face1{
position:fixed;
top:50px;
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;
}
#google2 {
position:fixed;
top:210px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#twitter3 {
position:fixed;
top:370px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#face1:hover, #google2:hover, #twitter3: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>

</code><br />
<div id="face1">
<code><img src="http://3.bp.blogspot.com/-kDOYDN9J_vg/UbpSkqJ7prI/AAAAAAAAW_I/oZMAF0aUb8s/s1600/facebook.png" style="float: left;" />
</code><br />
<div style="background: #3c5a98; border-radius: 0px 0px 0px 10px; height: 325px; margin-left: 38px; padding: 8px 5px 0pt 50px;">
<code></code><br />
<div class="likeboxwrap">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/bibliadelprogramador&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350" style="border: none; height: 325px; overflow: hidden; width: 240px;"></iframe><code>
</code></div>
</div>
</div>
<code>
<div id="google2">
<img src="http://lh6.googleusercontent.com/-vQ5RYEg0TVU/UOCXFfh4mZI/AAAAAAAADz4/kWTI9_MxfPE/s159/goo_tab.png" style="float: left;" />
<br />
<div style="background: #9A9FA8; border-radius: 0px 0px 0px 10px; height: 325px; margin-left: 38px; padding: 8px 5px 0pt 50px;">
<br />
<div class="likeboxwrap" style="height: 310px !important; padding-left: 20px; padding-top: 15px;">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/111591091368882245474" 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>
</div>
</div>
<div id="twitter3">
<img src="http://1.bp.blogspot.com/-welbyizfN9c/UbpSlLjzQnI/AAAAAAAAW_Y/gzSHutYnl6M/s1600/twitter.png" style="float: left;" />
<br />
<div style="background: #00a0e8; border-radius: 0px 0px 0px 10px; height: 325px; margin-left: 38px; padding: 8px 5px 0pt 50px;">
<br />
<div class="likeboxwrap">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

<div class="twitter">
<iframe allowtransparency="true" frameborder="0" no="" src="http://50.63.179.86/twitter/twitter.html?user=BibliaProgramar&no=17&h=325&t=light& scrolling=" style="border: none; height: 325px; overflow: hidden; width: 290px;"></iframe>
</div>
<div id="twitter-box">
</div>
</div>
</div>
</div>


Cambiamos:
Para Facebook: bibliadelprogramador (por la de ustedes)
Para Google+ : 111591091368882245474 por el ID de ustedes.
Para Twitter:  BibliaProgramar (por el de ustedes)

Guardamos y Listo.
Compartir