Botones para compartir flotantes que se deslizan al bajar

Hace poco ve?amos una manera de poner debajo de los t?tulos botones para compartir en las redes sociales, de forma flotante, es decir, que �stos permanec?an visibles aun cuando se bajara el scroll de la p?gina.

En esta ocasi?n veremos algo similar, digo similar porque aunque tambi�n se mantienen flotantes, �stos botones para compartir las entradas del blog bajan junto con el scroll de la p?gina pero con un ligero efecto deslizante, adem?s, �stos botones se encontrar?n del lado izquierdo de las entradas. Incluiremos s?lo los botones b?sicos: Facebook, Google+ y Twitter, sin embargo se pueden agregar m?s o cambiarlos por otros.

Puedes ver el ejemplo aqu? mismo en esta entrada, al bajar la p?gina ver?s que los botones tambi�n bajan, y al subir de nuevo los botones regresar?n a su lugar.

Tweet

Para poner estos botones flotantes para compartir usaremos un script muy corto de jQuery.
Lo primero es ingresar a Plantilla | Edici?n de HTML, marcar la casilla Expandir plantillas de artilugios y pegar antes de </head> lo siguiente:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
// <![CDATA[
$(function() {
var offset = $("#BotonesFlotantes").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#BotonesFlotantes").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#BotonesFlotantes").stop().animate({
marginTop: 0
});
};
});
});
// ]]>
</script>
<style>
#BotonesFlotantes {
position: absolute;
left: -100px; /* Distancia desde la izquierda */
border: 1px solid #FB5F55; /* Borde del contenedor */
border-right: 0px;
padding: 10px;
background-color: #FFF; /* Color de fondo del contenedor */
z-index:9;
}
#BotonesFlotantes div {
margin: 10px 0;
}
</style>

Luego buscamos esta l?nea:

<div class='post-header'>

Y debajo de ella pega lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='BotonesFlotantes'>
<div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px'/></div>

<div><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>

<div><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></div>

</div>
</b:if>

Guarda los cambios y listo.
En el primer c?digo hemos puesto tanto el script como los estilos ya que ambos son muy breves. Ah? ver?s en color verde a qu� corresponde cada ?rea.
Donde dice /* Distancia desde la izquierda */ debes modificarlo hasta que quede a la distancia correcta seg?n tu plantilla. Ah? mismo ver?s d?nde cambiarle el borde y fondo del contenedor.

Estos botones se ver?n s?lo en las entradas individuales, de otra forma no funcionar?an.
Si quisieras agregar m?s botones entonces a??delos antes de </div> y cada uno encerrado entre <div> y </div>

Recuerda que este gadget usa jQuery, por lo que si ya tienes la ?ltima versi?n de jQuery no hace falta repetir el script. Y si usas Mootools o Scriptaculous debes aplicar unos cambios al script.

Sino te aparecieran, pon la /* Distancia desde la izquierda */ en 0px, si tampoco aparecen entonces el ?ltimo c?digo ponlo arriba de <data:post.body/>