Show Pinterest Pin it Button On Images On Mouse Hover

If you are thinking of using Pinterest effectively for your business, then consider applying this awesome hack to your blog images. Pinning image will now get more easier for you and your readers after applying this hack. The pin it icon will appear on mouse hover and it works on most browsers like Firefox, Internet explorer, Google chrome. But it doesn't work in dynamic view, mobile template and when you enter your blog page using read more link.
On mouse hover the Pinterest pin it icon will appear on your images as shown in the screenshot below.

In our previous post we also shared a tutorial on how to disable right click on blog images which might also be of an interest to you.

How To Add Pinterest Pin it Button To Images

• Go to Template > Edit HTML > Proceed
• Use ctrl F to find </body> and paste the following code above/before </body>

<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvLLP1zy4rEyeSkVXqb-etQj6Y2m9-_5v4-stWUGVLcsel_PMbo0rK7r0_6pF00cu1wrEhCA1FzKNjn8sUwPyYYBOv5tj9JGcdCe4llXity_ZpmX_E2DaRcKQteZogGq7TSqJSbrdtwvQ8/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>
<script src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'></script>
<!-- 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>

• Save your template.

How to block the button on a particular image?

If you wish to block the image from appearing on a particular image, simply assign nopin class to the image tag in your post editor after switching to HTML mode. See the example below.

<img class="nopin" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNt7_G-FT5q_jet_Ydvto9CK984YsJ-hkKUgUX6Fx2dY7hCv2O9q9W8uVEiyd1qa3xM0LvJx4Aztb6zj_Tq1nnBXq6ZokSuLbC7Htl2CS2-4mlgg-CqFMPimCthCMkNz-m8sdySpEkYMYD/s1600/image.jpg" />

You might also like:

• Add zoom effect effect to your blog images on mouse hover
• Disable right click context menu on your blog images
• How to add spinning or rotating effect to your blog images

Hope you found this useful? Take few seconds to share it.
Happy Pinning!

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz