By
Pinterest es sin duda una de las plataformas o redes sociales con más crecimiento y aceptación en internet, y es que el impacto social que el contenido multimedia como lo son las imágenes hace que visitar un blog se vuelva más atractivo que con texto. A continuación les presento un sencillo tutorial con el que podrán agregar un botón personalizado de pinterest a cada imagen de su blog en blogger, que aparecerá cada vez que el ratón se posicione sobre una fotografía.
Ok, para empezar vamos a Configuración de Blogger → Plantilla → Editar HTLM, dentro de la plantilla presionamos Ctrl + F para que aparezca un cuadro de búsqueda en la parte superior derecha del contenido, buscamos </body> y justo encima de esa parte pegamos lo siguiente:
<script>
//<![CDATA[
var bs_pinButtonURL =
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigcPCjStfRMlxcY8onLNsXZc1BwLrhinxLvWphEsfVA-jalMkLF1zHFX-jp8OBdKOC_x4qB1tH1Tw8yrTLWnIe0fYEhXkpNuJslPMjx2s5nHPB0d30GKqPVFwVNLsMjQnaB1L_ErTAek1w/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'
type='text/javascript'></script>
<script id='bs_pinOnHover'
src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js'
type='text/javascript'>
</script>
Como verás, hay una URL marcada en color rojo, esa dirección es el ícono que se mostrará como botón para compartir en Pinterest sobre cada imagen, si no te gusta, puedes agregar el tuyo con una URL de un archivo guardado en la nube, o si lo prefieres, puedes utilizar alguno de los siguientes, dando clic derecho y seleccionar "Copiar URL de imagen" y pegarla donde corresponde.
Además, si quieres que el botón se muestre en una parte específica de la imagen, puedes cambiar el atributo 'center' de var bs_pinButtonPos = "center"; por los siguientes:
topleft (lo posiciona arriba a la izquierda)
topright (lo posiciona arriba a la derecha)
bottomleft (lo posiciona abajo a la izquierda)
bottomright (lo posiciona abajo a la derecha)
Después de agregar el código, sólo da clic en 'Guardar Cambios' y tu botón para compartir en Pinterest quedará listo :D
Publicar un comentario