How To: Create A Blog Button

Recently I was helping a fellow Project Dream International member get her new WordPress set up and the JetPack Image widget was nowhere to be found!  Well, that’s a bit of a problem when you’re trying to teach a complete newbie how to add simple buttons to their sidebars!  Instead I walked her through how to create a bit of code to get those buttons up on her blog.  And well, why not share that bit of know-how with all of you, too?

So, here we go, how to make a blog button:

First of all, if you are a completely new blogger, you might be wondering what the heck a button is and why you need one.  Well, buttons are quite versatile and relatively easy to create once you get the hang of it.  The most common buttons are ones that you can share with other blogs, people can “grab” your button (or, more appropriately, the code for your button) and add it to their site, linking back to yours. Buttons are also great for internal links and other external links.  It’s more visually appealing than a simple text link.

So a button is an image that you click on that acts as a link.  Pretty simple, right?

Obviously, the first thing you need is an image.  Sometimes you’ll be working with a ready-made image; other times, you’ll be creating one from scratch.  My favorite place to create buttons is PicMonkey.  Yes, I have Photoshop, but PicMoney is just so quick and easy to use, that I often head there first.

You just go to the site, upload your picture and use the tools to tweak it.  You can crop, resize, edit, embellish with tons of neat add-ons, you name it, you can do it.  Here’s a peek at what I created over there this morning:

The important part about creating the button is to make sure it’s the correct size.  The button I made is 250 pixels by 150 pixels, but the common size for most buttons is 125 x 125.  I tend to make my larger if they are just going in my sidebar rather than being shared with other bloggers.  Larger buttons are great to create a link to an affiliate platform, brand partner, or popular series that you have done.

Once you’ve created your button, save it some place you’ll remember. 

Next you’re going to upload the image to your site.  The directions I’m sharing are for self-hosted WordPress sites.  If you’re on something else, you should be able to use PhotoBucket or something similar for this part.

On your WP dashboard, go to Media –> Add New and upload the image you want to use for you button.

When the file is uploaded successfully, click “edit.”

Double-check your image size while you’re in here and copy the File URL on the right.  (Note: You do NOT want the permalink or the link in your toolbar.  ONLY the File URL in the box on the right will work in later steps!).  If you made any changes while on this page to the title, description or any of that, be sure to hit Update before you leave the page.

Now we’re going to actually go create the widget!  Go to Appearance –> Widgets on the right hand menu.

Then you’re going to select the Text widget.  In some dashboards you will have the Add spot to click on, in others you will need to click and drag the widget over to the sidebar you want it in.

This is where you will actually be creating and entering the HTML for your button.  The Title box creates the header for your widget.  If you don’t want a header, simply leave it blank.  And then in the body, we’ll enter some really simple code.

Now for the code:

<a href=”Where You Want the Link to Go“><img src=”Your Image URL“></a>

So in my case, it turned out like this:

<a href=”https://bigfamilyminimalist.com/work-with-Dani/“><img src=”https://bigfamilyminimalist.com/wp-content/uploads/2013/05/Work-with-Dani-250×150.jpg“></a>

Make sure you leave the quotation marks and only replace the colourful parts in-between.  If your button doesn’t work the first time, you may need to delete and retype the quotation marks.

Also, I added <center> to the beginning of my code and </center> to the end of my code to make the button centered in the widget.

Below the text widget box, you’ll see a place to select where on your site you want the widget and below that a Save button.  Once you’ve done those two things, head on over to your site and check out your new button!  (Don’t forget to click on it and make sure the link is working properly!)

Join me next week when I’ll be posting about how to create a “Grab A Button” box for your blog!  And if you have any questions about this tutorial please feel free to ask!

Linked Up At: The Fun In Functional!, We Like to Learn As We Go, Adorned From Above