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!)
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
- 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. 🙂
- 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.
- 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)
- 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:
If you are uploading your image to Photobucket, grab the “direct” link:
- 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!
- Click “Preview”. Make sure it looks perfect!
- 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.
- 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:
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. 🙂
DON’T MISS A THING!
Sign up for our newsletter to receive our FREE Home Organization Binder Printables + weekly updates filled with creative inspiration and exclusive freebies!