Tutorial: Boton "pin it" personalizado actualizado

by - julio 04, 2016

Hola! hola!!!

Hoy vengo a enseñarte un tutorial para personalizar tu blog, se trata del código html para poner el boton "pin it" pero personalizado.
Si tu ya lo tenias puesto en el blog te habrás dado cuenta que desde hace tiempo ya no funciona, ya no te aparece la imagen que tenias puesta y no te deja pinear las fotos :( y eso se debe a que el javascript dejo de funcionar. Por lo visto el código estaba en un servidor que cerro y este es el motivo por el que ya no va. Solo necesitamos cambiar ese código y ya!! y aquí te lo enseño.
Pero aclaro que el código no es mio, no soy tan lista en esto del html jejejeje, lo he modificado gracias a BloggerSentral

*************************

Como instalar el botón "pin it" de pinterest personalizado en tu blog

Lo primero que tienes que hacer es una copia de seguridad de tu plantilla por si las moscas.

Ahora haz lo siguiente:

1. Vamos a plantilla
2. Editar HTML
3. Buscamos </body> y justo encima pegamos el siguiente codigo

<!-- Inicio - Botón Pin it -->
<script>
//<![CDATA[
var bs_pinButtonURL = "URL donde está la imagen";
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 id='bs_pinOnHover' src='https://dl.dropbox.com/s/jyzhf51ccqf7t9b/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 - Botón Pin it -->

Ahora solo nos queda modificar las cosas que están en color azul y verde. Una es la url de donde tenemos alojada la imagen que queremos poner como botón y la otra es la posición donde queremos que aparezca dicho botón.


Tal cual esta nos aparecerá en la parte superior derecha, si quieres cambiarla aquí te dejo el resto de posiciones:
* center: centro de la imagen
* topleft: arriba a la izquierda
* bottomright: abajo a la derecha
* bottomleft: abajo a la izquierda

Y si ya tenias el botón instalado con el código anterior solo has de cambiar lo que aparece subrayado en color amarillo. Copia esa url y sustitúyela por la que esta en el tuyo y listo!!! volverá a funcionarte como antes ;)

Guardamos plantilla y listo!!!!


*************************

Llevaba un par de meses buscando este código como una loca, desde que me di cuenta que el botón dejo de funcionar y nada... que no encontraba nada!!
He llegado a soñar con el por que me parecía increíble que hace cosa de poco mas de un año todos los blogs compartiesen el código para personalizarlo y ahora, que dejo de funcionar nadie, absolutamente nadie!, pusiese la actualización. Y buscando... buscando... por fin di con el de BloggerSentral, que ha resultado ser el mismo que hizo el código inicial, y por fin esta solucionado!!!!

Espero que te sirva de ayuda, que seguro que si!! por que si tenias el antiguo te dejo de funcionar de igual manera que a mi y tendrás que arreglarlo jejejeje y si no lo tenias, y quieres ponerlo, el otro no te servirá así que... aquí lo tienes.

Si lo usas coméntame si te ha servido y de ser así por favor compártelo para que pueda llegar a todo el mundo y puedan cambiarlo, y no acaben como yo medio charupas de tanto buscar la solución jejejeje

Besines y feliz semana.

19 comentarios

  1. Muchisimas gracias por el codigo y por esta explicación tan genial!!

    ResponderEliminar
    Respuestas
    1. De nada guapo!!! Espero que te haya servido de ayuda ;)

      Besines

      Eliminar
  2. muchas gracias por compartirlo, a mi también me agobio el tema, y tenia pensado preguntarle al compi... pero en la ofi tenemos bastante apuro, y no lo había hecho aún... saludines

    ResponderEliminar
    Respuestas
    1. De nada, que menos!!!! Si, yo desde que me di cuenta estaba en un sin vivir... y hasta que di con el madre mía, dos meses llevo detrás de el jejejeje Pero todo solucionado, ahora todo el mundo a cambiarlo

      Besines

      Eliminar
  3. Un millón de gracias!!!
    Tal y como dices...me he vuelto loca hasta encontrarte por casualidad y, gracias a tus buenísima explicaciones poder solucionarlo.
    Un abrazo.

    ResponderEliminar
    Respuestas
    1. que bien!!!! me alegra que ya lo hayas solucionado y haber podido servirte de ayuda :)

      Besines

      Eliminar
  4. MUchas gracias Alba…ya me parecia raro que no funcionara…pensaba que habia sido yo ..
    ya lohe modificado. ahora voy a ver esas sopitas…
    Buen finde guapa!!
    besos

    ResponderEliminar
    Respuestas
    1. De nada!!! me alegra que te haya servido de ayuda ;)
      Espero que te gusten las sopis ^^

      Besines

      Eliminar
  5. Genial...funciona!!! Muchas gracias por compartir. Bikos

    ResponderEliminar
    Respuestas
    1. Por cierto, me quedo siguiéndote desde ya, es que tienes un blog súper interesante, me encanta.

      Eliminar
    2. Me alegro haberte servido de ayuda guapi!!! Era un fastidio que ya no saliese la foto verdad? y lo peor que nadie pudiese pinear tus fotos :(
      Genial, bienvenida!!!!

      Besines

      Eliminar
  6. Muy bien pero se me han quedado los dos, el que acabo de poner y el feo en rojo de "guardar" que sale por defecto. Cómo lo quito? Mil gracias

    ResponderEliminar
    Respuestas
    1. Me alegra que te haya servido Patty!! Pues el rojo ese que me comentas se instala en el explorador, así que lo que tienes que hacer es desinstalarlo y listo!! Pero ese solo se te ve a ti ;)

      Besines

      Eliminar
  7. Hola de nuevo niña bonita...recurro a ti que seguro que lo sabes :-)
    parece que no funciona otra vez el botón...creo entender que hay una actualización, pero me veo muy torpe para entender la explicación.
    Si tu puedes hacer algo, de antemano te doy las gracias.
    Un saludo

    ResponderEliminar
    Respuestas
    1. Hola guapi!!! Si, me di cuenta el miércoles :(, no se por que no funcionara esta vez, estoy un poco out y no me he enterado de nada, voy a echar un ojo y a ver si veo algo del código. Si veo algo no te preocupes que edito ;)

      Besines

      Eliminar
    2. Gracias Alba...seguro que das con ello a la primera.
      Muaks

      Eliminar
    3. Gracias por confiar tanto en mi ^^ en cuanto pueda os digo algo.

      Besines

      Eliminar
  8. a mi no me ha funcionado, y lo he intentado varias veces T.T

    ResponderEliminar
    Respuestas
    1. Ya Tuttila... desde hace unas semanas ha dejado de funcionar otra vez y no tengo ni idea de por que ha sido. He estado buscando la solución y no doy con ella sorry! pero sigo en ello a ver si en breve lo encuentro ;)

      Besines

      Eliminar

Dime lo que quieras, me encanta leerte ^^