How to Make a Blog Button

May 21, 2010 376 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.

ShareBuffer

Comments

  1. Living :
    July 21, 2011 at 12:13 am

    I created an easy tutorial on my site recently. It is an alternative to yours, but it's still useful I think.

    http://livingtodaystech.blogspot.com/2011/07/how-to-create-button-for-blog-part-1.html

    Reply
  2. Tifaine :
    July 22, 2011 at 2:05 pm

    Amy,

    Okay I have created my button and saved it on my computer. That is as far as I get. I get so confused with all the codes and yada yada yada. I am a visual person and the codes really get me overwhelmed! Is their a video of how i can get my blog button on to my blog??? HELP please i have been trying to do this since MAY of this year and still no luck!!

    Reply
    • Heather Wood :
      July 26, 2011 at 1:11 pm

      You have to copy and past the code into a widget. A space that accepts html code. once you have copy and pasted it, you should be able to see the button on your website. It also depends on what platform you are using for a website.

      The code tells the computer to do something.

      This simply says, take whatever adress is in between the quotes, and make it clickable and take that person to that destination.

      This says, I have an image located in this space. Please pull it from where it is and display it on my site.

      so now we put everything together

      Now you just copy and past this code in a place that accepts html and it should show up as a click able image!

      Reply
      • Amanda :
        July 28, 2011 at 3:37 pm

        I am having the same problem…sort of.

        I made a button and was able to get it on my blog as a click-able link; however, I can't seem to get a code and put that on my blog for others to copy and put on their blog.

        Where do I find the code?

        Reply
        • Heather Wood :
          July 28, 2011 at 4:21 pm

          use the exact same code you used for your blog. exchange your web address with a sample address. should look something like this…

          a href=

          I had posted code example, but apparently, she must have html disabled.

          Reply
  3. Chris {NotAnotherGayWeddingBlog.Com} :
    July 25, 2011 at 11:33 pm

    Thank you SO much for this tutorial!!! I tried 4 other ones and no one mentioned the smart quotes before you! You truly are a life saver!

    Reply
  4. Alli :
    July 26, 2011 at 2:11 pm

    THANK YOU! This made is so simple. I've been trying to figure this out for awhile and all the other tutorials I found had too much "technical talk" and I ad no idea what they meant! Thanks for making it easy to understand.

    Reply
  5. Yosefa @nonrecipe :
    July 31, 2011 at 3:24 pm

    Aha! I did it!! I'll find out if it really works when the post it's linked to goes live tomorrow. But it looks pretty good! I made my image in Picasa. Not as much functionality as I would like, but very easy. I enjoyed your friendly style tutorial. I think having your smiling picture made me feel like I wasn't alone. Thank you!

    Reply
  6. Judy@Savoring Today :
    August 8, 2011 at 5:51 pm

    Hi Amy, thanks for the help with this. I am on wordpress.com so there is not a file manager for me to access. However, I was able to upload the image into my media gallery and copy the url from there and it worked beautifully. Just thought I'd pass that along in case there were other non-wordpress.org folks out there wondering if they can do this too. I appreciate your blog very much–I'd cook you dinner if I could!

    Reply
  7. Michele :
    August 11, 2011 at 2:01 pm

    Thanks, Amy! I've used a few tutorials from your site. The info you blog about is well-written and easy to understand. I appreciate your every post! Today I was able to both change my Atahualpa header image (a miracle!) and construct a blog button. I'm not 100% sure the button works yet, but I can see it ~ so that's at least a step in the right direction!

    Many blessings to you,
    Michele P.

    Reply
  8. Kristen @ Joyfullythriving :
    August 11, 2011 at 9:43 pm

    Amy, you've done it again! This was on my blog "to do" list and the only way I could do it was with your help! You have truly been a blessing. Oh, and I love the new design of your website!

    Reply
  9. Jackie @ Blessings Overflowing :
    August 16, 2011 at 7:57 am

    Thanks for the tutorial, Amy. I like it better than another one I tried for making a grab button. I did find that my button and the code box were squished together. So, I added right before the <div . It seems to work and there is space now. Thanks again.

    Reply
  10. Jackie @ Blessings Overflowing :
    August 16, 2011 at 7:59 am

    It didn't show what I added. I will separate what I did with spaces even though there weren't any.

    Reply
  11. Jackie @ Blessings Overflowing :
    August 16, 2011 at 8:00 am

    It didn't show up again. I added code for a line break. Sorry for all of the comments.

    Reply
  12. Rosshalde Pak :
    August 17, 2011 at 11:08 pm

    Thanks again Amy. Your tutorials and step-by-step guides are helping me so much. I thought I was going to have to pay someone to make a blog button for me (so beyond my skill set) – but voila, there it is. :-)

    Thanks.

    Reply
  13. Ragina :
    August 19, 2011 at 2:23 pm

    When creating the code do you have to create an actual html document and upload it to your file manager and then put it into the widget or can you take the above code and paste into the widget on WP?

    Reply
  14. Renee :
    August 24, 2011 at 7:55 pm

    HI, I've tried and tried and just can not get this to work. All that's showing is some code.
    I've also tried to copy another bloggers and I can get the button and the link, but no code to copy. I'm obviously doing something wrong. Help!

    Reply
  15. Renee :
    August 25, 2011 at 10:53 am

    Ooops, sorry Amy. Yes. http://www.reneewhiting.com
    This is the best "work-around" that I could figure out. The button will link and open in a new page (which is what jI want) but I can't see to figure out how to add the "text box with the code" What type widget box are you using?? I have ProPhoto 3 theme.

    Reply
  16. laura :
    August 26, 2011 at 1:38 pm

    I am missing something, I can get my button to show and the grab box however the button won't do anything if you roll over/click on it and the text in the grab box is the longer from step 4. When I visit my own site and copy the grab box info to put in another area it won't work.

    Am I supposed to put both the code from 3 and 4 in my widget text box? I did. However I don't know why the longer code from step 4 is showing in my grab box. When looking at other's buttons only the short "copy code" stuff is showing.

    Thank you for any help!!

    Reply
    • laura :
      August 26, 2011 at 1:43 pm

      Scratch everything I just said!!! Even though I opened a new page, cleared cache, etc I guess it wasn't refreshing from my first mistake….I knew I had it! It works on a different computer so I'm good. Thank you for all your advice Amy!!!

      Reply
  17. Shari Lynne :
    August 26, 2011 at 4:34 pm

    button done (check) Your awesome! Not sure how to test to make sure it will really work though.
    Thank you

    Reply
  18. paige :
    August 28, 2011 at 10:50 pm

    Wow…thank you so much. I've been through tutorials about this and couldn't seem to get it to work. You are the first one to mention "smart quotes" and that was my problem. Thanks again for all your help – your site has been so helpful in my transition from blogger to wordpress!

    Reply
  19. Amy :
    August 29, 2011 at 8:11 pm

    Woo hoo! Got it working!!! Thank you sooooooooo much!!!!!

    Reply
  20. Mrs. Weber :
    August 29, 2011 at 8:40 pm

    THANKS SO MUCH, AMY! Just saw this posted on Facebook and did it in 10 minutes! I had no idea it was so easy. You ROCK!!! Love all your tips :)

    Reply
  21. Alexandra Rae :
    August 30, 2011 at 3:17 am

    First of all I must say how happy I am that I found you! Awesome tutorials!! Just liked you of fb and will be following you on twitter. I have a bunch of follow buttons all over my blog. I want to know how I can get a nice clean button bar like yours at the top right. I know blogger does that for you at the bottom of each post, but I want one at the top of my blog. Any help you can give me? Also, I just created the Instagram follow button and linked it the the url to follow me. I don't think there is any actual button out there. —Just saw the anti spam plug-in below. THANKS AGAIN!!

    Reply
    • Amy :
      August 31, 2011 at 8:25 am

      For the social media icons in the top right, I just hard-coded it. So, each one consists of the icon image sandwiched in a link tag like so:

      a href="URLofLandingPage" > < img src = "URLofIconImage" / > < /a

      Of course, you have to put the < and the > at the beginning and end (at take out the spaces).

      Reply
  22. Erica :
    September 8, 2011 at 1:00 am

    Amy, you are my hero! Thanks a lot for "re-type the quotes" tip! You rule, girl!

    Reply
  23. Joanna @ Southern Daisy :
    September 10, 2011 at 7:02 pm

    Hey Amy! Thanks for the great tutorial! The only issue I'm having is that once I copy the code into my text widget and save, it's requiring my server password every time I go to my page. Obviously I don't want people to have to enter a password to view my page. Do you know why this is happening? The URL for the button showed up as ftp:// instead of http:// is that normal?

    Reply
  24. Mara @ Kosher on a Budgget :
    September 11, 2011 at 3:13 am

    Woohoo! I just used this tutorial and it worked for making an image to use on a Wildfire giveaway! Thanks so much – you are a gem!

    Reply
  25. Patty :
    September 26, 2011 at 12:24 pm

    Yay! it worked! Thanks for the tip.

    Reply
  26. Mendi :
    September 28, 2011 at 12:05 am

    Hey Amy –

    I went through the steps and even went back to delete and re-add the " and the code was added to my site however my image that I loaded to the server is not showing up.
    How can I check that I loaded the image to the correct location to troubleshoot why it is not displaying properly.

    P.S. – I just love all your tutorials, they are really helpful for someone like me who is just learning wordpress.

    Reply
    • Amy :
      October 3, 2011 at 1:39 pm

      Yeah, it looks like it's not uploaded to the right directory. Another option is to upload it via your Dashboard –> Media –> Add New and then grab the "File URL" and use that link as your img src. I hope that helps!

      Reply
    • Mendi :
      October 5, 2011 at 11:15 pm

      That worked! Thanks so much for your help.

      Reply
  27. Susan Hill :
    October 2, 2011 at 2:47 pm

    *happy dancing*
    I followed your tutorial and created my (very first) blog button. Thank you so much! One question I have. I have a series that I've started (small, personal one), and I figured out how to connect it to the permalink of the first post, but is it possible to connect it to whatever the latest one is? (does that make sense?) Or maybe once you connect to one, that's enough. Just wondered your advice/opinion. THanks…(super, super happy here…!)

    Reply
    • Amy :
      October 3, 2011 at 2:29 pm

      Yay, congrats! Not sure I'm trackin' with ya, but if it's a series, my thinking is that someone would probably want to start at the beginning of the series right? So linking to the first in the series makes more sense to me in that case. :)

      Reply
      • Susan Hill :
        October 3, 2011 at 3:31 pm

        I know…confusing, huh? lol. Sorry. Well, on my autism series that does build from the beginning post, yes…starting from the beginning makes sense. It's part of a 31-day challenge so, on the first page, I'm including the links for each consecutive page, which will work. I guess I thought there have been blogs I've clicked on where they have buttons for specific posts that are all generally related. When you click on their 'button', I thought it took me to the latest posts connected to that topic. (Then again, I may be operating on too little sleep. lol) I will check out some blogs and see if I can figure out what's in my head. Thanks so much!

        Reply
  28. Brandi @ Must Love Coupons :
    October 3, 2011 at 8:29 am

    Amy, Thanks again this is the second time I've had to reference your site for these steps alone! Love all you do!

    Reply
  29. Pat Harrell :
    October 3, 2011 at 4:03 pm

    OMG! I did it! Yeah! Many thanks for this tutorial. I'll be coming back for more help and am linking to your site. You are wonderful!

    Reply
  30. Kristen :
    October 5, 2011 at 3:03 am

    Well, I nearly pulled my hair out, but I finally did it!

    Reply
  31. sue :
    October 5, 2011 at 11:20 am

    Hi Amy, thank you for all your info!!!
    I think I correctly followed your insts on creating a button code. When I go to my website, the button is there, but so also is the code box. Isn't that supposed to be hidden until the button is clicked? I deleted it, but would like to try again.
    Thanx!!

    Reply
    • Amy :
      October 5, 2011 at 11:54 am

      The code box is meant to be there so others can grab that HTML, paste it into their site (like in their sidebar) and your button will show up on their blog. So, if you look in my sidebar, you'll see the code to the right of the button. Hope that helps!

      Reply
  32. Camille :
    October 5, 2011 at 12:13 pm

    o my goodness. thank you! your tutorial is the only one that has worked for me. thank YOU!

    Reply
  33. Truth Mama :
    October 7, 2011 at 9:53 pm

    I'm new to blogging and this was VERY helpful. I'm writing a blog post about it and putting a link to this article in it. Thank you!

    Reply
  34. Amy @ Raising Arrows :
    October 8, 2011 at 1:20 am

    Googled how to do this and there you were! I should have known to just check your site to begin with! ;)
    {and I am so glad you mentioned the quotes thing…this has caused me problems in the past and I had no idea why.}
    Thanks,
    Amy

    Reply
  35. Veronica :
    October 16, 2011 at 12:14 am

    You are awesome! I am so dumb when it comes to html, etc, but I hardly had any problems creating the button I wanted! Thank you!

    Reply
  36. Veronica :
    October 16, 2011 at 12:25 am

    BTW, do you know if there is a way to center the button in my side bar? I tried using the html for centering before the rest of the code, but that only centered the picture and the code below it for people to grab was still aligned to the left.

    Reply
  37. Rie :
    October 17, 2011 at 4:44 am

    Woot Woot… I finally got it to work! Woot Woot! Well, I think it's worked, I been doing this for most of the afternoon (amongst nappy changes, dinner etc)!
    Check it out here:
    http://craftyrie.blogspot.com/
    Thanks so much for the great tut!!!!!!!

    Reply
  38. Jacinda Walker :
    October 17, 2011 at 1:05 pm

    Amy, I know this is somewhat related to this topic, but what if you just wanted someone to click on an image to get to a certain link. (i.e. not have a grab box). What part of the code should I leave off to not include the box, but to still link the image to my link.?

    Reply
  39. Beth Anne :
    October 25, 2011 at 1:43 am

    Well 10 yrs later after I gave up on being SUPER complicated I finally made a VERY simple button. But it works for now till I can hire a graphic designer :)

    Reply
  40. This Side of 30 :
    October 26, 2011 at 4:18 pm

    Thank you so very much for doing this, and your other tips. I had no idea making a button was so easy — because you make it that way! Thanks again, I really appreciate it! :)

    Reply
  41. Cel Woods :
    October 26, 2011 at 11:25 pm

    Thanks You So Much!…I created a button on my blog site and I like it so!

    Reply
  42. Maria B :
    October 27, 2011 at 11:10 pm

    Thank you so much for this blog! I finally did it! I couldn't get it to work at first, and then I found my mistake, and now it's gorgeous! Thank you so much for all the help and insight you offer!

    http://themammahomemaker.blogspot.com

    Reply
  43. Jill :
    October 28, 2011 at 12:40 pm

    It worked! You're awesome! Thank you soooo much for this amazing tutorial! Come and check out my button! Jill♥

    Reply
  44. ZombieMommySaves :
    October 31, 2011 at 8:52 am

    AMY you are rockin like Dokken! Totally work, I pasted your code into a Word document to see it more clearly for editing. Love your blog!

    Reply
  45. ZombieMommySaves :
    November 2, 2011 at 6:29 am

    By the way I hope you don't mind I linked to this post on my site.

    Reply
  46. pat :
    November 3, 2011 at 1:07 pm

    I am brand new to blogging, completely self taught, and feel I found a friend when I discovered your website. I followed your instructions for how to make a blog button, and after a few visits to the blog (with a couple of naps in between to restore my brain cells), I actually did it today. Thank you, Amy

    Reply
  47. Chat With Vera :
    November 3, 2011 at 5:17 pm

    Thank you for this. I've created them but the try and error method but today seemed stumped. You helped lots.

    Reply
  48. Derek :
    November 5, 2011 at 11:13 am

    Great tutorial :)

    Its work for me.

    Http://tips-to-peep.blogspot.com

    Reply
  49. Becky :
    November 8, 2011 at 4:01 pm

    You're my hero!! This was so insanely simple. No hiccups whatsoever. Thanks so much for this thorough tutorial. Check out my FIRST BUTTON EVER, thanks to you, at http://shineutah.blogspot.com!

    Reply
  50. Linda :
    November 15, 2011 at 5:55 pm

    Your tutorial worked like a charm! Thank you for your tutorial!

    Reply
« Older Comments
Newer Comments »

Leave a Comment

*