How To Add a Pinterest Hover Button To Blog Images

Sunday, August 25, 2013

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.

7 comments:

  1. Thank you for this! I've pinned to my blogging board. Julia :)

    ReplyDelete
  2. Enjoy the irresistible fusion of حليب الكراميل المملح in this delectable treat. Salted caramel milk offers a harmonious balance of sweet and savory flavors, creating a luxurious indulgence for your taste buds. Savor the richness of this delightful beverage for a moment of pure pleasure.

    ReplyDelete
  3. Temperature Controlled Deliveries - Texas offer reliable transportation for perishable goods, ensuring optimal conditions throughout transit. Equipped with advanced technology, these deliveries maintain precise temperature control to preserve product freshness and quality.

    ReplyDelete

Kristina J. Copyright 2014

Kristina J. DIY Ideas | DIY Style All rights reserved © Blog Milk Powered by Blogger