Revista Deportes

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

Publicado el 08 abril 2014 por Amorsevillista @amorsevillista
gadget seguidores socialesDe 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.
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.Cajas de Seguidores (Facebook,Google+ y Twitter) deslizables y multicolor en la sidebar
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.


Volver a la Portada de Logo Paperblog