How to: Add Pin it Image to Blog!

a Rafflecopter giveaway

 Begin by saving this image to your computer. You can simply right click and “save as” to your computer.

Next, go to PicMonkey.com and upload a blank swatch of the background you want to use.  I went to a color swatch from my blog design and uploaded and cropped it on PicMonkey.com! It was super easy and simple, and I loved it because it matched my blog completely. You can also do this by checking your template colors and creating your own swatch, such as this one!

Here is the swatch I used to crop my perfect square!

After you upload it, and if needed crop it to the color you want, you need to crop it into a perfect square using the dimensions of 75 x 75. Then select “Frames” and “Rounded Corners”. I had the swatch on hand, but you can easily find your swatch online using the color # from your template design.

Next you need to Slide the “Corner Radius” level all the way to the right & click “Transparent Corners”.

This should give you a perfect solid circle.

After that, Go to “Overlays” & click “Your Own”.

Upload the “P” that you saved from above.

Use the color picker to choose what you would like your “P” to look like.  I used a completely white color so that I would have the utmost contrast fro my hover button.

Move and resize your “P” until you are satisfied, and then save the image as a .png on your computer. 

Here is what mine looks like:

Once you save it, upload it to the photo sharing website you use.  I use Photobucket but you can use whatever photo sharing software you prefer. I just find that Photobucket is super user friendly. 

Next (Almost done), go to your Blogger dashboard and click Template which should be along the left hand side of the screen.  Then click edit HTML. 

Locate the code” </body> “(it should be near the end of the code, Control + F if you can’t find it). As you can see in the picture below, I typed in </body> and hit enter to find where to paste the code. If you Control +F to find it, your computer will highlight the </body> like you see below.

Kaitlyn’s Script looked like this:

<script>
//<![CDATA[
var bs_pinButtonURL = “http://3.bp.blogspot.com/-HfUSaJfr7t4/UNVXY5qwP9I/AAAAAAAAHyA/amPXEMKhKJM/s1600/pinterest-icon+(2).png”;
var bs_pinButtonPos = “center”;
//]]>
</script>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js’ type=’text/javascript’/>
<script src=’http://lordhtml.opendrive.com/files/MV81OTY2MjE0X01Rcmg5/pin.js’ type=’text/javascript’/>
<!– please do not alter or remove the following code –>
<div id=’bs_pinOnHover’><a href=’http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html’>Pin It button on image hover</a></div>

So how do you like my new Hover Pin It Button?

Share this:

• Share

• Facebook
• Email
• Pinterest