Modificar y mejorar marcadores Sociales de Blogger

Actualización: Haga este tutorial para agregar el botón google plus en otra parte.

He visto bastantes tutoriales sobre el tema de compartir con botones sociales estos meses, he usado durante este tiempo botones de terceros como Share This!, Add this! que te atosigan con que te suscribas ;a sus propias cuentas o que cedas información para publicar un extracto de texto.

Los códigos personalizados de enlaces sociales por otro lado sirven pero no todo lo bien que querrías, pues agregan texto que debes borrar o no tienen función de acortador de enlaces que es imprescindible.

Sin embargo ninguno me convenció realmente y aunque el de blogger que trae por defecto me pareció realmente bueno, el diseño es bastante feo y solamente tiene unas cuantas opciones, así que preferí mejorarlo. Si quieren más botones solicítenlos. O pueden agregar sus propios enlaces en la sección para agregar más botones asegurándose de retirarle cualquier clase, id y atributos de tamaño o borde.

Respalde su plantilla antes que nada.
En Diseño vamos a Elementos de la página y en Entradas del  Blog marcamos en Editar, en la ventana que se abre marcamos la casilla Mostrar botones para compartir y pulsan en Guardar:

Limpiar la plantilla
Vamos a Edición de HTML en Diseño y buscamos con el navegador la regla share-buttons (Ctrl+F en Firefox y Chrome o Ctrl+B en IE), de existir bórrela y guarde su plantilla.

Marquen la casilla Expandir plantillas de artilugios.

Buscamos <div class='post-share-buttons goog-inline-block'> deberá borrar el código siguiente (si no encuentra la etiqueta pase a la instalación directamente):

<div class='post-share-buttons goog-inline-block'>
     <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div>
</b:if>

Busque y elimine el siguiente fragmento:

<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if> 

Guarde la plantilla una vez hecho.

Instalación
Buscamos <div class='post-footer-line post-footer-line-3'> y pegamos justo después

<!-- share buttons by matius -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div>
</b:if>
<!-- Fin share buttons -->

Ahora buscamos <b:includable id='shareButtons' var='post'>
Reemplazar todo el contenido entre <b:includable id='shareButtons' var='post'> y </b:includable> por esto:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='toolbox'>
<div class='custom_images'>
<!-- Sección fija, puede borrar botones eliminando secciones entre <b:if> y </b:if> -->
<b:if cond='data:top.showEmailButton'>
<a expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
<img alt='Enviar por Correo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9IT8vRwXYnKRrBfHDXXZW020T1sAtmYlXjSWqcHgAs6bG75gnGfzosq0LrDNYwgeklloRg6z5-rPNp7RWWh06aLFCAG7pAdet4tDYJZZdZPdHz_ZOhhnXfI9Vf9zUgqqpOb0IIQ/'/>
</a>
</b:if>
<b:if cond='data:top.showBlogThisButton'>
<a expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;,
\&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
<img alt='Enviar a blogger' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLEppJjrBQWqVVCWj20swmL9V2HOZ44CFJwIGtdpcPMpg-UVRamRpS-CrpmleVzNJ6A3OUhJrSpJukKhU_xrNqttaLzOXfQFDnU_MHnVcPBvcNwc3w72iLwRkAO9_a9nFPt6V-XA/'/>
  </a></b:if>
<!-- Face book -->
<b:if cond='data:top.showFacebookButton'><a title='Enviar a Facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;'
expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;'
expr:title='data:top.shareToFacebookMsg' target='_blank'>
<img alt='Enviar a Orkut' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNF1HQPjXHPsN5p9PMfSVT2ZWWOmpunPIIfayQ4Wpcj9Wldsfdp-IEgL1-otF6eS3-aaVzdsbxFPJT1JHjJnk2FrTEMeyYXqtNxD5dgqbLMIZ9eJAX0xK1TczTszi0XJMHqbXs5A/'/>
</a></b:if>
<b:if cond='data:top.showTwitterButton'>
<a expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg'
expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=290,width=750\&quot;); return false;&quot;' target='_blank'>
      <img alt='Tweetealo!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioPh8uNd8aW7jHHRdaPGUPX-TPM4SNF4BYIzXf8XLFS5TW4p85uRCvzplfY1smgC2JAKdN3HwM3G_WxrbWy7IvWywnRuESKnKKNsKaeoiDRTYkqmlrmygauzxff3xnc7FN-AnhYA/'/>
  </a></b:if>
<b:if cond='data:top.showBuzzButton'>
<a expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;,
\&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
      <img alt='Enviar a Buzz!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqm54z_nK8AqRt_IdYLLt-0ACXLrj7Kt6VuKl-7eqzQpx5DGXwW5BZBYbIFlgeOhBcvxuHyxj1u4rE7QEpTC8XjZg7GrM8HMpZLWdpB_UeGIZkXUfFT95QLZvr0WYbX0i-wdSbDw/
32x32.png'/>
</a></b:if>
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>
<!-- Fin de sección fija -->
<!--Sección para agregar más Botones Sociales de 32*32 pixeles-->
<!--Technorati-->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Enviar a
Technorati'><img alt='Technorati'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZtedtxfmGs4PJzIk0LhS27EPxuIuir4yzJ7SFfy78aD5aMlleTGy8OPB7oNy3Cwle77Bo6PV6MKk-W4EjouXRcYkLsDJPwxH8o3pCT2I1hB1dnFOw0XF6TflD_b6LlkEyoYxjPA/'/></a>
<!--Stumble-->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external
nofollow' target='_blank' title='Enviar a Stumble'><img alt='Stumble'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGBFUt9XDDd1ISx2EH4nLHjStGFUY6trpk8a_Rogeflcw7G5kZhf4MyZEfyGRKMYerImgrfYl6iUsxWGmy8t-yDf3tbcIz0Nx1M2SUNK3b8yIn98Jx8e7fu60n04yWmBCwk25-cw/'/></a>
<!--Delicious-->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow'
target='_blank' title='Enviar a Delicious'><img alt='Delicious'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu-0wt_JuUPvUlXiylCKfyMyHKw_fnbJRghWzBsWaqsuyXLqmrP-ZHvJow6rCTd6LLu4xTnyyP8_wo-6TrWt2QtezPPpaLdI__arV6ei60UnyygevAMPWqzCOIDqemXydTfb-lfQ/'/></a>
<!-- Meneame -->
<a expr:href='&quot;http://meneame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'
target='_blank'><img alt='Enviar a Meneame' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6YA1COCLQsLoouN8TCCxb7GChKPiuuO9L8tffVSg0BWHXP4xAJbCSm5u-WL8pi4akJcyWrwOqUgOxe6b4DGsE2FYvWOz2ae228eGR-k9Fiua-2a58iQxiZETBCbQVS4KMoetcxg/' title='Enviar a Meneame'/></a>
<!-- Fin Sección para agregar más Botones -->
<div class='clear' /></div>
</div>
</b:if>

Si quieren agregar más botones por ejemplo: el botón de RSS:

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Suscríbete!'><img alt='Suscríbete!' src='https://lh3.googleusercontent.com/_NNS6r_z4aeg/Tc5VChn61KI/AAAAAAAAUnE/zhwUxR_XMJI/social-connect-rss.png' /></a>

Tienen que agregarlo entre las marcas de la Sección para agregar más botones y como ya se dijo sin atributo de tamaño, borde o estilo. Los íconos son de 32*32, pero si los quiere cambiar debes modificar la regla de estilo .toolbox .custom_images a y luego reemplazar cada imagen por las que quieras usar.

Agregar CSS
Por último buscamos ]]></b:skin> y justo antes pegamos:

/* sociales */
.post-share-buttons {width:100%;}
.toolbox
{
width:380px; /* agrandalo 50px por cada icono nuevo */
height:50px;
margin:0 auto;
padding:5px;
text-align:center;
}
.toolbox .custom_images a:hover img{opacity:1;}
.toolbox .custom_images a img{opacity:0.65}
.toolbox .custom_images a
{
display:block; float:left;
width:32px;
height:32px;
margin:5px 5px 5px 0px;
padding:5px;
background:#fff;
border-radius:5px;
}

/* fin sociales */

Pulsa en Guardar Plantilla para terminar. El resultado debe ser parecido a esto En caso desalinearse los iconos, establezca un width y un height en la regla ".toolbox" yo usé el valor 380px y 60px respectivamente.