Añadir footer de compartir post estilo DanPengui

Hola amiguitos!

Hoy, navegando por Twitter me topé con un Twitter de DanPengui, me dió la curiosidad revisar su blog ya que hace bocha de tiempo que no entro y pues, encontré algunas que compartiré después.

Entre dichas características está esta sección de compartir:


Dicho artilugio es el protagonista de este post. Comencemos:

Antes que nada, quiero aclarar que cuando vi el gadget, vi que decía "Taringa" así que para matar ocio encontré un post en CiudadBlogger (que es el mismo que se usó para poner el original), donde lo explicaba, post que puedes encontrar aquí: Clic aquí para ir al post original.

Ahora, este tuto y el de CB son el mismo, por lo que si prefieres el otro (o le entiendes más), no dudes en usarlo.

Para empezar, ve a Edición HTML, y busca


]]></b:skin>
Y justo antes de eso agrega lo siguiente
.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(EL LINK DE LA IMAGEN ESTÁ AL FINAL DEL POST) no-repeat bottom right;
}
.clearfix:after {content:"0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
Luego, busca esto en tu plantilla:
<div class='post-footer'>
Y pega arriba lo siguiente:
<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, si bien pudiste notar, el link de la imagen no está, puedes usar el botón que dejé en imgur, o crearte uno propio. El botón está aquí: http://i.imgur.com/JtdU2XF.png
Y es este:
(Mil disculpas a DanPengui, si desea que lo retire (solo la imagen), diríjase a mi Twitter: @TortuCPBR
 

Guarda los cambios y listo! :D Ya tienes tu botón de compartir.

Tortu Fuera

My Instagram