MAPA DEL SITIO

GRACIAS A TU DONACION ESTA PAGINA PODRA SEGUIR FUNCIONANDO
Comentarios de Puntadas católicas
COMPARTE ESTA ENTRADA





SIGUENOS
Síguenos en TwitterSiguenos en FacebookSiguenos en Google+Siguenos en PicasaSiguenos en YouTubeSiguenos en BloggerSiguenos en Blogger


Botón de Pinterest superpuesto en cada imagen de tu blog


http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png

Veremos cómo añadir un código en tu plantilla de  HTML con el fin de mostrar el  Botón de Pinterest cuando el usuario pasa el raton por encima de las imágenes. al hacer clic, se iniciará el proceso de compartir la Foto

Para ver una demostración puedes hacerlo en http://mispuntadaspreferidas.blogspot.mx/2015/01/como-hacer-una-m.html solo tienes que pasar el ratón sobre cualquier imagen

Botón de Pinterest superpuesto en cada imagen de tu blog

Fragmento de código para tu plantilla:
Ve a la pestaña Plantilla
Haz clic en el botón Crear copia de seguridad/restablecer
Crea una copia de seguridad de tu plantilla actual
Una vez que tengas la copia, haz clic en el botón Edición de HTML
Usa la combinación de teclas Ctrl F o Ctrl B (en Mac ⌘F o ⌘B) para abrir el buscador
Busca </body> dentro de tu plantilla. Copia el siguiente 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 -->




  1. Pégalo (Ctrl V o bien ⌘V si usas Mac)  justo antes de la linea donde hemos encontrado 

  • Guarda tu plantilla y visualiza el blog usando el botón Ver blog situado en la parte superior del propio editor. Si quieres personalizar la posición y el icono de Pinterest, sigue leyendo.
  • Cambiar la posición/icono de Pinterest (Opcional)

    Cambiar la posición en la que aparece el icono de Pinterest sobre la imagen:

    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 siguiendo este paso.
    1. Vuelve al editor, justo al fragmento de código que hemos insertado
    2. Cambia la variable bs_pinButtonPos = "topright"; por:
      • topleft  (extremo superior izquierdo)
      • bottomleft (extremo inferior izquierdo)
      • bottomright (extremo inferior derecho)
      • topright (extremo superior derecho, por defecto)
      • center (centro)
    3. 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.

    Personaliza el icono de Pinterest

    Si lo deseas, también puedes cambiar el icono de Pinterest, para ello deberás proveer tu propio icono y publicarlo por ejemplo de Google Sites o en los Albumes Web de Picasa. Copia la URL de ese icono e indícala en la variable bs_pinButtonURL

    Tal vez te interese

    Related Posts Plugin for WordPress, Blogger...
    TRANSLATE


    EnglishcvFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

    Archivo del blog

    Entradas populares

    Seguidores

     
    Gadget de animacion Social - Widgets para Blogger

    [PR] 求む!タイピング初心者