Pinterest Pin It button on image hover

Copy the code down below and insert it proper higher than the tag.




  • Code line 7 9 is for loading jQuery library. Clear away this line if you’ve already loaded it somewhere else in your web site. Hint: If your web site has an graphic slider, carousel or a thing with fading effect operating, odds are it is powered by jQuery. If this widget doesn’t do the job, the 1st issue you want to do is remark out or eliminate this line.
  • To use your very own button, exchange the URL in line 3 with the direct connection URL to the graphic. Make sure to keep the offers.
  • To reposition the button, exchange heart in line 4 with the new placement as detailed down below:
    • topleft
    • topright
    • bottomleft
    • bottomright
  • [Added 22 Jan 2013] To block the button from showing on an graphic, assign “nopin” course to the graphic tag, like this:
    
    

    You can also block it from multiple images at once. Simply just wrap the graphic tags in a div tag and assign “nopin” course to the div, like so:

    Set Picture TAGS Right here
  • To add a prefix/suffix to the pin description, just add your text inside the offers, like so:
    var bs_pinSuffix = " by Blogger Sentral" 
  • Do not alter the code other than the URL and the placement of the button.

Leave a Reply

Your email address will not be published. Required fields are marked *