Estadisticas y redes sociales flotantes

Hola gente, todos los que estamos en este mundo de los blogs sabemos la importancia de las redes sociales. Pues bueno hoy os traigo un tutorial para poner un gadgets como el que tengo yo en la derecha, flotante y transparente en el que salen todas las redes sociales más importantes y las estadísticas de nuestro blog.

Vale, lo único que debemos hacer es ir a nuestro blog, seguida mente a diseño y después elegimos una zona cualquiera, esto no afectara a la posición. Después le damos a añadir html/javascript y pegamos el siguiente código.

<style type="text/css">
#menudesli {
background-color: ##000000; /* Color de fondo */
width: 90px;
padding-top:20px;
padding-bottom:100px;
text-align: center;
/* POSICION FLOTANTE */
position:fixed !important;
right:5%;  /* Esto decide Izquierda o derecha 5% */
top:200px;  /* Distancia de arriba para abajo */
z-index:10 !important
/* POSICION FLOTANTE */
/* REDONDEADO */
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
/* REDONDEADO */
  border:-color: #000000; /* Color de borde */
  border-width: 0px;
  border-style: solid;
}
</style>
<div id="light" class="white_content">
<div class="menudesli" id="menudesli">



<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></a>
<a href="http://blogger.el-foro.com/t2-barra-deslizante-botones-compartir-opcion-cerrar" target="_blank" /></a>

<div class="fb-like" data-send="false" data-layout="box_count" data-width="75" data-show-faces="false" data-font="arial"></div>

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="es" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<script id="_wauysf">var _wau = _wau || [];
_wau.push(["colored", "y1rg4qp4bad7", "ysf", "ff071e000000"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/colored.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Flabitacoradesimon.blogspot.com%2F&amp;width&amp;layout=box_count&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:65px;" allowtransparency="true"></iframe>

<div class="g-plusone" data-size="tall">
</div></div></div>

Y listo guardamos todo y ya tendremos nuestra barra flotante con las principales redes sociales. Espere que les haya gustado. Nos vemos en el siguiente tutorial, como siempre digo si tienen alguna duda no duden en comentar.