Botones para compartir estilo Taringa

Hace ya algo de tiempo que Taringa sacó esta forma de mostrar los botones para compartir el post, y desde que salieron muchos preguntaron cómo poner de esta misma manera, los botones de compartir en el blog.

En esta entrada vamos a ver cómo poner los botones para compartir estilo Taringa, que incluye los botones de Facebook, Taringa, +1, y Twitter.

Para colocar estos botones entra en la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y agrega antes de ]]></b:skin> los estilos:

.taringa-post-share li {
float: right;
margin-left: 5px;
list-style:none;
}
.taringa-post-share {
padding: 5px 35px 10px 1px;
margin-bottom: 10px;
margin-right: 0px;
background: url(URL de la imagen) no-repeat bottom right;
}
.clearfix:after {content:"0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}

Luego busca esta línea:

<div class='post-footer'>

Arriba de ella pega este código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class='taringa-post-share clearfix'>
<li><a class='twitter-share-button' data-count='vertical' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>

<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='tall'/></li>

<li class='t-big'><script type='text/javascript'>(function(){var x=document.createElement(&#39;script&#39;), s=document.getElementsByTagName(&#39;script&#39;)[0];x.async=true;x.src=&#39;http://widgets.itaringa.net/share.js&#39;;s.parentNode.insertBefore(x,s)})()</script>
<t:sharer data-layout='big'/></li>

<li><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;'/></li>

</ul>
</b:if>

Ahora, como la imagen del listón no se ajusta al ancho de las entradas, y como todos tienen un ancho distinto, he hecho tres imágenes, una de 500px de ancho, otra de 600px y otra más de 700px, así que donde se indica en el primer código pon la URL de la imagen que se ajuste más a tu blog.
Aquí abajo están las URLs de las imágenes en sus tres medidas.

IMAGEN DE 500pxhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH3po5InRkxzjPfUdOYHom05CBsW-8_gk_S-7QG-njE_4TYSTdNzd0yCt4he8-qjjhhT9nsdBgkj8KRukLYRbSnoYIPvfUStVcPQaR1Ydr1lbLIh15ZKHlo5LPuCkC1QZZYoLkH5eGgHQ/s500/ribbon-taringa500px.png
IMAGEN DE 600pxhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7tG3s2b_QwD_4YQcf5RqKyXiTeGzmk2TfVS4jfi1U5YiEdM9dJ5VrEqG1jq2FVzHnB59dlx3L8t2U2d3T53ttwP8Ix5VFbUletG2Hd6Rdv5c_UGW_eS3IMinuzCdV7uyRLkiGo50nsEc/s600/ribbon-taringa600px.png
IMAGEN DE 700pxhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqNu8a64Ysq5zVs6lYb6wQf2FJZ4N8nMuILXRqZJtrGczgXgHhnFL46tGcZl0M0506HKMNqdSBOrZF8JVu4bZ6LcDClPeNz1c8xfEHK8osKUKIqSHJd5RM4lRTNrJ0wJuYB-jSrbW5aPw/s700/ribbon-taringa700px.png

Habiendo puesto la imagen ya estará todo listo. Los botones no se verán en la portada, así que debes ingresar a una entrada individual para poder verlos.

En caso de que no se vieran, busca la línea del segundo paso, y revisa si la tienes dos veces, si así fuera pega el código en la otra repetida.

El listón se verá inclinado hacia la derecha, si quisieras centrarlo habrá que aplicar un margen derecho, así que cambia donde dice margin-right: 0px; por un valor más alto, por ejemplo:
margin-right: 30px;
Eso hará que se desplacen a la izquierda.

Como puedes ver los botones lucirán muy bien, y seguro sera una forma muy llamativa de invitar a tus lectores a compartir las entradas de tu blog.