Revista Moda

Tutorial: Boton "pin it" personalizado actualizado

Publicado el 04 julio 2016 por Alba @_NinaBonita_
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 personalizadoTutorial: Boton 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ñoPero 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 blogLo primero que tienes que hacer es una copia de seguridad de tu plantilla por si las moscas.Ahora haz lo siguiente:1. Vamos a plantilla2. Editar HTML3. 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óndonde queremos que aparezca dichobotó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 izquierdaY 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 jejejejeBesines y feliz semana.
Tutorial: Boton

Volver a la Portada de Logo Paperblog