26/11/14

Botón Pinterest sobre todas imágenes

Estoy segura de que habéis visto en otras páginas ( y en esta ) que al pasar el ratón sobre una imagen aparece el botón de Pinterest.
Para conseguir este efecto es muy fácil.

Primero ir a Plantilla y hacer copia de seguridad ( siempre es bueno respaldarnos )


Ahora vamos a Editar HTML


Pulsamos Crtl + F para buscar la línea que queremos:


Buscamos :

</body> 

Y pegamos justo antes ( podéis ver en la imagen ) el código.




El Código :


<!-- Botón de Pinterest superpuesto a cada imagen por cortesía de iniciaBlog.com --><!-- codigo origen: http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html -->    <script>//<![CDATA[var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";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><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><!-- Fin del código del botón de pinterest superpuesto en cada imagen del blog -->



Por defecto, el icono de Pinterest se muestra en el extremo superior derecho de la imagen, si quieres cambiar esta posición, debes cambiar el valor de la variable.
Vuelve al editor, justo al fragmento de código que hemos insertado
Cambia la variable "topright";  ( en el código os la dejo marcada en rosa )
  • topleft  (extremo superior izquierdo)
  • bottomleft (extremo inferior izquierdo)
  • bottomright (extremo inferior derecho)
  • topright (extremo superior derecho, por defecto)
  • center (centro)
También, se puede cambiar el icono de Pinterest. Donde está la variable - bs_pinButtonURL - cambiamos la dirección de la imagen. (marcada en verde )

Buscáis una imagen que os guste en Google imágenes y la subís a una web de alojamiento como por ejemplo:

Escogéis la dirección donde pone : Enlace directo para presentaciones
os dejo un ejemplo que podéis utilizar :

http://i61.tinypic.com/2dsemg9.png



Guarda tu plantilla y visualiza el blog usando el botón Ver blog situado en la parte superior del propio editor. De esta forma mantienes el editor abierto por si quieres incorporar alguno de los siguientes cambios.

No hay comentarios:

Publicar un comentario