SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

17 sept. 2014

Pon el botoncito de Pin It en las imágenes de tu blog

¿Qué tal han ido estos días?
Ya voy en manga larga, soy súper friolera, me encanta que haga frío y no soporto el calor. Así que estoy súper feliz de que ya asome la nariz el frío.

Pero bueno, vamos a lo que vamos, que es un tutorial que me han pedido para poner el botoncito del Pin it.

¿Qué es eso? Bueno, pues es un botón que aparecerá automáticamente al pasar el ratón por encima de las fotos que tengáis en vuestro blog con el que al hacer click podremos pinear las imágenes.

Pinear, sí, llevarlas a nuestros tableros de Pinterest, esa red social de compartir imágenes bonitas o no bonitas, según se mire.


Bueno vamos al tema, ya sabéis que antes de tocar nada de la plantilla, tenemos que hacer una copia de seguridad, y os aconsejo que os leáis los Cursos 1 y 3 para saber qué es eso de la copia de seguridad, y etc..etc..

Vamos a nuestra página de administración de nuestro blog y hacemos click en Plantilla.
Luego Click en editar HTML.
Hacemos click en el código que nos sale una vez para que así, cuando apretemos Ctrl y F a la vez nos aparezca una cajita de búsqueda en la que pondremos:

</body>

Muy bien, ENCIMA de </body> pegamos esto:

<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-Aatklrn4Q4E/U_m-uuwDy0I/AAAAAAAAF2A/ZaoruG9Lf6E/s1600/pinit5.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 src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'></script>
<div id='bs_pinOnHover'><a href="http://www.bloggersentral.com/">Blogging tips</a></div>

Muy bien, qué facilín, ya está ya lo tenéis.
Pero fijaros en las dos cositas que os he puesto en rosa.

La primera es una URL(dirección) es donde está alojada la imagencita del pinit, si la queremos cambiar solamente tendremos que subir nuestra imagen a un host (aquí explico cómo utiizar blogger como host de imágenes) copiar la URL de la imagen y ponerla en lugar de ésta que os doy yo en el código.

Luego el otro cachito en rosa, donde dice "center", con center os saldrá el botoncito en el medio absoluto de la imagen.
Si queréis cambiar la ubicación del botoncito pues tenéis que cambiar center por:

Topleft: arriba a la izquierda
Topright: arriba a la derecha
Bottomleft: abajo a la izquierda
Bottomright: abajo a la derecha
Center: en el centro

¿Vale? Es súper fácil.
Ahora os dejo los seis típicos botoncitos de Pin it:


Ya sabéis, para tenerlos, hacéis click derecho del ratón y Guardar imagen como...
Para obtener la URL (dirección) pues click derecho del ratón y:
Guardar ruta de imagen.
O bien: 
Abrís la imagen en una pestaña nueva y copiáis la dirección.

Así de fácil.
Ya me contaréis si os ha ido bien.
Muah!

Lireth's Notebook

15 comentarios:

  1. Wouuu, no sabes el tiempo que llevaba queriendo poner el botoncito de pinterest en el blog. ¡Mil gracias Lireth!

    ResponderEliminar
  2. Un tutorial muy práctico!
    Yo lo puse hace tiempo, pero si tuviera que ponerlo otra vez no me acordaría de como. Me guardo tu tuto por si las moscas :)
    besos

    ResponderEliminar
  3. Muchas gracias !!. Petons.

    ResponderEliminar
  4. hecho Lireth, muchassss graciassss :-)

    ResponderEliminar
  5. Ayyy te puedes creer que desde que te pregunté por este tutorial aún no he tenido tiempo de ponerlo!!! Pero prometo ponerlo antes de... fin de año... espero.

    Gracias

    ResponderEliminar
  6. Muchas gracias Lireth!! Ya lo he puesto en marcha!!
    Un abrazo
    Nauzet

    ResponderEliminar
  7. Muchas gracias Lireth! era lo que estaba buscando hace un tiempo atrás <3 <3
    Gracias!!!!

    ResponderEliminar
  8. Te lo curras mucho con estos tutoriales ^^ bueno,con los tutoriales,con los cursos,las link party y todo todito!!

    ResponderEliminar
  9. Muchísimas gracias. La verdad es que yo ya lo tenía, pero hace poco noté de casualidad que no me aparecía la imagen de "pin it". Aun no había tenido tiempo de verlo, pero gracias a tu tutorial ya está arreglado y no tarde nada.

    ResponderEliminar
  10. Ha sido muy útil, ya tengo añadido en mi blog... Solo una cosa... Y no se puede añadir mas botones de estos, al lado de botón interest? Como podría hacerlo?

    ResponderEliminar
  11. Gracias por el tutorial!!
    Un saludo

    ResponderEliminar
  12. Qué buen tuto!!!
    Yo ya he puesto los botones de pinear en mi blog. Te dejo la url, por si quieres pasarte: www.conbedebonito.blogspot.com
    Gracias!!!

    ResponderEliminar
  13. Qué de cosas nos enseñas siempre, este post en particular me viene muy bien, porque siempre he querido saberlo y nadie lo había explicado taaaan bien. Besos!

    ResponderEliminar
  14. Algo debo hacer mal, porque mira que lo he intentado veces y no me sale.... ¿alguna sugerencia? jejeje
    Gracias

    ResponderEliminar
  15. Gracias!!! vi mil tutoriales más o menos jaja y el tuyo fue el único que dio resultado!!! =) Besos

    ResponderEliminar