Hoy les traigo un tutorial para colocar barra flotante o deslizante con los botones de compartir de las redes sociales y también la opción cerrar empecemos el tutorial:

Características del la barra:

*Botones Facebook, twitter, google+.
*Esta flotando a la derecha zona media.
*Su posición es modificable.

Primero vamos a Plantilla > Editar HTML > y luego buscamos la etiqueta

</body>

Debajo de ella colocamos el siguiente codigo :

<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Ahora vamos a Diseño>Añadir Gadget... y agregamos un gadget HTML/Javascript y en el pegamos este código:

<style type="text/css">
#menudesli {
background-color: #00FFFF; /* Color de fondo */
width: 75px;
padding-top:5px;
padding-bottom:25px;
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: 2px;
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'"><img src="http://3.bp.blogspot.com/-_0qFToAh1VM/UVtBehic5GI/AAAAAAAAHBE/y8k-BUg54PE/s1600/cerr.png" border="0"/></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>
<div class="g-plusone" data-size="tall">
</div>

y Listo ya lo tenemos listo nuestra barra para blogger es muy fácil editar el código para los colore si quieren cambiar la Imagen en el código verán el link VERDE esa es la imagen lo que esta en ROJO son botones aleatorios de twitter y facebok los pueden cambiar por el codigo de sus fan pages o respectivos twitters espero que les haya gustado el tutorial.