I’ve had a number of people ask me how to create or add the Pinterest hover to their site. Here is the much requested information as well as some pre-made hover images from me to you.
I can also make you a personalized image for your hover to better match your site’s theme by color, font, shape, pattern or transparency. Pricing is $10 and you can contact me at cdonnelly@geekowl.com.
Right click and save as for any image you want to use below. Do not direct link. Thank you.
 |  |  |  |
 |  |  |  |
 |  |  | |
 |  |  |
To use an image above replace the pinButtonURL image in the code below.
How to install the Pinterest hover image button:
- Blogger: Go to Template > Edit HTML.
- WordPress: Go to Administration > Appearance > Editor > footer.php.
- Locate the </body> tag near the bottom of the template. (Click within the code window and use ctrl+f for quick page search)
- Copy the code below and insert it right above the end body tag.
<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>
//<![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>
You can find the rest of the information about this Pinterest hover here at bloggersentral.com including how to hide the hover from certain images and change the location of the hover.
