Botones twittear y compartir en Facebook flotantes con jQuery

Hace algún tiempo un usuario se interezó en los botones flotantes que tengo en mi blog, y en esta oportunidad los pongo a disposición del que los desee.

Estos botones tienen la particularidad de ser animados, son flotantes, están basados en jQuery y no necesitan una configuración complicada.

Vista previa de los botones:

¿Cómo añadirlos a Blogger?

Paso 1: Añadiendo la sección:

En ''Diseño | Edición HTML'' buscamos la siguiente línea:

<data:post.body/>

Arriba de esta, pegaremos el siguiente código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharebox'>
<div class='wdt'> <a class='twitter-share-button' data-count='vertical' data-lang='es' data-via='NOMBRE-TWITTER' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </div>
<div class='wdt'> <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=53&amp;height=65&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;send=false&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:65px;'/></div> </div>
</div>
</b:if>

Reemplaza lo que está en color rojo por tu nombre de usuario en Twitter

Paso 2: Añadiendo jQuery:

Ahora buscaremos la siguiente línea:

]]></b:skin>

Inmediatamente después de esta, pegaremos el siguiente código:

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

Paso 3: Añadiendo el script:

Ahora buscaremos la siguiente sección:

</head>

Arriba de esta, pega el siguiente código:

<script type='text/javascript'>
$(document).ready(function() {
var $sidebar = $("#sharebox"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 65;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>

Paso 4: Añadiendo los estilos:

Ahora buscamos la siguiente línea:

]]></b:skin>

Justo arriba de esta, pegaremos el siguiente fragmento CSS:

#sharebox {
float: left;                          /* Alineación */
margin-left: -82px;           /* Separación a la izquierda */
background: #ffffff;              /* Color de fondo */
position: absolute;            /* NO TOCAR */
-moz-border-radius: 6px; /* Bordes redondeados Mozilla */
border-radius: 6px;           /* Bordes redondeados genéricos */
}
#sharebox .wdt {
float: left;
clear: left;
padding: 5px;
}

Ahora guarda los cambios y listo:

Consideraciones:

1. En el script aparece el siguiente atributo:

topPadding = 65;

1. Reemplaza el valor para aumentar o disminuir la separación superior de los botones.

• Si deseas agregar sombras, agrega los siguientes atributos en la opción CSS:

-moz-box-shadow: 5px 5px 5px #C0C0C0;
-webkit-box-shadow: 5px 5px 5px #C0C0C0;

• Si deseas que los botones se muestren tanto en la página principal como en las entradas, elimina las siguientes líneas de la sección:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

• y

</b:if>