Personalizar botones de Pinterest en Blogger

agosto 07, 2013



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


botón pinterest rosa palo botón pinterest verde menta botón pinterest azul cyan botón pinterest malva botón pinterest rojo rubi
botón pinterest negro botón pinterest melocotón botón pinterest negro y fucksia botón pinterest azul bebé botón pinterest fucksia
botón pinterest cyan y fucksia botón pinterest verde primavera botón pinterest amarillo limón botón pinterest malva y lima botón pinterest fucksia y cyan
botón pinterest fucksia y silver botón pinterest rosa palo y plata botón pinterest azul bebé y plata botón pinterest negro y silver botón pinterest negro y rojo rubí
botón pinterest naranja y melocotón botón pinterest verde menta y lima botón pinterest violeta y malva botón pinterest violeta y verde botón pinterest rosa bebé y gris


Diseño Blonda Sencilla


botón pinterest blonda purpura y gris botón pinterest blonda rosa bebé y gris botón pinterest blonda azul bebé y gris botón pinterest blonda verde menta y gris botón pinterest blonda violeta y gris
botón pinterest blonda negro y rojo rubí botón pinterest blonda negro y fucksia botón pinterest blonda negro y verde primavera botón pinterest blonda rosa palo y gris botón pinterest blonda rosa palo y azul bebé
botón pinterest blonda azul bebé y gris botón pinterest blonda azul bebé y rosa palo botón pinterest blonda melocotón botón pinterest blonda verde menta botón pinterest blonda fucksia y negro
botón pinterest blonda fucksia y verde primavera botón pinterest blonda violeta y verde primavera botón pinterest blonda naranja botón pinterest blonda verde menta y plata botón pinterest blonda rosa fuerte y gris


Diseño Blonda Compleja



botón pinterest blonda original malva botón pinterest blonda original rosa fuerte botón pinterest blonda original gris plata botón pinterest blonda original azul bebé botón pinterest blonda original melocotón
botón pinterest blonda original azul bebé botón pinterest blonda original rosa palo botón pinterest blonda original rojo rubí botón pinterest blonda original verde menta botón pinterest blonda original negro
botón pinterest blonda original fucksia y negro botón pinterest blonda original malva y negro botón pinterest blonda original rojo rubí y negro botón pinterest blonda original rosa palo y azul bebé botón pinterest blonda original silver y azul bebé
botón pinterest blonda original silver y rosa palo botón pinterest blonda original silver y verde menta botón pinterest blonda original amarillo y naranja botón pinterest blonda original naranja y melocotón botón pinterest blonda original verde menta y verde primavera



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 -->

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 ♥






Te encantará:

5 pensamientos ¡falta el tuyo! ;)

  1. Genial Celia!!! Gracias por enseñarnos cosas tan guays! Ya lo he instalado!!! un besazo muy grande!!!

    ResponderEliminar
    Respuestas
    1. ¡¡Me alegra mucho saber que te ha sido útil!!

      Besos y feliz tarde de miercoles ;)

      Eliminar
  2. Si en vista html, en cada entrada, después de img pones class="nopin" ¿sigue apareciéndote el icono de Pinterest? Yo lo quito de esta manera en las fotografías en las que no quiero que aparezca

    ResponderEliminar
    Respuestas
    1. ¡¡Gracias, Lourdes!! Tengo que probarlo ;)

      ¡Feliz finde!

      Eliminar
  3. Muchísimas gracias por compartirlo... desde que me hice pinterest es una de las cosas que tengo pendientes, poner el botoncito en las fotos... aunque no recomiendan ponerlo en todas por el formato... pero probaré lo que dice Lourdes a ver si funciona ;p
    Muchos besos ♥

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.