How To Add a Pinterest Hover Button to Blog Images by Kristina

Tuesday, September 10, 2013
If your DIY or fashion blog relies heavily on images and you want more blog content pinned to Pinterest, it's a great perk to have a Pinterest hover button directly on your images. This eliminates the annoyance of clicking through the toolbar and scrolling through all the images to find the specific image you want to pin. The hover button only pops up when you place the mouse over an image which cuts down on all the PIN IT distractions. I added this feature to Kristina J. a couple weeks ago and have gotten great feedback on the convenience it brings to pinning. 

I used the tutorial from BloggerSentral. Here are some of my notes..
  • Keep in mind, the line numbers on the left of the code are not to be copied. They are only there for your instruction and to make sense of the code. 
  • To replace your own pretty image with the stock photo you've downloaded, insert the new direct URL inside the quotes in line three.
  • I also deleted lines 7-9 from my code since I don't have anything on the blog that used jQuery widget.

  • You don't have individual PIN IT buttons to the side of each image.
  • It makes pinning much more convenient than using the toolbar.
  • You can pin images by clicking on them, much like you do inside Pinterest
  • You can replace the stock Pinterest button with a more attractive download that suits your blog.
  • It doesn't work on iPhones.
  • You have to understand a smidgen of HTML.

Happy pinning!

This post is sponsored by GroopDealz. They have some great (and affordable) stuff on their site!! I especially love their fan fringe necklace in turquoise. It's only $10 so might as well get all the colors. ;)


  1. Thanks for the tip! Loving the collar on this shirt!


  2. Useful. Good Job.I work with and am usually very stingy about giving out complements ;)