Hi there! I get lots of questions about how to make money blogging so let's cut to the chase, shall we? Go now...

How to Make a Blog Button

May 21, 2010 311 Comments

Answering more reader questions today…

Many people have asked me how to make their own blog button. This is the mother of all blog button tutorials (well, at least it felt that way when making it!!). Stick with me.

Update: Before you embark on your blog button-making journey, I highly recommend you read my two blog button tips. These are two things I learned when making my own blog button.

This time I'm going to show you how to make a 125px by 125px blog button like this (ahem…pardon my ugly, thrown-together button):

BloggingWithAmy.com

Once you do, you might want others to be able to grab your button and put it on their own site, in which case you'll need a grab box along with your button like this:

How to make a blog button.

A visitor would simply copy the code in the grab box, paste it into their own site and your button would show up there!

In order to do it you need to:

  1. Create an image 125px by 125px (which will be the button itself).
  2. Upload your image to your server.
  3. Create the code others will copy & paste to grab your button.
  4. Display your button & grab box on your own site (ready to be grabbed by others).

1. Create an image 125px by 125px (2 options)

Blog buttons are typically 125px by 125px square. To create your button, you can use either an existing image as your base, or you can start one from scratch.

Option A: To use a photo or existing image as your blog button base:

You are going to use the very same technique I showed you in How to Watermark a Photo. I'll post the video again in case you missed it. The only difference is, instead of resizing your image to 16×16 pixels square, you're going to resize it to 125×125 pixels square.

Can't see the video? Watch it here.

Here are the steps (video notes):

  1. Go to Picnik.com.
  2. Upload your photo.
  3. Crop your image into a perfect square. (It doesn't matter what size it is at this point as long as it's the same number of pixels wide by the same number of pixels high.)
  4. Once it's cropped, resize your image to 125px by 125px.
  5. Add text, effects, stickers, etc. to embellish your button as you like.
  6. Save it.
  7. Done!

Option B: To use a blank canvas as your blog button base:

If you want a button with a solid-colored background as a base, you could employ the trick I showed you in How to Make and Install a Favicon (above). That is, find a photo with a good swatch of color you can isolate to use as your solid-color background. Once your background is set, you'd follow steps 3-6 above to add your text, etc.

OR

You could also use an application like Gimp (which requires a bit more design knowledge but is free). In this case you would open a new canvas, 125px wide by 125px high and then add text and maybe an illustration or two (iStockphoto is a popular site where you can purchase illustrations).

Now you've got your image.

2. Upload your image to your server

Follow the instructions in How to Access Your File Manager or How to Use FTP to upload your image to your server. (Aren't you glad we learned how to access our server? It definitely comes in handy!)

Take note of the location of your image. It doesn't matter a whole lot where your image is stored, as long as you know where it is. To make it easy, I would install it in my "root" (first level of my blog files). This is what it looks like (click to view larger):

How to install a blog button

If you do upload your button image here, the location of your image will look something like this:

http://YourDomain.com/ButtonImageName.jpg

3. Create the code others will copy & paste to grab your button

The basic code one will copy and paste to get your button to show up on their site looks like this (you will replace the bold with your own URLs):

<a href="YourSiteURL"><img src="YourButtonImageURL" /></a>

The <a href="…"></a>" portion is your hyperlink and is the page you want someone to land on when they click your button (most likely your home page).  Make sure you don't forget the closing tag (</a>) at the end!

The <img src="…"> identifies where the image is located so a browser (i.e. Firefox, Safari, Chrome, Internet Explorer…but I know you're not using Internet Explorer, right??) knows where to find it in order to display it.

So, for example, if I was going to put a button on my site (and I uploaded it to my root directory), my code would look like this (ignore the line break):

<a href="http://bloggingwithamy.com"><img src="http://bloggingwithamy.com/button.jpg" /></a>

<a href="http://bloggingwithamy.com"></a> (i.e. BloggingWithAmy.com) is where they land when they click on my button, which the computer reads like this: <img src="http://bloggingwithamy.com/button.jpg" / >

Make sense?

4. Display your button & grab box on your site (ready to be grabbed by others)

Let's put your button and a grab box in your sidebar for others to grab. You'll do this by pasting the below code in a text widget.

To get to your widgets from your Dashboard, go to Appearance–>Widgets. Click & drag the "Text" widget into your sidebar (your sidebar options may differ from mine in this photo):

How to install your blog button

The text widget should automatically pop open for you once you drag it into the sidebar; if it doesn't click the little down arrow on the right side of it. At this point you're ready to paste your code (below).

(By the way, if you want a refresher course on placing widgets into your site, check out How to Use WordPress Widgets.)

Here's the code you will paste into your text widget. It consists of two parts:

  1. Your image.
  2. The grab box.

Highlight and copy the entire next paragraph into your text widget. You will obviously replace the bold parts with your own code:

<img src="YourButtonImageURL" alt="YourSiteTitle" /><div style="width: 123px; height: 125px; overflow: auto; border: 1px solid #666666;">&lt;a href=&#34;YourSiteURL&#34; target=&#34;_blank&#34;&gt;&lt;img src=&#34;YourButtonImageURL&#34; alt=&#34;YourSiteTitle&#34; width=&#34;125&#34; height=&#34;125&#34; /&gt;&lt;/a&gt;</div>

So, for example, this is what mine would like:

<img src="http://bloggingwithamy.com/button.jpg" alt="BloggingWithAmy.com" /><div style="width: 123px; height: 125px; overflow: auto; border: 1px solid #666666;">&lt;a href=&#34;http://bloggingwithamy.com&#34; target=&#34;_blank&#34;&gt;&lt;img src=&#34;http://bloggingwithamy.com/button.jpg&#34; alt=&#34;BloggingWithAmy.com&#34; width=&#34;125&#34; height=&#34;125&#34; /&gt;&lt;/a&gt;</div>

Important Sub-Step: Make all code above HTML-friendly by changing the quotes!

In a nutshell, if you just copy the code above and paste it into a widget, it won't work. Why? Because there are these things called "smart quotes" which mess everything up. (Feel free to google if you'd like. I'll spare you the details.)

The bottom line is, it's a bit of pain, but this is how I recommend making your code HTML-friendly:

  1. So you copied the above code.
  2. You pasted it into a text widget (as described at the beginning of Step 4).
  3. Now, once you've pasted it in your widget, very carefully delete every quote (") and re-type it. There are 6 total. I suggest doing them one at a time and in order. Be sure not to add any spaces or extra characters in the process.
  4. Save your widget.
  5. Your image and text box should appear. If not, delete the code, re-copy it and paste it into a text widget and try changing the quotes once again. (It's easy to make a mistake.) (If it still doesn't work, it's probably all my fault. :) )

Once it's in your sidebar, people can simply copy all the code in the grab box, paste it into their site and your button will show up!

Did you like this tutorial? There are a whole lot more of those 'round here! You might also like:

Here are even more of my quick tips.

This post is part of Works for Me Wednesday.

Print FriendlyPrint Friendly

Comments

  1. Heather :
    November 26, 2011 at 9:42 am

    for the not so html friendly girl- this is great. One question though- is there anyway to make the image cetered on my bar?

    Reply
    • Amy :
      November 28, 2011 at 2:02 pm

      Surround the whole blog of code in that widget with this goes at the beginning. and goes at the end of the block. See if that works. (You can take out all the spaces.)

      Reply
      • Michelle @ Changed By The Maker :
        December 1, 2011 at 4:01 pm

        I'm interested in centering as well, but it seems like there must be something missing from the reply that you gave to Heather.

        Reply
        • Darlene :
          December 15, 2011 at 12:09 am

          Great tutorial, Amy! I have the same question as Michelle: I figured out how to make the widget with the grab-it code underneath but it is on my blog post on the left-side instead of centered. If I try to highlight and center the widget, the jpg moves to the center of the post but the grab-it box containing the code stays left-aligned. Any idea how to fix this?

          Reply
  2. {K} :
    November 27, 2011 at 4:36 pm

    A great tutorial! Your instructions worked perfectly for me and I just shared a link to your post. Thank you for sharing! :)

    Reply
  3. Stocki :
    November 28, 2011 at 2:16 pm

    Thank you so much! I never thought I would be able to do it…but I think I have! Just waiting for someone to test it! :) x

    Reply
  4. Kim :
    November 29, 2011 at 9:17 am

    Thank you so much for posting this! I consider myself semi-tech smart, but i just couldn't get the hang of getting the button my page with the box with the code, too. You made it so easy, i was able to do it WHILE taking care of/chasing around my 10 month old! ;) Thank you!

    Reply
  5. Kristen @ Celebrate Every Day With Me :
    December 1, 2011 at 8:16 am

    Ha! I did it! Thank you so much! It worked great. I love all your tips and tutorials. You are awesome. :)

    Reply
  6. Michelle @ Changed By The Maker :
    December 1, 2011 at 10:41 am

    Help! I'm not clear on where I get the "button image code!" When I look in my file manager, it appears to be named "Changed By The Maker.jpg" so that is what I used in my code for the widget, but I'm not seeing my image in the widget display. I think I don't understand the file manager part very well. The jpg file is in there (under wp-includes), but do I need to rename it in order to make it work? Confused. Please help.

    Reply
  7. Michelle @ Changed By The Maker :
    December 1, 2011 at 11:37 am

    I think I know the problem. Your button code is for 125×125. I made my button 150×150 (that was the size a friend requested so that she could feature my blog on her site). So I changed the pxls in the code, but does something else have to change too? Sorry for the confusion. I appreciate any help. THANKS!

    Reply
  8. Michelle @ Changed By The Maker :
    December 1, 2011 at 1:04 pm

    I did it! I did it! It was the size that was causing the problem (though I still don't think I understand the whole file manager thing very well). Anyway, sorry to bother you with this, and I just want to say that you give the best directions — do you do any technical writing? You could write some stellar product manuals! Thanks again, Amy! If you get a chance, please go and look at my blog button, I'm so proud of it, and I'm going to add your button to my blog because I couldn't have put that thing together without all your insightfully, well-written steps!

    Reply
  9. Ted V :
    December 2, 2011 at 9:03 am

    Very easy creating a blog button using picnik but I got lost on step 2. I have an iMac. I saved the blog button to my desktop. What do I do now?

    Reply
  10. Christie :
    December 6, 2011 at 10:44 pm

    So this won't work for blogspot?

    Reply
  11. Angie :
    December 10, 2011 at 11:33 pm

    Best how to for this step ever! I am new to blogging and certainly not a tech girl, thanks bunches. New follower for sure.

    Reply
  12. Vicki Bensinger :
    December 14, 2011 at 8:53 pm

    OK so I started to edit my photo. I put in text and then a frame but wanted to do the inner frame in the same color as the text. The only way to remember that color was to go back to the text so I had to apply the frame. When i did that and went back to the frame it installed an additional frame. Is there no way to edit the frame I already have without starting the editting process all over?

    I do use internet explorer, is that a problem when working with Picnik? I didn't understand that in your directions? Confused and trying not to get frustrated.

    Reply
  13. Lorilee @ Loving Simple Living.com :
    December 15, 2011 at 2:45 pm

    Love this. Just got it working. … I don't know what I would do without you ;)

    Reply
  14. Megan :
    December 21, 2011 at 10:28 am

    THANK YOU!! This was super easy!!

    Reply
  15. Courtney :
    December 23, 2011 at 11:22 am

    I DID IT!!! All by myself!!!

    I have a friend who knows all about computers and even though I wanted to make a button for my blog, I really didn't want to have to ask him for help. So I followed your steps and was able to make it work!!!

    Reply
  16. Dawn :
    December 29, 2011 at 12:02 am

    I am doing something wrong. I have the button, but in the text box below the button, the button appears again. Please help!
    Thanks.

    Reply
    • Amy :
      December 29, 2011 at 9:35 am

      It sounds like you may have duplicated the code which pulls the image. Without being able to see it, I would recommend walking through the process once again and to be sure to copy and paste the code exactly as you see. I'm so sorry it's giving you problems!

      Reply
  17. Jana :
    January 4, 2012 at 12:41 pm

    Thank you, thank you, thank you for this! i have been trying to make a button but I'm completely challenged in the coding capacity and you made it so easy! I feel so professional now that I have one!
    Next stop, favicon!

    Reply
  18. chris :
    January 6, 2012 at 9:25 pm

    Can I use this on WordPress.com or only self hosted blogs on WordPress.org?
    My blog seems to reject any code that has an image embedded e.g Amazon Affiliate links.
    I always have to use text only. Still trying to figure out what the problem might be.

    Reply
    • Amy :
      January 9, 2012 at 10:45 am

      Chris, WordPress.com limits the stuff you can put on your blog. Read more about the difference between WP.com and a self-hosted WP blog on my FAQ page.

      Reply
  19. Tamytha :
    January 7, 2012 at 4:10 pm

    Thanks Amy for the great information. I'm doing my first blog candy and I didn't post it so that others could paste my blog button (which I also learned to do through your site) in their site. I came back to your site, followed your directions and it worked! Awesome! Thanks a million!

    Reply
  20. Julie Snow :
    January 9, 2012 at 8:38 am

    I shared your wonderfulness on my blog: http://loveitsewmuch.blogspot.com/2012/01/editing-photos.html Thanks!

    Reply
  21. allena :
    January 9, 2012 at 7:46 pm

    To center it, you have to add before the whole thing (but I have put SPACES in mine so it didn't disappear, which is what I think happened to amy's). Then, you put at the end- again with NO SPACES.

    And thanks, Amy.

    Reply
  22. allena :
    January 9, 2012 at 7:49 pm

    eh! my spaces didn't work. it disappeared just like Amy's did!!

    You have to give the whole thing the CENTER command. To do so, you have to put the word center between two carats at the BEGINNING of the code. Thenyou have to put the command to END the centering at the end of your code.

    So at the beginning of the code, put carat ()

    Same for the end, but to end it you put /center between the two carats.

    Reply
  23. allena :
    January 9, 2012 at 7:50 pm

    grr, carat is the greater than less than sign. Everytime I type it, it disappears :)

    Reply
  24. Donah :
    January 9, 2012 at 8:32 pm

    Thanks so much for the help…

    Reply
  25. Anthony :
    January 10, 2012 at 12:38 pm

    Great post!

    Reply
  26. Sheila :
    January 12, 2012 at 1:15 pm

    Great tutorial and so easy to do! Love it! Thanks!

    Reply
  27. Spoon Fed Baby :
    January 12, 2012 at 5:01 pm

    Great tutorial! I was confused about the quotaton marks…if we had to retype the quotation mark or just delete it. So I didn't touch anything and it worked! At least…I am assuming it worked. It looks good on my end. I guess I will have to wait for someone to grab my button to find out!

    Reply
  28. Leslie :
    January 12, 2012 at 8:05 pm

    AMAZING! I have been looking for a tutorial this easy for days! You are a goddess for creating this post!

    Reply
  29. kelly :
    January 14, 2012 at 9:01 am

    hi amy. i found this post on Pinterest and I used it to a create a blog button of my own. yay! :) thank you so much for sharing your easy to follow instructions! i also shared a link to your instructions on my blog – http://mindingmynest.com/2012/01/52-weeks-of-pinspiration-week-2making-a-blog-button/. thanks for the pinspiration! :)

    Reply
  30. Kathy :
    January 22, 2012 at 7:52 am

    Thanks so much for all your help Amy! I made 2 button grabbers but can't figure out how to place them side by side in a widget. They always stay one on top of the other, even if I use a center command and/or non-breaking space between them. My sidebar is plenty wide enough for 2. I can get buttons only side by side, but not with the grabbers. Any help would be greatly appreciated. I don't know what I'd do without your website!

    Reply
  31. Abby :
    January 22, 2012 at 3:01 pm

    I'd love to make a button but I'm confused! I wish they had some kind of website that created the html for you!

    Reply
  32. Tami :
    January 25, 2012 at 5:46 pm

    Thank you for saving my life. I was ready to throw my computer out the window, kick the cat, and yell at the kids when I found your site and finished my DAY LONG trek to a button with the grab box. *sigh*

    Reply
  33. Athena at McElrath Cabaret :
    January 28, 2012 at 11:56 pm

    I am a new email subscriber, and just wanted to say thank you! I got our button to show up on our blog. I am ready for our new link party on Monday! Thank you so much–I know nothing about programming, and I feel like a star right now because it worked!

    Reply
  34. Barbara H. :
    January 31, 2012 at 8:14 am

    I've tried several things (on WordPress.com) and this is the first one that worked.in the post itself…but when I copied the code from the grab box and tried to repaste it, it didn't work. Any ideas?

    Reply
    • Amy :
      January 31, 2012 at 8:40 am

      Unfortunately, WordPress.com severely limits what you can add to your blog. :( That's why I recommend WordPress.org (a self-hosted WordPress blog) instead. If you want to stick with a free service, I would choose Blogger over WordPress.com. I wrote about WordPress.com vs. WordPress.org on my FAQ page if you want more info.

      Reply
  35. Kate F. :
    February 1, 2012 at 1:28 pm

    Yea! I think I actually got this to work! Thanks so much Amy. I've been following your blog for almost a year now and, as someone who is very new to this whole blogging thing, it has really helped me to to feel a little more knowledgeable about all this back-end technical stuff. I still a long way to go, but I love how each of your tutorial posts are so simple and easy to come back to later (Like I this one!)

    Thanks Again!

    Reply
  36. Shanna Schneider :
    February 1, 2012 at 8:38 pm

    Thank you so much! Great tutorial! Super simple!! The only thing is, what do I need to remove from the html to get rid of my blogger URL address between the image and the html code?

    Please see the bottom right of my blog for an example.

    http://www.becauseshannasaidso.blogspot.com

    Thanks Again!!

    Reply
    • Amy :
      February 2, 2012 at 9:15 am

      It looks like you have two image tags in there so I'd just delete the one from < to > and includes button.jpg. Hope that helps!

      Reply
« Older Comments

Leave a Comment

*