Botón Pin it: ¡Incluyelo en tu blog!

¡Buenos días mamis!

Como ya sabéis, MumSlowCreative te ayuda a que ¡tu sentido de creatividad y cualidades de madre inquieta y emprendedora no se duerman!. Así que si eres una mamá bloguera, esto es para ti.

Hace un tiempo os comenté cómo sacarle partido a Pinterest, y uno de los tips era no olvidarse de tener tu botón de pin. ¡Pero mejor sería tener uno propio!

Si no utilizas la opción que te da Pinterest, puedes crear tu propio pin (o descargarte uno que te guste) e instalarlo en tu blog ¿como se hace? Eso aprenderás hoy: Cómo instalar un botón de pin en tu blog para que aparezca en todas las imágenes:


Hay un blog muy bueno que se llama RyleeBlake donde ella explica cómo hacerlo. Así que lo que he preparado es parte de traducción, más con lo que yo he hecho con MumSlowCreative. Está de más decir que primero deberás tener creada una cuenta en Pinterest para que el botón PIN tenga su uso, que es que tus seguidores lleguen a tus tableros de Pinterest y puedan seguirte por esa vía.

Paso 1


**Antes de hacer cualquier cosa en tu blog (en edición HTML), SIEMPRE has una copia de seguridad: Plantilla/Crear/restablecer copia de seguridad/Descargar. Tendrás el código de tu blog escrito en HTML y CSS; es un archivo con extensión .xml. Así, si tienes cualquier problema de configuración modificando tu archivo, simplemente vuelve a cargar esta plantilla: Plantilla/Crear/restablecer copia de seguridad/Seleccionar archivo 

Una vez que hayas escogido la imagen que deseas utilizar como pin, como siempre primero debes tenerla alojada en algún servidor. Personalmente me gusta utilizar Google Sites para todos los documentos como pdf o iconos que necesito tener alojados para luego subirlos al blog.

Cuando hayas subido la imagen, debes copia la url de la imagen (botón derecho "copiar dirección de enlace").

Paso 2
Ahora debes ir a tu blog/Plantilla/Edición HTLM  y busca la etiqueta </body>. Pega justo arriba lo siguiente:

<script>
//<![CDATA[
var bs_pinButtonURL = "dirección de tu URL";
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 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 ryleeblakeblogspot.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>

Ahora pega la dirección URL de tu imagen donde dice "dirección de tu URL". Y si quieres puedes modificar dónde colocar la imagen (botón pin). Yo lo tengo en el centro, pero puedes cambiarlo por la siguiente opción:

topleft
topright
bottomleft
bottomright

Mira esta imagen del programa del blog de MumSlowCreative como ejemplo:

Dónde incluir un botón de pin en HTML

¡Y listo! Si actualizas tu página, verás que cuando pones el ratón sobre una imagen aparece el "botón de pin" que has instalado, y si pinchas te llevará a tus tableros de Pinterest.

Además el blog de RyleeBlake te ofrece tres diseños propios. ¡Y añado 3 más!



Sólo guarda la imagen, súbela a Google Sites y obtén su url. Edición de tu blog en HTML y ya está instalado.

Y eso es todo por hoy. ¡Espero que hay sido de utilidad!
Besotes.



2 comentarios:

  1. Pues leyéndolo otra vez el post, he incluido un par de cosillas a tener en cuenta!!
    Espero que te salga!, sino me avisas.
    bss

    ResponderEliminar

Blogger templates

 

Google Friend

Datos personales