Añadir el botón "pin it" en las imágenes de tu blog

Hola a tod@s!

El 12 de Marzo hay nueva misión de las chicas "blogueras motivadas". Esta vez han propuesto diseñar y publicar descargables de  botones pin it de Pinterest.

Seguro que habrá un montón de diseños bonitos disponibles para todos  y no podemos desaprovecharlos.

Así que  es evidente que lo primero que necesitaremos para hacer uso de ellos  es añadir el botón "pin it" en nuestro blog.

Para ello insertaremos el  código  necesario en la plantilla html del  blog.

Hoy nos centraremos en añadir el botón para dejarlo todo listo por si querés cambiar este botón  del tutorial por otros más personal. En unos dias ya hay muchos modelos disponibles, los descargáis y yo  os dejo indicado como se hace. Es muy sencillo.

TIPO DE BOTÓN DEL TUTORIAL

Para este tutorial he decidido que el botón  aparezca cuando pasemos el ratón por una imagen de nuestro artículo. (Lo puedes probar en este blog). Así el lector podrá pinear la imagen muy facilmente si así lo quiere y no será algo fijo en el blog.

La fuente del articulo ha sido el blog: blogger sentral

AÑADIR BOTÓN A NUESTRO BLOG

Para ello vamos a  editar nuestra plantilla en  "template-->edit html". Una vez en la plantilla  insertamos este código encima o dentro de  la etiqueta </body> ( como la que veis de color verde) y ya está. Muy sencillo!!

<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8NoSqh0isEmdROa2_ozDQhxncdxj-vESJIR5-qOv0T5n8JJLxtkf95uzT0ka5vAwzyhUV387N-8cEWTp-7ezOk2-Zun7EC26t5QG5dhM5nfvFs8klKRZPaGJoPbtdeZuahtj2X2krdko/s72-no/";
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'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>

</body>  <----- el código se pega  encima de esta línea.

Una vez guardados los cambios podréis observar que si pasáis el ratón por encima de una imagen de vuestros artículos, aparece un botón de "pin it".

PERSONALIZAR EL BOTÓN

Para personalizaar el botón, solo tendréis qeu poner la ruta a la imagen de  vuestro botón personalizado en el trozo de código de color rosa. Ahí véis que está la url a la imagen de la demo.

CONSEJO

Una vez insertado este botón está bien tener en cuenta el poner la dirección de vuestro blog en las imágenes para que quede referencia de donde vienen y os puedan localizar desde pinterest.

NOTA

El botón lo he quitado del blog temporalmente, así que ahora no lo veréis en funcionamiento. Cualquier duda sobre el tutorial me consultáis.

Así que ya véis, así de facil tenéis todas vuestras fotos listas para que la gente pueda pinear fácilmente el contenido.

Saludos y 

Nos vemos en el reto de  blogueras motivadas  para que os hagáis con un montón de diseños :)