Tutorial: Boton "pin it" personalizado actualizado

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.

Fuente: este post proviene de Niña Bonita, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

¡Hola! ¡¡hola!! Vigésimo segundo día del calendario de adviento y hoy la invitada es Carolina que nos trae el imprimible de una carta para los Reyes Magos que es una preciosura y un imprescindible pa ...

¡Hola! ¡¡hola!! Vigésimo primer día del calendario de adviento y hoy la invitada es Leticia que nos trae el DIY para hacer una corona de Navidad que es perfecta para poner en la puerta de casa o en c ...

¡Hola! ¡¡hola!! Vigésimo día del calendario de adviento y hoy la invitada es Nuria que nos trae el DIY para hacer un bastidor navideño decorado con una bola de nieve que es una autentica cocada ¡Te d ...

¡Hola! ¡¡hola!! Décimo noveno día del calendario de adviento y hoy la invitada es María José que nos trae la receta para hacer una trenza rellena de crema de turrón que te aseguro es puro vicio ¡Te de ...

Recomendamos

Relacionado

como hacer un blog

Hola gente linda, Hoy vamos aprender a bloquear el botón derecho del ratón, para que nadie nos copie nuestros articulos o si deciden hacerlo que se les convierta en lidioso ese proceso, bueno empezamos para hacer esta operación vamos a ir a editar plantilla y buscamos </body> y antes de body pegamos el siguiente código: <script> // Inhabilitar el botón derech ...

general social

Poner botones para redes sociales con los que tus usuarios puedan seguirte te ayudará a incrementar la presencia de tus contenidos en Internet. Si bien muchas veces preferimos utilizar botones al final de nuestra entradas para que nuestros usuarios compartan si lo desean nuestras entradas, es importante también que puedan seguirnos por las redes sociales si así lo desean. Qué mejor sitio para que ...

Tutoriales Redes Sociales Web

Que feliz que me hace regresar al blog. Como algunos de ustedes saben, me fui de vacaciones, y regreso supercontenta, Mexico tiene lugares hermosos, llenos de historia y cultura, pero bueno esa es otra historia. Hoy vengo con un tutorial, que ya buena falta hacia por aquí en el blog. Este va a petición de mi amiga Marysol, que me ha pedido un tutorial para cambiar esos botones sociales para compar ...

Videos y tutoriales

ALT Attributes. ¿Qué es el atributo ALT? Si eres creador de contenido, seguro que en algún momento has oído hablar sobre el atributo ALT. Y, muy probablemente, te habrás preguntado qué es el atributo ALT y para qué sirve. Pues bien, hoy te traemos la respuesta. El atributo ALT es parte del estándar HTML. Se utiliza para especificar textos alternativos en las imágenes que se incluyen en páginas web ...

Videos y tutoriales

ALT Attributes. ¿Qué es el atributo ALT? Si eres creador de contenido, seguro que en algún momento has oído hablar sobre el atributo ALT. Y, muy probablemente, te habrás preguntado qué es el atributo ALT y para qué sirve. Pues bien, hoy te traemos la respuesta. El atributo ALT es parte del estándar HTML. Se utiliza para especificar textos alternativos en las imágenes que se incluyen en páginas web ...