Botones para Compartir Flotantes de Facebook, Twitter y Google+

Los botones que te mostrare esta vez, son aquellos que están a un lado de la pagina y bajan o suben cuando usas la barra de desplazamiento.

Estos botones de compartir no utilizan Jquery, por lo mismo serán compatibles y funcionaran en cualquier tipo de sitio web. Ademas de ello, no serán una carga extra para el blog, puesto que solo se le agregaron algunas lineas de estilos CSS.

Puedes observar en este blog de prueba una demostración: Demo

Utiliza el siguiente botón para añadir fácilmente este widget a blogger

Si quieres hacerlo manualmente, aquí esta el código  sin embargo en cualquiera de los casos debes hacer las modificaciones indicadas

<!-- Inicia barra flotante compartir -->
<style>
/*Pageshare Terrenoblogger.co*/
#pageshare {
float:left; 
margin-left:-100px; /*Distancia desde la Izquierda*/
background: #fafafa; /*Color de fondo del contendedor*/
position:fixed; 
bottom:200px; /*Distancia desde abajo*/
border:1px solid #e5e5e5;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
#pageshare:hover { 
background-color:#ffffff;-webkit-box-shadow:0px 2px 2px rgba(0,0,0,.1);-moz-box-shadow:0px 2px 2px rgba(0,0,0,.1);box-shadow:0px 2px 2px rgba(0,0,0,.1);}
#pageshare .sbutton {
float:left;clear:both;margin:5px 5px 0 5px;}
</style>

<div id='pageshare' title="Obten este Widget en Terrenoblogger.co">
<div class='sbutton' id='tweet'>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="USUARIOTWITTER">Tweet</a> </div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone> </div>
<div class='sbutton' id='fbshare'>
<div id="fb-root"></div>
<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_ULA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="true" data-layout="box_count" data-width="50" data-show-faces="false"></div></div>
<div style="clear: both;font-size: 10px;text-align:center;"><a href="http://www.terrenoblogger.co/">Widget</a></div><!-- No remover este link --> </div>
<!-- Finaliza barra flotante compartir -->

• Debes modificar USUARIOTWITTER, y reemplazarlo por el nombre de tu usuario de twitter.
• Lo que esta en color verde es la distancia desde la izquierda, desde abajo y el color de fondo; los cuales puedes modificar hasta que se ajusten a tu gusto y necesidad

Cuando hayas agregado el Widget a tu blog, recuerda arrastrarlo hasta ponerlo debajo de la entradas, así:

Esta barra de compartir es inmensamente útil y espero que puedas utilizarla.

Te dejo para que continúes trabajando con el widget.

Saludos!