Nota: para buscar algún código en especifico mas facil y rapido presiona "Ctrl +F"
Desde hace mucho quería saber como ponerlos en los blogs de blogger, grasias al potro de ciudadblogger hoy se como hacerlo espero les guste el truco.
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
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.
.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 == "item"'>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.
<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('script'), s=document.getElementsByTagName('script')[0];x.async=true;x.src='http://widgets.itaringa.net/share.js';s.parentNode.insertBefore(x,s)})()</script>
<t:sharer data-layout='big'/></li>
<li><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=box_count&show_faces=false&width=73&height=63&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px;'/></li>
</ul>
</b:if>
Aquí abajo están las URLs de las imágenes en sus tres medidas.
IMAGEN DE 500px
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV-w2obznkM7AEtvEOIr1F6sIticIJvXdpaGVnu_gD0Br9OI99g3hy6smppwcsdB1ggCN6BBDB7QRW2HZppxJZZXkxS7WuJ7rSl0Fib1GFQO0EhljV9kqQ-meWaCVN3FJIrThwUWKwy5U/s500/ribbon-taringa500px.png
IMAGEN DE 600px
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM_z_vulCLWQOXj2hQvi12yBKrLSo-DTh_Ed7rkHyjVTIq0KdPT8Pu9-CIkVA4ndn9SHLxfHeMVhUnuIEMJLZPvd_xiDPlJRLU0omIXye_0YhT9waEHO-D3yNY5ZnumXjcM-vWkvuA_X8/s600/ribbon-taringa600px.png
IMAGEN DE 700px
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz930P9jUVG5CEtUqDTlbuSPQ0yemTdjTUyA7tADeS-wZEHH0OUNrPMLfCIlO5ZTd2Th0a6i1SaRzANcnv6YKhHA8YRVaJ-DmRf456SP76AizJlXllf7a0mh3CqTNAvaUIOBRVRiH2obM/s700/ribbon-taringa700px.png
abiendo 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.
