How To Add a Pinterest Hover Button To Blog Images

If you place your mouse over any images on Kristina J. you'll see a small Pinterest hover button show up in the top right corner. I added this feature a couple weeks ago and have gotten great feedback on the convenience it brings to pinning. Since HTML can be really frustrating, I wanted to share the tutorial I used to insert the hover button to the images in Blogger. 

If your DIY or fashion blog relies more heavily on images than words and you want more blog content to be pinned to Pinterest. Readers are commenting less and pinning more, so it's a great perk for if you 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 used this HTML tutorial from BloggerSentral.  

Changes I made to the BloggerSentral code

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.

Pros:
--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.

Cons:
--It doesn't work on iphones.
--You have to understand a smidgen of HTML.