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.
Publicaciones Relacionadas
trucos blog
