Pinterest continues to be one of my top three referring sites. Usually the first right after Stumble Upon. I thought that since I am slowly making my blog more "professional" looking, one of the things that I'd like to put on it was a hovering "pin-it" button on my post images.
I read a couple of different tutorials (some which were easy, and others of which I had to undo), and thought I would share what I ultimately came up with.
First of all, you have to load a little bit of JavaScript to your page. The best way to do this is go directly to Pinterest and follow the directions there. You only have to load this on your page once (I suggest loading it in the <head> section.
1. Create a "pin-it" image using your favorite photo software. You can do this on Picmonkey, Photoshop or any other program you choose. Pinterest offers some free widgets, and you can also find them on Google. Make sure that you are using a free image, or that you have permission to use it!
2. Upload your image to your photo hosting software. I use Photobucket, but you can use Imgur too. You need to be able to retrieve the direct link to the photo.
3. On your Blogger account, go to the "Template" tab, and click on "Edit HTML". This will bring you to the HTML editor for your entire blog. Once you are in the HTML editor, search for the </body> tag. It should be almost at the bottom.
4. This is the best code I found, which is at BloggerSentral. Paste this code right above the </body> tag, making sure to substitute your image direct link.
-------------
<script>
//<![CDATA[
var bs_pinButtonURL = "YOUR 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>
---------------
-If you want your pin it button to appear somewhere other than the center of the image, you need to give another command where mine says "center" (topleft, topright, bottomleft, bottomright)
-This should allow only images in the body of your page to have "pin-it" buttons when you hover over the image. If there is an image that you don't want to have the button, simply include the command <div class=’nopin’> before you paste your image tag.
This is how my blog looks with my pin it button. This does take a little bit of time, but it is so nice to see the results in traffic. I hope this helps with your DIY blog makeovers! I am trying to put together a space that I am proud of, and want to pass along any information that I can.