Revista En Femenino

Cómo colocar un botón para pinear en las imágenes de un blog

Publicado el 13 diciembre 2013 por Bebloggera @bebloggera
Por @EVDani desde Chile

Les traigo un fácil tutorial que quise compartir con nuestros lectores, consiste en agregar el botón "pin it" de Piterest, en las fotografías de sus blogs.El tener un botón integrado en las fotografías de sus sitios, favorece y facilita mucho el compartimiento del contenido en la plataforma Pinterest, de esta forma los lectores pueden pinear la foto de las entradas, pasando el cursor sobre las fotografías, para luego darle clic al botón y pinearlas. De esta manera muy simple se puedes optimiza el alcance de los posts en ésta, y en otras plataformas (cuando un pin es compartido también en Facebook o Twitter).

Cómo colocar un botón para pinear en las imágenes de un blog

Este tutorial es muy simple, solo se tiene que agregar un pequeño código a la plantilla del blog. A continuación, les diré cómo hacerlo.Paso 1: Primero deben ir a la parte de plantilla de HTML de su blog, donde se encuentra el código.Paso 2: Buscan utilizando "Ctrl + F" el código </body>, si no lo encuentran, prueben con body solamente.Paso 3: Antes del código </body>, peguen el siguiente código.

<script>
//<![CDATA[
var bs_pinButtonURL = "http://4.bp.blogspot.com/-uOr-R4LTCwg/UqQMGLSBp9I/AAAAAAAACHU/IBjvEpHw0ik/s1600/boton-pinteres.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 src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'/>
<div id='bs_pinOnHover'><a href='http://www.bloggersentral.com/'>Blogging tips</a></div>

Paso 4: Verifiquen con vista previa si está todo bien, si es así, entonces guarden los cambios y estará listo.

Ahora las fotos de las entradas del blog aparecerá el siguiente botón al pasar el cursor, tal cual como pueden ver en éste blog.


Cómo colocar un botón para pinear en las imágenes de un blog

Pueden colocar otro botón si desean, solo tienen que reemplazar la dirección URL que se encuentra en rojo en el código, por el de la imagen personalizada que quieran.

Espero les gustara este tutorial.L@s invito a que lo compartan vía Twitter, Facebook o Pinteres, y que nos recomienden si les gusto.
Cómo colocar un botón para pinear en las imágenes de un blog
Nos vemos pronto en otro tutorial. 

    

Volver a la Portada de Logo Paperblog