Pinterest Pin It Button On Image Hover

Pinterest Button On Image | Pin It Button Image | Pin It

Due to numerous requests from our readers, here we present yet another Pinterest pin it button widget for Blogger, a button that appears when you mouseover or hover an image inside your post.

Pinning an image just got easier and more intuitive with this button. First you decide which photo to pin, then hover it to invoke the pin it button, and finally click on the button that appears on the image.

Use the photo below as a live demo. Click on the button and see how the pinning works.

Below are some of the features of the Pin It button on hover widget:

• Auto pick up the correct post title and post URL. It doesn’t matter if you pin it from a post page or from a multi-post page (e.g. homepage).
• Auto fill in the pin description with the title of the post.
• Can opt to use your own button. Make your own bigger, cooler pin it button or you can get free Pinterest buttons here.
• [Added 21 Nov 2012] Select your preferred button position (relative to the hovered image) from five available positions.
• Cross-browser compatible -works on Firefox, Chrome and Internet Explorer (albeit in a slightly different manner) too.
• Should work on most Blogger templates. It doesn’t work on Dynamic Templates though.
• Less error prone since it only involves a few lines of code.

Let’s proceed with the tutorial,

1. Go to Template > Edit HTML > Proceed.
2. Locate the </body> tag near the bottom of your template HTML.
3. Copy the code below and insert it right above the tag.

<script>
//<![CDATA[
var  bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPZGK5RSNCyMqKO-zFILhW8GcMD50F0oxWiuDZgESrJ9BCuSpFqm_SzODyjdViq0G71rm26M7U_JHxqFrQcPd2OhUe8eZ5ULG8Z8BjXLLxFWYLcbafsXhDvXVKlsW-MiH_W1fdEpWM0g1/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
//]]>
</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'/>
<!-- please do not alter or remove the following code -->
<div id='bs_pinOnHover'><a href="http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html">Pin It button on image hover</a></div>

Code line 7 is for loading jQuery library. Remove this line if you’ve already loaded it somewhere else in your blog. Hint: If your blog has an image slider, carousel or something with fading effect running, chances are it is powered by jQuery. If this widget doesn’t work, the first thing you want to do is comment out or remove this line.
To use your own button, replace the URL in line 3 with the direct link URL to the image. Make sure to keep the quotes.
To reposition the button, replace center in line 4 with the new position as listed below:

topleft
topright
bottomleft
bottomright


Do not alter the code other than the URL and the position of the button.


Click Save, view your blog and start pinning.


Enjoy!