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/AVvXsEhIgHUjxLcFI6iPliqiAd2A8h-VHqFP_e189Zy8Ir6Q0l1Jc9LwpTR63tv9RmBWlcKv3MxzudtjBlkaPtHQDe5DuxcaCp2b_d03N3rhyphenhyphenP2EhRKf9RoytzPNWmUF3kJUqEQyGNlt1MHlKiA/s500/ribbon-taringa500px.png
IMAGEN DE 600pxhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7QU3fIVZ2GAnBNuePwLzB4yxfiOuamdwOmjFkVez1Mw_fMEsRlchBudzTNyF4pNFJiBgismXWjH9rcWqsEFTuZ6crKQizESC2h68f_xuv9GRnVa_p06uAXRg9ToytETwr6iaVAZ0W0-A/s600/ribbon-taringa600px.png
IMAGEN DE 700pxhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu62to9jr41zbQWkK-1aKzVq212GOyKq0g8jZ6pwSCaxkPl8d-mInvDi3__GTbYAgeeSHz5bYKV4Qce8SLaXJAHw01rQlLLHhhnQeNv_s7ypq66mUa_jNXhFu0yEfPjNYGU2omxZ55qOM/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.