Wednesday, May 13, 2015

Make Your Own Customized Hovering Pin It Button

I wanted my own customized Pin It button to match my font and color. So I fetched code from another site. But it has their Pin It button code, not my customized one. I'll explain what to do about that. First, let's make a Pin It Button of our very own.  

First I went to Picmonkey, went to Overlays, and chose a round circle. Theirs is black, so I put my own orange color, which is #F98F45. You just erase their code next to the color box, and put yours in. 

By no means does yours have to be round or anything like mine, I might add. It can be anything you want.

I then opened Design in Picmonkey. Make sure you click Transparent for your Canvas. This is where you're going to bring your shape for your button. Then you will go to Fonts and choose a font. Then you will crop fairly closely around your Pin It Button.

You will then go to Resize. I believe my button is 85 px.

Here it is again...

Save. I save mine to my Desktop. Usually in the Save box, I would put something like 85PinIt, so I'd know what to fetch from my Desktop when I'm ready for it.

Then I went to a New Page in Blogger, and typed My Pin It Button HTML in the post title, so I'd have a permanent place for my HTML code. You're never going to publish this. It's just there for safekeeping. Says the woman who accidentally published a very private post in 2011, and the rest is, shall we say, history. 

Anyway, once you have your empty new page in Blogger, click Image, just like when you add a photo to your page. Then fetch your customized Pin It Button. 

Now, where it says: Compose, on the far left, right next to it is HTML. Click HTML. Your Pin It Button will disappear for the moment (though you're going to save it, and you will then see the gibberish that is HTML.) 

Then you will have the code for your Pin It Button.

This is how I figured out how to host my own images, which I put in an earlier post on this blog. Look in Tips & Tricks.

However, I found that the HTML I fetched from my Pin It Button had more code than I needed. 

So I looked at the code I copied below from another hovering Pin It tutorial and found where their src started, and patched what I needed in.

I simply erased some of their code and replaced it with mine. Here's mine:

This is my code for the customized Pin It Button, where I only erased and inserted what you see highlighted below.

var custom_pinit_button = "";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
<script src='' type='text/javascript'/>
<script id='pinit-img-button' src='' type='text/javascript'> 
// Visit for more widgets and tricks.

This is Helpblogger's HTML for a Pin It Button.

var custom_pinit_button = "" ;
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
<script src='' type='text/javascript'></script>
<script id='pinit-img-button' src='' type='text/javascript'> 
// Visit for more widgets and tricks.

You will then go to the Edit HTML portion of your blog, which is 

right next to Customize when you click on Design. For some 

reason, my words now are being formatted like Helpblogger's, so 

I'm having to add a space in between sentences, so that words are 

not partly covering other words. A mere technicality. I don't want

to stop and fuss with it.

Copy your code. You will be taking it for a short ride.

You will click on an empty space in your HTML page, and then 

click CTRL and F. Now you have an empty box in which to type  

</body>. This is where you will be putting the code. Just above

</body>, paste the code you have saved. Then hit Save.


I don't know if I've explained this well. Someone try it and get back to me please. You simply use the code I fetched from Helpblogger, and inserted my own button source, and used my own image I created.

If you don't understand, send me an email and I'll try to clarify.

That's it!

Enter your email address:

Delivered by FeedBurner
Follow on Bloglovin
follow us in feedly

1 comment:

  1. You have always been so helpful with tutorials, but I am stumped with this one! I just tried this and it was a major fail for me. I started with Picmonkey and chose a daisy in overlays. I just picked one of their colors as I have no idea how to change colors using a code (where do you find the code for colors?). I don't know how you went to Design in Picmonkey after you started with Overlay...Design is on the opening page of Picmonkey so you would lose what you had in Overlay. So I started with Design first, then went into Overlay. Then on to resizing...there were two boxes for measurements...didn't see where you could put in px? So I just left it as is.

    Then when I got to the HTML stuff...yowza! lol

    You first talked about erasing their html code and putting in your own. But you didn't say what part of their html code you erased and where you put in your code. And where did you get your code - is that the one everyone else should use? So I decided to go with the Helpblogger's code that you posted. Got to where you said "click on an empty space in your html code." Where? Anywhere there's a line break/one space in between the code? I assumed so, so that's what I did. And I pressed CTRL and F - and there was nothing. No empty box. I was afraid to play around with it anymore - html scares me! So I backed out. I don't know if I have the patience to fool around with this again, but I just thought I'd let you know my experience. :-)