miércoles

Un botón “Pin it” diferente para tu blogger | #Pinterest


La historia de hoy

Hace unas semanas, una amiga me comentaba que estaba leyengo un blog de moda,  y que se sorprendió (Woww) al pasar el mouse por encima de una de sus imágenes y ver que aparecía en botón de Pinterest en el medio de la foto para así pinearlo. Ella (mi amiga) al ver esa opción, quedó con ganas de poder hacerlo en su blog... Yo, como curiosa perdida que soy; quedé intrigada y me lancé a investigar la mágia de ese botón, para así encontrar la manera de que mi amiga, tú y hasta yo; insertáramos ese botón “Pin it” diferente en blogger.

Así que dado con la fórmula, (porque lo verás al pasar el mouse por mis imágenes).. comparto los famosos pasos:

- Accede a tu blogger y ve la zona de “Plantilla”



- Ahora iremos a la zona del código del blog;  para ello, haz click en “Editar HTML”

Ok, aquí seguramente te invada la sensación MATRIX... pero Relax!  Será sencillo; solo te recomiendo antes, que realices una copia deseguridad de tu blog, en caso de que no hayas realizados modificaciones en el  HTML de la plantilla.



- ¿Listo? pues busquemos ahora  Body  en la plantilla; para ello hay dos opciones:

1.- Presiona  Ctrl + F  y te abrirá una ventana de búsqueda; ahí pegas Body (pero como te lo muestro en la imagen); y te indicará a la derecha cuántas veces consigue esa palabra en la página. Tienes que ir clickando en la flechas  para que te muestre dónde están en  la pantalla.



2.- Si te muestra cero resultado (como me pasó a mi).. tienes que ir viendo en la plantilla poco a poco hasta que consigas el necesario

... Es molestooooo!!! Pero valdrá la pena el tiempo. Si te sirve de algo; yo lo encontré en la línea 2298, a ver si igual lo encuentras ahí.



-  Ahora  ya encontrado,  vamos a copiar y pegar “tal cual” justo debajo del siguiente código:

<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. // 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>



Este código lo tomé del blog bloggersentral.com; que es uno de los poco que encontré con la información completa para poder agregar el botón de Pinterest.

- Ya pegado el código, ahora toca “Guardar” para que puedas ver los cambios en tu blog!.




¿Lo ves?... Pues ahora a publicar imágenes que tus lectores no puedan resistirse a Pinear.!!


Imagen: Pinterest

Blogging tips