Friday, September 13, 2013

DIY: Step-by-step Tutorial for Creating a Mouse-Over Pin Button

I am so excited to finally have the mouse-over Pin it! button attached and functional on images here. This is a much greater accomplishment for me than you might realize. I know, it doesn't seem like that big of a deal, because everyone apparently has this installed on their blogs. I, however, have felt like the biggest dunce because everyone has it, and I could not figure out how to install the button on my blog. I hope the following post is helpful for those rare few bloggers out there who, like myself, need a little more information on installing the Pin it! button on their blog images. I wish someone had provided a step-by-step explanation like this for me. There may be a terrific one out there, but I couldn't find it. So I really hope this is helpful for you.

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:
They actually provide an easy code for the following mouse-over Pin it! button.

To insert this mouse-over button, you simply choose the "Image Hover" option, and then click "Build it!"
The next page will provide the HTML code you need to insert the image into your blog.

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.

<script>
//<![CDATA[
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 = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<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>

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)!