• Home
  • About
    • Copyright Policies
  • Contact
  • Printables
  • Podcast
  • Shop
    • Email
    • Facebook
    • Instagram
    • Pinterest
    • Twitter
    • YouTube

Big Family Minimalist

Chasing the New American Dream

  • Family Life
    • Finances
    • Homeschooling
    • In the Kitchen
  • Media
  • Minimalism
  • Sports
  • Travel
    • Michigan Love

Most Popular Working From Home

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?

How to Create a Blog Button | DaniSchnakenberg.com

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:

PicMonkey Button Tutorial | DaniSchnakenberg.com

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. icon wink How To: Create A Blog Button

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.

How to Create a Blog Button | DaniSchnakenberg.com

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

How to Create a Blog Button | DaniSchnakenberg.com

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.

How to Create a Blog Button | DaniSchnakenberg.com

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

How to Create a Blog Button | DaniSchnakenberg.com

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.

How to Create a Blog Button | DaniSchnakenberg.com

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.

How to Create a Blog Button | DaniSchnakenberg.com

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

Share this:

  • Facebook
  • Pinterest
  • Twitter
  • Email
  • Print

Related


2 Comments

About Dani Schnakenberg

Dani is an entrepreneur and homeschool mom of 5. When she's not neck-deep in homeschooling or managing her businesses, Dani enjoys traveling and studying herbs.

« {Simplify Your Life} Project 14
It Works! Review »

Comments

  1. shane says

    August 23, 2013 at 11:11 am

    Pinning this great tutorial to help newbie bloggers, thanks! 🙂

    Reply
  2. Camille L says

    August 23, 2013 at 11:46 am

    Great tutorial..wanna do this soon on my blog..
    Thank you!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2021 · Big Family Minimalist by Cooper Leigh Creative, LLC · Privacy Policy

Copyright © 2021 · Divine Theme on Genesis Framework · WordPress · Log in

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.