Personalizar botones de Pinterest en Blogger

Pinterest. Parece que en EEUU está en alza, de hecho, si echáis un vistazo a la entrada sobre el cambio en el algoritmo de Google, veréis que va por delante de Twitter en la importancia que da Google a las redes sociales. Yo, la verdad, que no lo uso tanto como debería, es decir, que no hago "vida social" en esta Red , me limito a compartir los imprimibles y clip arts que diseño y subo al Blog. Aunque, sinceramente, sí que me han llegado muchas visitas desde ahí.

Así que, aunque ya hablamos de como añadir el botón de Pinterest al Blog, he estado diseñando unos botoncitos monísimos para personalizar el botón predeterminado de Pinterest. Y he incluido un mini-tutorial explicativo sobre como instalarlos en cada una de las fotos de Blogger, para facilitar a nuestros lectores la tarea de compartir (pinear) en sus tableros.

Os dejo con la selección de botones, que podéis descargar directamente desde aquí, botón derecho del ratón ---> guardar como.

¡¡Hay para todos los gustos!! En formato .GIF con fondo transparente para que no pierdan calidad y podáis usarlos sobre cualquier fondo del color que sea.

Diseño Círculos Sencillos

Diseño Blonda Sencilla

Diseño Blonda Compleja

Instalarlo de manera individual en cada fotografía es muy sencillo.

Como Instalar el Botón de Pinterest en cada una de nuestras fotografías

1.- Subimos nuestro botón a una web de almacenamiento en la nube. Podéis usar dropbox tal y como vimos en esta entrada.

2.- Este es el código que vamos a usar:

<!-- Botón de Pinterest superpuesto a cada imagen por cortesía de iniciaBlog.com --> <!-- codigo origen: http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html -->     <script> //<![CDATA[ var bs_pinButtonURL = "URL DE NUESTRO BOTÓN"; var bs_pinButtonPos = "topright"; 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> <!-- Fin del código del botón de pinterest superpuesto en cada imagen del blog -->

Fuente: Bloggersentral

3.- Para añadirlo, vamos a Plantilla --> Editar HTML.

4.- Pinchamos en cualquier punto de nuestra plantilla y pulsamos simultáneamente Ctrl + F, se abrirá el buscador interno de Blogger.

5.- Buscamos: </body>

6.- Justo antes de </body>, pegamos nuestro código y añadimos la URL de nuestra imagen donde os lo he puesto en color rojo.

7.- Comprobamos en Vista Previa que no hay ningún error y guardamos los cambios.

A partir de ahora, en todas nuestras fotografías, aparecerá nuestro Botón de Pinterest. Podemos cambiarlo de lugar cambiando el topright por:

♥ center : en el centro
♥ topleft : arriba a la izquierda
♥ bottomleft : abajo a la izquierda
♥ bottomright : abajo a la derecha

Yo lo puse hace unos días en mis fotografías y la verdad es que de momento estoy encantada. La única pega que he encontrado es ésta:

Estos son los botones que subí en la entrada sobre Google Reader, como podéis ver, el botón de compartir en Pinterest aparece superpuesto encima de cada uno de ellos, ya que son imágenes, pero yo personalmente no le veo mayor problema.














Un fuerte abrazo,

Celia ♥

---

Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥