Son muchos los blog que tienen los 3 gadget de las redes uno bajo el otro ocupando bastante espacio de la sidebar, así que una buena forma de ahorrarnos ese espacio es contraer los gadgets para que se deslizen sólo cuando el lector quiera verlos.
Lleva incorporado los códigos de las distintas redes, solo falta modificarlos por los vuestros.
Ver Demo
Su instalación es de lo más fácil posible, solo hay que copiar el código y pegarlo en un gadget HTML de vuestro blog.
<style>
#slide-vertical{text-align:left; width:98%;}
.slideHolder { width:100%; margin:0;padding:2px;font-family:georgia, serif; float:left;}
.slideOuter { width:100%; overflow:hidden; margin:0;}
.slideOuter .slide {padding:0; margin:0; list-style:none; width:100%; overflow:hidden;}
.slideOuter .slide li {display:block; float:left; height:78px;border-bottom:2px solid #fff; width:100%; overflow:hidden;transition: 0.75s;}
.slideOuter .slide.current li {height:38px;}
.slideOuter .slide li.p1{background:#3173d1;}
.slideOuter .slide li.p2{background:#C10808;}
.slideOuter .slide li.p3{background:#D7EAFB;}
.slideOuter .slide:hover li.p1,
.slideOuter .slide:hover li.p2,
.slideOuter .slide:hover li.p3
{height:38px;}
.slideOuter .slide:hover li.p1:hover {height:315px;}
.slideOuter .slide:hover li.p4:hover {height:330px;}
.slideOuter .slide:hover li.p2:hover {height:330px}
.slideOuter .slide:hover li.p3:hover {height:330px}
.slideOuter .slide li span {padding:0 15px; margin:0; font-size:18px;font-weight:700;line-height:48px; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);cursor:pointer}
.slideOuter .slide li {color:#fff;}
.slideOuter .slide li.p2 span,
.slideOuter .slide li.p3 span {color:#fff;}
.slideOuter .slide li.p2 .content {padding:0 15px;margin:0;width:100%;}
</style>
<div id="slide-vertical">
<div class="slideHolder">
<div class="slideOuter">
<ul class="slide current">
<li class="p1">
<div>
<span> Seguidores Facebook</span>
<div class="content">
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FNOMBRE-PAGINA-FACEBOOK&width=240&colorscheme=dark&connections=15&stream=false&header=false&height=260' style='border:none; overflow:hidden; width:240px; height:260px;'/></iframe> </div>
</div></li>
<li class="p2 current">
<div>
<span>Seguidores Google+ </span>
<div class="content">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/ID-PERFIL-GOOGLE" data-source="blogger:blog:followers" data-width="250"> </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>
</li>
<li class="p3">
<div>
<span>Seguidores Twitter</span>
<div class="content">
<div id="twitter-box"></div>
<script>
var tw_user = 'NOMBRE-TWITTER';
var tw_width = 240;
var tw_height = 280;
var no_face = 10;
var tw_color='light';
(function() {
var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true;
tw_box.src = 'http://areaticnet.260mb.net/scripts/twitter.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
})();
</script>
</div>
</div></li>
</ul>
</div>
</div>
</div>
MODIFICACIONES:
NOMBRE-PAGINA-FACEBOOK por la vuestra.
ID-PERFIL-GOOGLE por el vuestro.
NOMBRE-TWITTER por el vuestro.
Si accedes al Fan Box de Twitter y te muestra la siguiente imagen, clikea en generate para autorizar a la aplicación. Una vez autorizada, actualiza tu navegador y serán visibles tus seguidores.
Espero que lo disfrutéis y si tenéis algún problema con la instalación, comentad y seréis atendidos lo más rápido que me sea posible.