Somewhat Simple

How to Make a Blog Button – The Free and Easiest Way!

Comment

As an Amazon Associate I earn from qualifying purchases.

A simple tutorial on how to make a blog button, the free and easiest way! 

I had a ton of emails and comments after I posted the tutorial on how to resize a button with people asking me to teach them exactly how to make a blog button. If you have the same question as my other readers, you are in LUCK! Today I am going to show you the EASIEST way to get it done! (This will literally take you 2 minutes!)

If you’re wondering what a blog button looks like, here is what we are talking about – 

It’s an image with a text box under it that allows your readers to copy that code and place your image on their site. (A great way to support another blog!) 

When I first wrote this tutorial back in 2010, there was a lot to learn in order to get a blog button displayed properly on your site. There was code you needed to copy over exactly, links you needed to change and numbers you needed to adjust for the proper sizing. But all of that has completely gone out the window because technology is amazing! I’ve updated this information with the EASIEST method annnnnd it also happens to be FREE!! (You can start doing a happy dance right now if you’d like. I’ll wait…) 🙂

How to Make a Blog Button

YOU WILL NEED: 

  • an image
  • a website

…that it! 

DIRECTIONS: 

  1. Choose an Image. You can use an image you already have, or you can make your own using a photo editing site, like PicMonkey.com. Make sure the image is the size you want it to be. For some reason, 125 x 125 pixels seems to be the most popular blog size. I don’t know who wrote that rule, but most bloggers have a button that is that size. 🙂
  2. Host your Photo. This simply means you need to make your image available online. If you have a WordPress blog, upload your image to your media library. If you blog on blogger, open a free Photobucket account and upload your image there.
  3. Go to MyCoolRealm.com. Follow the prompts.
    Enter your site name, copy and past your site link (usually your homepage), and then copy and paste the link to your photo. (Details in step 4)
  4. Grab the Photo Code/ Link. Take a look at the images below to see exactly what link you need to grab. (Note: You “grab” the code by clicking on it to highlight it, then right click on your mouse and click “copy”.)
    If you are uploading your image to your WP blog, you’ll need to grab this link:button code wp
    If you are uploading your image to Photobucket, grab the “direct” link:button code pb
  5. Customize the Code Box. Next, you’re going to choose the options for the text box that will show up directly under your photo. This is pretty self-explanatory and is completely up to you and your preference!
  6. Click “Preview”. Make sure it looks perfect!
  7. Click “Get Code”. A pop up box will come up from the footer with a long piece of code that looks like a foreign language! Copy that entire code and come back to your site.
  8. Add the button to your sidebar: If you are on WP, you’ll want to open a Text Widget and drag it to your sidebar. If you are on blogger, you’ll want to open an HTML Gadget and place it in your sidebar. Paste the code in the box, then click “save”. Here is what the WP and Blogger versions look like:

button widget

Once you have it saved, cross your fingers and hope that it worked!!!

HOW TO MAKE A BLOG BUTTON – IMPORTANT TIP:

If you are on WP and you are trying to add these codes to a blog post LIKE THIS ONE HERE, you MUST keep your post composition screen on the “text” view and not the “visual” view. For some reason when you copy and paste this code in the visual view it doesn’t work. 🙂

. . . . 

I sure hope this helps all of you!

Leave me a comment with any other questions you might have. 🙂

Leave a Reply

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

What type of comment do you have?

Comments

  • Nerline wrote:
    • Stephanie wrote:
  • Emma wrote:
    • Steph from Somewhat Simple wrote:
  • Jessica @ Mom 4 Real wrote:
    • Steph from Somewhat Simple wrote:
  • Anabella wrote:
  • Cath wrote:
  • Yanet @ 3 Sun Kissed Boys wrote:
  • Jaime wrote:
  • Lady Baillio wrote:
  • jenjen wrote:
  • Remodelaholic wrote:
  • Kathryn wrote:
  • creativejewishmom.com wrote:
  • Twice Remembered wrote:
  • Andy Porter wrote:
  • Lori wrote:
  • Time Worn Style wrote:
  • Adrianna wrote:
  • Leigh of Bloggeritaville wrote:
  • happyhodgepodgehome wrote:
  • jennifer wrote:
  • Tracey wrote:
  • Erin wrote:
  • Sarah wrote:
  • Kimm at Reinvented wrote:
  • jennifer wrote:
  • this blessed nest wrote:
  • Adventures in Dressmaking wrote:
  • jenjen wrote:
  • Laurie Turk wrote:
  • Julie wrote:
  • The Thriftress wrote:
  • tales from an oc cottage wrote:
  • Hattie wrote:
  • Mimi wrote:
  • InMyOwnStyle wrote:
  • Kim wrote:
  • Jamee wrote:
  • Simple. Inspired. Homemade wrote:
  • Tasha wrote:
  • Sonja @ Craft-Werk wrote:
  • Dawn wrote: