¿Qué tal han ido estos días?
Ya voy en manga larga, soy súper friolera, me encanta que haga frío y no soporto el calor. Así que estoy súper feliz de que ya asome la nariz el frío.
Pero bueno, vamos a lo que vamos, que es un tutorial que me han pedido para poner el botoncito del Pin it.
¿Qué es eso? Bueno, pues es un botón que aparecerá automáticamente al pasar el ratón por encima de las fotos que tengáis en vuestro blog con el que al hacer click podremos pinear las imágenes.
Pinear, sí, llevarlas a nuestros tableros de Pinterest, esa red social de compartir imágenes bonitas o no bonitas, según se mire.
Bueno vamos al tema, ya sabéis que antes de tocar nada de la plantilla, tenemos que hacer una copia de seguridad, y os aconsejo que os leáis los Cursos 1 y 3 para saber qué es eso de la copia de seguridad, y etc..etc..
Vamos a nuestra página de administración de nuestro blog y hacemos click en Plantilla.
Luego Click en editar HTML.
Hacemos click en el código que nos sale una vez para que así, cuando apretemos Ctrl y F a la vez nos aparezca una cajita de búsqueda en la que pondremos:
</body>
Muy bien, ENCIMA de </body> pegamos esto:
<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-Aatklrn4Q4E/U_m-uuwDy0I/AAAAAAAAF2A/ZaoruG9Lf6E/s1600/pinit5.png";
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 src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'></script>
<div id='bs_pinOnHover'><a href="http://www.bloggersentral.com/">Blogging tips</a></div>
Muy bien, qué facilín, ya está ya lo tenéis.
Pero fijaros en las dos cositas que os he puesto en rosa.
La primera es una URL(dirección) es donde está alojada la imagencita del pinit, si la queremos cambiar solamente tendremos que subir nuestra imagen a un host (aquí explico cómo utiizar blogger como host de imágenes) copiar la URL de la imagen y ponerla en lugar de ésta que os doy yo en el código.
Luego el otro cachito en rosa, donde dice "center", con center os saldrá el botoncito en el medio absoluto de la imagen.
Si queréis cambiar la ubicación del botoncito pues tenéis que cambiar center por:
✿Topleft: arriba a la izquierda
✿Topright: arriba a la derecha
✿Bottomleft: abajo a la izquierda
✿Bottomright: abajo a la derecha
✿Center: en el centro
¿Vale? Es súper fácil.
Ya sabéis, para tenerlos, hacéis click derecho del ratón y Guardar imagen como...
Para obtener la URL (dirección) pues click derecho del ratón y:
✿ Guardar ruta de imagen.
O bien:
✿ Abrís la imagen en una pestaña nueva y copiáis la dirección.
Así de fácil.
Ya me contaréis si os ha ido bien.
Muah!