A sweet winter: Tutorial poner botones "Pin it" + dos modelos de botones

Tutorial poner botones "Pin it" + dos modelos de botones

jueves, 25 de septiembre de 2014

¡Holaaaaaa!

¿Qué tal estáis llevando la rutina? Yo aún no he empezado, empiezo el miércoles que viene pero sé que la voy a llevar muy mal. Me he malacostumbrado en verano a acostarme tarde y levantarme a las 10 y el cambio va a ser tremendo pero espero adaptarme pronto. El sorteo está ya a puntito de lanzarse y es que Marina y yo estamos terminando de preparar todo. Prontito prontito tendréis nuevas noticias.
Antes de nada quería preguntaros ¿qué tal véis que haga un tutorial de la página Canva? Es muy parecida a Picmonkey aunque yo prefiero la primera. Entonces podría ir subiendo tutoriales de cosillas que podemos hacer con la página. Ya hice uno de moodboard, si queréis verlo pinchad aquí.
Bueno bueno continuamos con pinterest. Hoy toca un tutorial de cómo instalar los botones de "pin it" en las imágenes por si no sabéis hacerlo. Yo he utilizado el siguiente tutorial, me ha salido bien y no es nada complicado así que estad atentos.

1. Nos vamos a "Plantilla" y luego a "editar HTML". Cuando esté la plantilla en HTML primero y muy muy importante hacemos una copia de ella por si acaso.

2. Ya hecha la copia de la plantilla, pulsamos "Ctrl" + F y en el cuadro de búsqueda ponemos </body>. 

3. Cuando lo hayamos localizado arriba introducimos el siguiente código:

<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='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/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>

4. Ya copiado el código, sustituimos la parte que está en azul por el enlace de nuestra url de la imagen. Recomiendo subir la foto a photobucket

5. La parte que está marcada en naranja es para indicar donde aparecerá nuestro pin. Ahora mismo está en la esquina superior derecha (como lo tengo yo en mi blog) pero podéis cambiarlo sustituyéndolo por uno de estos códigos:
♥ center (en el centro de la imagen)
♥ topleft (en la esquina superior izquiera de la imagen)
♥ bottomleft (en la esquina inferior izquierda de la imagen)
♥ bottomright (en la esquina inferior derecha de la imagen)

6. Guardamos la plantilla y ya saldrán nuestro icono de "pin it" en las imágenes. Pero... saldrá en todas así que hay un truco que gracias a Miss Lavanda descubrí y me salvó la vida. Cuando no queramos que una imagen tenga el icono, en la edición de HTML cuando estamos escribiendo la entrada colocamos este código: class='nopin' justo después de <img .
Un ejemplo para entenderlo:

<a href="URL de la redirección de la imagen" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img class='nopin' border="0" class="nopin" src="URL de la imagen" height="52" width="320" /></a>

¿Qué os ha parecido? A mí me ha resultado bastante útil ambos tutoriales y los dos gracias a Laura. Si queréis consultar el tutorial de cómo poner el botón, pincha aquí y si quieres ver el de cómo quitarlo, pincha aquí. Además tiene más modelos de botones por si queréis echarle el ojillo. 
¡Ah! Hablando de modelos, yo tengo dos modelos más por si los otros (que podéis ver aquí) no os convencen del todo:

Para descargarlos pinchad en el botón "descargar":


¿Qué os ha parecido? Yo tengo que agradecerle mucho a Laura por los tutoriales tan útiles que tiene en su blog. Así que espero que a vosotros también os hayan ayudado estos dos tutoriales. Eso sí, de mañana no pasa que publique la entrada de "el Proyecto de la A a la Z".




5 comentarios:

  1. genial! gracias!

    www.iregumy.blogspot.com

    ResponderEliminar
  2. que monos!! yo ya tengo unos puestos en el blog, pero cuando me canse pongo estos!! los pineo para que no se me pasen ;) y asi tambien tengo el tutorial a mano!

    un besito y feliz finde!!!

    miventanafavorita.blogspot.com

    ResponderEliminar
    Respuestas
    1. Que interesante, aunque yo cuando hay que tocar lo de los códigos me arrugo un poquito, jiji
      Besote!!!

      Eliminar
    2. Muchas gracias Marta!!! Cuando los pongas le echaré el ojillo para ver como quedan :)

      Ah! Ayla, a principio puede costar pero luego se le coge el truco y es todo muy fácil :)

      Eliminar

Tu comentario me ayuda a mejorar el blog además de que me hace muy muy feliz saber tu opinión así que ¡anímate y comenta!