How To: Add a Hovering "Pin It" Button to Images

Hello everyone.  I am severely overdue for a DIY Blog Design post, so I'm throwing one out there today.  I thought I'd share one that can DRAMATICALLY improve your pageviews, and make it easier to share your photos.

You can see that if you hover over my photos, a little "Pin It" button pops up in the upper right hand corner.  If you click it, you can send my photos directly to Pinterest, which is AWESOME.  I've gotten so many more views from people doing this, so I'm going to show you an easy way to do this for your own blog.

STEP 1: You'll need the following piece of code, which I grabbed from the website HERE.  So if you have issues, take it up with them ;)



STEP 2:  
Go to your blogger template, then EDIT HTML.  Type 'Command-F' (for a Mac) or 'Ctrl-F' (for a PC) and search for this code:  </body>

STEP 3:
Insert the code ABOVE the </body> tag.

STEP 4:
Preview your changes to make sure your blog looks okay.  You won't actually see the PIN IT button pop up until you save and exit out of your template.

If all looks okay, SAVE.

CUSTOMIZATIONS:
USE YOUR OWN BUTTON-
This code will give you a generic PIN IT button.  If you'd like to use your own, replace the following code with the DIRECT LINK of your own image that you have uploaded to an image hosting site, like Photobucket.com [if you are unsure of how to do this, see past tutorials].

var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";

Replace the blue portion with your own image link.

CHANGE THE POSITION-
The code above will put the button in the top right hand corner.  To change the position,  change the following line:

var bs_pinButtonPos = "topright";
Replace the purple portion of this code to one of the following: 
  • topleft
  • center
  • bottomleft
  • bottom right

ENJOY!

0 comments:

Post a Comment