How To Make a Pinnable Button For Your Blog

For those of you who've been following along, you know that it's all thanks to Pinterest that I started this blog a little over a year ago, and because of that it only seems fitting that it's where I've been getting most of my traffic lately. Back when I first started, I not only didn't know very much about blogging and codes and promoting (and by "very much" I mean zip, zilch, nada), I had no clue how to make my own pins, or even why that would be important. 

Flash forward about eight months and Pinterest began taking over the world. Or at least the world of those who either like to cook, craft, paint their fingernails, braid their hair or read blogs. And it became increasingly important to include Pinterest with the other social media outlets for blog promotion. For those of you who don't promote your blog on Pinterest and might be overwhelmed just keeping up with your blog's facebook page, not to mention Twitter (which reminds me, I forgot to tweet - again - today), let me just say that over the past three months probably 70% of my traffic has come from Pinterest and the images I pin that take people right back to my blog. 

But how do you pin a blog post?

When your blog page is open, you can click the "Pin It" button in your toolbar (if you've installed it...and if not, you should. Here's how - click this link and follow the easy instructions). You'll be able to select one of many images you've used in your post (or that show up on your blog) that will take readers directly back to your blog. (I feel obligated to tell you to be careful to only pin images that you've taken or created or that you know are not copyrighted. Or don't and take the risk. Live on the edge.)  

But if you want to create a pin with text that contains the actual post title or with something that will catch the attention of all those people who are wasting spending time on Pinterest, you'll need to make it. 

It's really easy once you get the hang of it.

I use PicMonkey.

PicMonkey is a free site where you can do all sorts of fun things to your photos and create text images as well. For only $5 a month you can become a "Royale Member" which gives you access to a lot more fonts and effects. For as much as I use it, it's worth it to me, but there are still many good editing tools if you'd rather spend the $5 a month on one Venti Frappucino at Starbucks. 

I'm going to show you - step by step - how I make pinnable buttons for my blog posts like these -

If you want to read any of these posts, check the sidebar on the right. They're all listed under "Oldies but Goodies".

Step 1: Choose your background image

Occasionally I will use a photo image (as I did with the pile of Barbies up there) but usually I stick with a solid color. Once you become a PicMonkey pro you'll figure out how to overlay your own images right on top of your solid color, but for now lets just stick with the basics.

I simply Google image search the solid color I want to use. Once I've chosen one, I save the image into a folder. 

*Here's where it can get a little bit tricky. Since I'm not sure what images might be copyrighted, lately I've been making solid colors on a drawing app on my iPad and just importing and saving those. But for this tutorial, I'm showing you this easier way with Google. Do what you feel comfortable with.

Step 2: Open PicMonkey.com

Choose "Edit a Photo"

When the pop-up screen appears, find the image you saved of the solid color. 

Click it. 

Step 3: Resize

Because most of the images I save appear too small for me to add titles to (and for my old eyes to be able to actually SEE), I usually resize my image to 500x500. 

That's better. 

Step 4: Add background label

This is totally your call. If you scroll back up a bit and see my three samples, you'll notice that the one in the middle simply has text on the background color (yellow) while the other ones have the text on top of a label. If you want to be more simplistic (which I do from time to time), now is the time to go straight to the next step, "Adding text". If you chose to use a label, here's how you do it. 

Over on the left you'll see an icon with speech bubbles.

This is where you'll find a whole bunch of fun overlays including the labels you see above, arrows and symbols, paper scraps, buttons, cute animals and creature drawings, and many more. 

For this sample, I chose a Victorian label.

Once you click your choice, you can use the corner circles to size it how you think it looks best. 

To change the color of both the black background as well as the border, simply click the color box. If you'd like to match a color already in your image (as I did with the orange) just click the dropper and move to the color you'd like to match. 

Step 5: Adding text

Choose the "P" icon from the left menu bar.

Choose a text, then click the "Add Text" box above the text choices. (Very important.)

A text box will open over your image. 

Click in that box and type what you'd like.

Don't worry about placement yet. 

Step 6: Aligning your text

Once you've written the text, it's time to make it fit. 

I usually grab the corner circles &/or the side bars and drag to resize.

Sometimes you have to go back into the text box and make hard returns.

You can also highlight the entire text and use the slider button on the pop-up text box that says "Size". 

Play around with it.

You're smart. 

You'll figure it out. 

I also always add my blog name &/or URL in small font at the bottom. 

I'm not really sure why.

Step 7: Frame it Up

I like to add a frame to my button just to make it more noticeable. But that's your call. 

If you choose to add a frame, choose the frame icon (the square) from the left sidebar.

My go-to frame is "Simple Edge", but I also use "Craft Scissors" from time to time.

Decide which works best for your button. Some of the frames resize your image, so they're not that useful. 

You can adjust the thickness of the outer and inner frame as well as choose the colors. 

When you're all finished, click the "Save" button and save the file to your folder. It saves as an image that you can add to your blog post.

Step 8: Publishing and Posting

Once your blog post is published (with your fancy button somewhere in the post), open the POST URL (not the blog URL), and click the "Pin It" button from your toolbar (not a huge deal, it's just that you want the person to be directed to the specific post, not just the blog). One of the images that comes up should be your new button.

Click it, pin it, and sit back and watch the hits and repins come pouring in! 

That's it! You're done!

I hope this helped.

If not, I might attempt to make my first Quicktime movie with all the steps. 

I can't promise it will be easier to understand than this written tutorial, and the sound of my voice might make your dog bark, but I get that some people are more visual. 

I'll let you know. 

Here's another button! This one you can, and should, PUSH. Often.