First of all, there are a couple of easy options for this process. Your first option is to visit the Widget Builder on Pinterest. If you click on the link, you should be directed to a page that looks like this:
To insert this mouse-over button, you simply choose the "Image Hover" option, and then click "Build it!"
At that point, you will need to go back to your Blogger homepage, and select the Template tab on your left-hand sidebar. Then choose the "Edit HTML" option.
Once in your HTML code, you need to insert the code Pinterest provided just above the closing </body> tag.
So this is all well and good, and if you like the basic, rectangular-shaped Pin it! button, then you are good to go! I, however, wanted this image for my mouse-over button...
This is where the tough part came in for me. So I want to make it really, really, really simple for anyone else who, like me, just has to have that cute little circular P as your mouse-over button.
Simply follow the same process as described above, except instead of using the HTML code provided by Pinterest, you will need to copy and paste the following code. Again, this code should be pasted just above the closing </body> tag in your HTML format.
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "topright";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
// 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.
Okay, now here's an extra tip for you. If you use this code, precisely as typed, then your mouse-over image will appear in the top right corner of each picture. If you aren't happy with that, and would like to change the location, you can easily do that by editing the code just a bit.
Look at the fifth line of the code above, and you will see "topright" at the end of the line. This is the portion of the code that designates the location of the mouse-over image. To change the location for your Pin it! button, you may replace "topright" with any of the following options:
Top Left Corner: "topleft"
Bottom Left Corner: "bottomleft"
Bottom Right Corner: "bottomright"
Center Alignment: "center"
That's all! I hope this is helpful for you! Happy blogging (and pinning)!