08 abril 2014

Cajas de Seguidores (Facebook,Google+ y Twitter) deslizables y multicolor en la sidebar

gadget seguidores sociales
De nuevo os traigo otro tutorial, esta vez se trata de un gadget para la sidebar donde podemos mostrar a nuestros seguidores de las distintas redes sociales con un efecto multicolor y deslizánte.

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.


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.



10 comentarios

muchas gracias,voy corriendo a ponerlo ajaja

gracias Antonio queda perfecto sin ningun problema gracias

lo malo es que esta dirección http://areaticnet.260mb.net/scripts/twitter.js te abre publicidad ajena al usuario que entra desde un dispositivo movil

David no he observado lo que comentas pero otra opción sería esta: fan box por Matias MX

hola, la pestaña del twiter no me va. a que puede ser debido? gracias.

Déjame url de tu blog y echo un vistazo. Así no se donde mirar.
En el blog de pruebas funciona correctamente.

hola sevillista, perdon me equivoque de articulo, creo que mi barra no era de tu pagina no estoy seguro. pero mirando en la tuya puse esta..http://www.amorsevillista.com/2013/05/redes-sociales-con-efecto-deslizante.html. y no se desplaza el lateral al poner el raton. me podrias ayudar?, este es mi blog. http://zonatvs.blogspot.com.es gracias.

Hola me gusta la idea pero lo que yo busco es que una caja tenga tres pestañas que me muestre los seguidores de blogger, google + y facebook. ¿Tu sabes como hacerlo?

Eimi Romane

Eimi, lo más parecido que puedes encontrar en este blog, es esta entrada:
http://www.amorsevillista.com/2013/05/caja-de-autor-con-seguidores-de-redes.html


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"