Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Agregar botón Pin It en cada imagen al hacer hover




Hoy he pensado en relatar está entrada porque quizá haya mucha gente que le interese instalar este artilugio en su blog, para que tus usuarios puedan hacer Pin It en cada imagen al hacer hover, el funcionamiento de este efecto es de lo más sencillo, al pasar el cursor por encima de una imagen, aparecerá un icono con el logotipo de Pinterest, para que tus lectores puedan pinear las imágenes de tu blog y compartirlas en está red social de moda. Para implantar este botón en cada imagen de tu blog, lo haremos de dos formas distintas, una será de forma manual y la otra forma, será de forma automática, así, de esta manera no tendrás que añadir manualmente el código html en cada entrada, para que se visualice. Para lograr lo mencionado, sigue las instrucciones que verás a continuación, vamos con la primera opción, está opción es la manual y lo debes de añadir antes de la etiqueta...



Demo!



</body>
<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.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 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.

// Feel free to use and share, but please keep this notice intact.
</script>
<script type="text/javascript">
var infolinks_pid = 1761875;
var infolinks_wsid = 0;
</script>

  1. Y cada vez que quieras usar el botón Pin It en cada imagen, deberás de insertar manualmente en cada entrada el siguiente código con la clase: class="pinimg": cómo ves más abajo.

<img class="pinimg" src="Añade-la Url-de-la-Imagen">


Agregar botón Pin It de forma automática


Ahora vayamos a la segunda opción que será completamente automática al hacer hover en cada imagen, no tendrás que añadir selectores en cada imagen, para añadir lo en Blogger, sigue estás instrucciones que verás a continuación, debajo, sigue las pautas, son sencillas:


  1. Ves a Blogger
  2. Plantilla
  3. Ahora busca la etiqueta </body> y antes de ella pega esto:

<script data-pin-hover='true' src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/>



Aizum Blog, domingo, junio 30, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9