How to: Add Pin it Image to Blog!

Hello Lovelies!

Before I start I want to make sure you all know about my current giveaway. So if you are interested in checking that out click here!

a Rafflecopter giveaway

I am left in utter shock in the aftermath of what has happened in Oklahoma this week. All I can do is extend prayers to all those involved in this horrific event and hope that their families get peace. I have been an emotional wreck this week do to many things going on. Things like this make me stop and realize what things are important in life to me and how I should cherish them.

Over You by Miranda Lambert on Grooveshark

So for a while now I have noticed Pin it Hover Buttons on a few bloggers’ page. Well I finally broke down and decided to attempt this. Well I will go ahead and say that it seems like anything on my blog is always a pain in the butt. One of my favorite bloggers, Kaitlyn, can attest to this! Well she did a tutorial on how to create a Pin it Hover Button for your blog, and I thought why not try it… let’s give this a go!

Well I followed each and every one of her steps. As expected I received a error message that said this “Pin It On Hover Button:Please restore the backlink” Well crap is what I thought, well yea you can imagine what was going through my mind.

So I got frustrated and kept trying this, and it never worked. So I google’d the error message and found this blog! I found that regardless of what I did I couldn’t get it to work. Well after reading a bit more about what could be wrong one this blog, I edited my template to reflect the changes. I can’t truly tell what exactly changed, but I regardless I used the new code and it worked.

So without further ado here is how I created and added a

Hovering Pin It Button to blogger template!

First you must created a custom Pin It button, you can use Kaitlyn’s instructions, or just keep reading!

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!

I cropped it to look like this!

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.

Paste the code below directly above </body> Make sure that you Do not add any extra lines between the end of the code and </body>. It will often slide </body> down a line and to the right, so make sure that it is lined back up to the left and directly below the new code.

Kaitlyn’s Script looked like this:

So here is how you customize the code! What you need to do is replace the highlighted text below with your direct link to the picture. If you find a pin it picture online that was already made you can use this the same way. If you created a custom pin it button, paste the direct link in the highlighted spot in the code. It is super important that you make sure to leave the quotation marks. If you take these out it will completely throw off the code.

So this is my code:

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>
</body>

Vola! Now you have COMPLETE directions for creating you own Hovering Pin It Button regardless of what template you have installed.

This seems very complicated, but it actually is not if you are familiar with template codes. I think this is the neatest way to personalize your blog. I am adding this to my services on my design tab. If you are not computer friendly and would like me to create this for you please email me! I am only charging a total of $5 for creation and installation. I hope you all enjoyed this tutorial and let me know if you have any questions!

Linking Up With: