Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

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 = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/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="http://2.bp.blogspot.com/-yvFnf33B75M/UQQpeeOFvpI/AAAAAAAADVo/SFOTUt10GwI/s1600/image.jpg" />

You might also like:
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!".

10 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. AWESOME -
    BUT I did not manage, on my blog ... ?
    I followed the instructions but the url. answer w a white screen after
    HOW COME
    ?D

    K.

    ReplyDelete
    Replies
    1. The pinning will not work if you enter a page with ''read more'' link, i.e if the url have #more at the end, you can enter your page with post title and see what happens next. But always allow your blog to load fully.

      Delete
  2. Hi, this isn't working on my blog... can you possibly help?

    ReplyDelete
  3. The code works perfectly, but I would love to move the Pin it button to the right top/bottom corner of the images, do you think that would be possible?
    Thanx a lot,
    Diana

    ReplyDelete
    Replies
    1. look for the following line in the code above

      var bs_pinButtonPos = "center";

      Edit center with any of the below value

      topright
      topleft
      bottomright
      bottomleft

      Delete
    2. Hi! It doesn't work on my tumblr blog. I followed the instruction carefully. Can you help?

      Delete
  4. How to hide Widget of our home page..? cricket news today i Have an issue about my site of cricket.you may also watch cricket live updates.

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger