Seguidores de Facebook y Twitter en el lateral de tu Blog

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

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.

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>

<div id='face1'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIZ0LjF5_Cj1tF_fEYwXIC09XxATySIOJx0-0rLAFvP8n4Tay9qPnuRS3g2seG89mesgyZ8YJEdC74pzX0D5tSXHEZQO0AnQy1y_BYHe5sMD4WYAAVWQSHD8gatg_f6o8fi-dNz2pgpOVm/s1600/facebook.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'><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/amorsevillista&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350' style='border:none; overflow:hidden; width:240px; height:325px;'/></iframe>
</div></span></div></div>
<div id='google2'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB8l2E6ANgq-ymMhrtJQi3z5gRKN9Aa-dpXcVBJXuA1aN9CKYozrKrQGy2zd02srDtz7yRmiqEGZ4bBJAcErWX066oBvORW1cjYzJVjsqduJaWGd8YMM2j2ETuQLI53RtnqsMmm7n9Njc/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/108543428426862782326" 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>
<div id='twitter3'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxEWh_kHoAVvgWtz8ZXk7AdnmaQdoN6swzMg_BzqsBwOcDy9XCG8H2TE3C4QeVRuHowrmBK4UH8Q9wE_SmNnXNzk4gGxLb9wRg4SxpnvgfTQRCH1bl1hNuFk1occZJhl7ARQSOolSsO7tN/s1600/twitter.png' style='float:left;'/>
<div style='background: #00a0e8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><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 src="http://50.63.179.86/twitter/twitter.html?user=amorsevillista&no=17&h=325&t=light& scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:325px;" allowtransparency="true"></iframe>
</div>
<div id="twitter-box"></div>
</div></span></div></div>

Cambiamos:
Para facebook: amorsevillista (por la vuestra)
Para Google+ : 108543428426862782326 por vuestra ID.
Para Twitter:  amorsevillista (por el vuestro)


Guardamos y Listo.

Publicaciones Relacionadas