How to add a Pinterest button to the photos on your blog

This is a tutorial to teach you how to add the Pinterest hover image like the one you get when you hover over this image.




*You may have to open up several tabs to do this.*

STEP 1: COPY THE FOLLOWING CODE

*I got this code from www.Bloggersentral.com*

<script> //<![CDATA[ var bs_pinButtonURL = "DIRECT IMAGE LINK"; var bs_pinButtonPos = "center"; var bs_pinPrefix = " "; var bs_pinSuffix = " "; //]]> </script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script> <script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'> // This Pinterest Hover Button is brought to you by bloggersentral.com. // Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details. // Feel free to use and share, but please keep this notice intact. </script>

STEP 2: FIND WHERE THE HTML CODE NEEDS TO GO

> Open a new tab.

> Navigate to your Blogger Dashboard, and Click on Template.

> Edit HTML

> Click anywhere inside of the code, and press Command + F if you're on a Mac or Control + F if you're on a PC. A small dialog box should appear in the upper right hand corner.

> Type </body> into that dialog box to find that particular piece of code.

> Paste the code right before the </body>

STEP 3: CUSTOMIZE IT!

> Your going to have to change the things I've highlighted in red in the code so it works.

1. DIRECT IMAGE LINK - this is the URL of the image you want. You can create your own and upload it into a hosting site like Photobucket just copy the Direct Link into the code. Or you can use one of the ones I've provided below.

http://i1026.photobucket.com/albums/y326/adurham6/pin_it_zpsb9b27003.png	http://i1026.photobucket.com/albums/y326/adurham6/pitit_zpsed5431bd.png	http://i1026.photobucket.com/albums/y326/adurham6/pinit2_zps5653dcf8.png

2. CENTER - this is where your button will hover over the image. You can change the position by to topleft, topright, bottomleft or bottomright.

*DO NOT DELETE THE QUOTES, YOU NEED THOSE!*

STEP 4: SAVE IT

> Be sure to save your template when you are done! If you have any questions, feel free to shoot be me email!