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 == "item"'>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + 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('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + 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.
