Botones para compartir que se detienen y flotan al bajar la p?gina

Resulta cada vez es m?s importante que nuestras entradas sean valoradas y compartidas en las redes sociales, as? que para muchos mantener visibles los botones para compartir es indispensable.
Y una buena forma de mostrar siempre los botones es hacerlos flotantes, de manera que el lector pueda seguir vi�ndolos aun cuando baje el scroll de la p?gina.

Lo que hace este script de jQuery es que cuando un elemento, en este caso los botones, lleguen "al tope" de la p?gina se quedar?n flotando en una posici?n fija.
Puedes ver aqu? mismo el resultado, baja el scroll de la p?gina, y los botones que est?n a continuaci?n se quedar?n flotando. Si vuelves a la parte de arriba entonces los botones regresar?n a su lugar.

• Twittear
• 
• 

Esta barra de botones la pondremos debajo del t?tulo de las entradas, la barra incluye los botones de Facebook, Twitter, Google+, Bit?coras, y Pinterest.

Lo primero es entrar en Plantilla | Edici?n de HTML y marcar la casilla Expandir plantillas de artilugios. Pegamos antes de </head> el script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(function() {
var $flotarbotones = $("#botonesflotantes"),
$window = $(window),
offset = $flotarbotones.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarbotones.css({'position' : 'fixed', 'width' : '650px', 'top' : '0px'});
} else {
$flotarbotones.css({'position' : 'absolute', 'top' : 'auto'});
}
});
});
//]]>
</script>

Ahora antes de ]]></b:skin> pegamos los estilos de la barra:

#botonesflotantes {
width: 650px; /* Ancho de la barra */
height: 18px;
padding: 8px 0 10px 0;
position: absolute;
background: #eee; /* Color de fondo */
border: 1px solid #E6E6E6; /* Borde */
border-radius:5px;
z-index: 99;
}
.botonesflotantes {
margin-left: 5px !important; /* Distancia de los botones desde la izquierda */
}
.botonesflotantes li {
float: left;
margin-left: 5px;
list-style:none;
}

Por ?ltimo, debajo de <div class='post-header'> agrega el siguiente c?digo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:5px 0 35px 0;clear:both;'>
<div id='botonesflotantes'>
<ul class='botonesflotantes'>

<!-- Botón de Facebook -->
<li><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=25&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li>

<!-- Botón de Twitter -->
<li><a class='twitter-share-button' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>

<!-- Botón de Google+ -->
<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li>

<!-- Botón de Bit?coras -->
<li><a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img alt='votar' expr:src='&quot;http://widgets.bitacoras.com/votar/mini/&quot; + data:post.url' style='vertical-align:middle;border:0;float:right; margin-left:0px;' title='Votar este artículo en Bitacoras.com'/></a></li>

<!-- Botón de Pinterest -->
<li><a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li>

</ul>
</div>
</div>
</b:if>

Si quieres que los botones est�n al final de la entrada entonces el c?digo anterior p�galo antes o despu�s de <div class='post-footer'>

Ver?s que en el primer c?digo aparece en color verde el ancho de la barra, y tambi�n aparece en los estilos, si cambias el tama?o deber?s hacerlo en ambos. Toma en cuenta que son varios botones, por lo que no se recomienda hacerla m?s angosta, de lo contrario algunos botones se bajar?n. En caso de que decidas hacerla m?s angosta entonces quiz? sea necesario eliminar alg?n bot?n.

En el ?ltimo c?digo ver?s a cu?l bot?n corresponde cada c?digo, por si quisieras quitar alguno de ellos.

Si la barra quedara encimada al texto de las entradas entonces cambia el 35px por un valor m?s alto.
Los botones se ver?n ?nicamente al ingresar a las entradas individuales, de otra forma los botones se encimar?an unos con otros al bajar la p?gina.