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:

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyblNEO1r-S0loPJDOGIgPQ-ql7Bz3jLLdQBZ6T4GaUH10oRt2ShfdyC_txXDsiu3BOTzxnhyphenhyphenfQHOb_hVDRvpNCKEGNU-k35D5ppLLmvkEi1Z9KD7l-uvTzj48IBh0P6P8p14vFZJdwTpi/s1600/85pinit.png"

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

 <script>

//<![CDATA[

var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyblNEO1r-S0loPJDOGIgPQ-ql7Bz3jLLdQBZ6T4GaUH10oRt2ShfdyC_txXDsiu3BOTzxnhyphenhyphenfQHOb_hVDRvpNCKEGNU-k35D5ppLLmvkEi1Z9KD7l-uvTzj48IBh0P6P8p14vFZJdwTpi/s1600/85pinit.png";

var pinit_button_position = "center";

var pinit_button_before = "";

var pinit_button_after = "";

//]]>

</script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script id='pinit-img-button' src='http://helplogger.googlecode.com/svn/trunk/pinterest-button1.js' type='text/javascript'> 

// Visit helplogger.blogspot.com for more widgets and tricks.

</script>

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

 <script>
//<![CDATA[
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyblNEO1r-S0loPJDOGIgPQ-ql7Bz3jLLdQBZ6T4GaUH10oRt2ShfdyC_txXDsiu3BOTzxnhyphenhyphenfQHOb_hVDRvpNCKEGNU-k35D5ppLLmvkEi1Z9KD7l-uvTzj48IBh0P6P8p14vFZJdwTpi/s1600/85pinit.png" ;
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='pinit-img-button' src='http://helplogger.googlecode.com/svn/trunk/pinterest-button1.js' type='text/javascript'> 
// Visit helplogger.blogspot.com for more widgets and tricks.
</script>

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