Añadir el botón de "Pinterest" a cada entrada de Blogger

Vamos a colocar un botón de "Pin it", con contador, a cada entrada(post) de nuestro blog en Blogger/Blogspot. Se visualizará únicamente en las páginas individuales de cada entrada(post) y no en la que se listan varias entradas. Con él permitiremos a nuestros lectores compartir nuestro post en la red social "Pinterest". Igual que seguramente ya hacemos con botones de twitter, facebook, google+,...

Ir a Diseño->Edición de HTML (En el nuevo interfaz: Plantilla -> Editar HTML)
Antes de modificarla, es muy buena idea hacer una copia de seguridad de nuestra plantilla actual.
Marcar el checkbox "Expandir plantillas de artilugios", sobre la esquina superior derecha de la ventana con el código HTML.
Buscar el siguiente tag en el código HTML:

<data:post.body/>

Éste tag es el que inserta el contenido de cada entrada en el blog. Normalmente, vamos a encontrar 2 ocurrencias de ese tag en el código. Nos vamos a quedar con la primera (desde arriba).

Pegamos el siguiente código a continuación del primer tag <data:post.body/> que hemos encontrado:

<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>
</b:if>
<!-- Pinterest button End -->

Configuración del botón

El botón se puede ajustar cambiando el valor del atributo "count-layout", tomando como referencia la siguiente tabla:

Button type	count-layout value	margin-left (in line 5) value
	vertical	-46px
	horizontal	-93px
	none	-46px

Posición del botón

Los pasos anteriores son para colocar el botón en la parte inferior izquierda de cada entrada del blog. Para cambiar la posición, hacemos lo siguiente:
Para colocarlo en la parte superior de la entrada, pegar el código anterior antes del primer tag <data:post.body/>, en vez de después.

Alineación del botón

Cambiar el valor de la propiedad "text-align", en el primer

del código que hemos pegado el código HTML de la plantilla:
Para alinear a la derecha: asignarle "right";
Para centrar: asignarle "center";
Una vez que lo hemos cambiado en la plantilla, pulsamos "Guardar" y visualizamos el blog.

El botón debería estar apareciendo en la páginas individuales de cada entrada del blog.

Podemos también colocar el botón de Pinterest como widget en nuestro blog de Blogger.

Traducido desde aquí.