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 -->
<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 |
|
|
 |
|
|
 |
|
|
 |
|
|
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/>
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í.
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.
