How to Make a Blog Button

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. Picnik no longer works. Here’s an alternative.
  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:

This post is part of Works for Me Wednesday.

Do you get The Useletter?


Comments

  1. says

    I’ve been looking for a way to add my blog button for a while now and this is the first post I’ve found that is actually helpful! It’s so easy to follow along and only took me about 3 minutes to get the code set up added to the widget.
    Thanks for the help! :)

  2. says

    Hi Amy, I’m confused. :( Do I do anything with the code created in step 3? I tried the code in step 4 but it doesn’t show an image. Perhaps I’m using the wrong URL for the image. I uploaded it to my google drive and I’m using the share URL. Help, thank you!

  3. says

    THANK YOU! Yours instructions are the most thorough. I was having trouble with the code and I scrolled down a little more in your post and saw the part about the “smart quotes” and it solved my troubles. You’re brilliant! Thanks!

  4. says

    Thank you so much for posting this! It worked except for one tiny detail. The code inside my grab box doesn’t work… when I scroll down in the box the button is actually in the code too. Not really sure what happened?! : /

  5. says

    AMY! You are a life saver!!! You are literally the 6th blog i’ve tried (been working on this button for 48 hrs straight it seems) and the ONLY one that has worked. Thank you, Thank you!!

    Morgan

  6. Sissy says

    Hi Amy,
    Thanks!! I got it to work, I have blogger.
    My question is how did you get you image name to say “bloggingwithamy” My image has some random letters and then 125×125 at the end.
    I would love to be able to rename the image. I just uploaded it to my gadgets.
    Please help me…and thanks so much!!
    Sissy
    http://www.southfloridasavers.com

  7. says

    Amy – Thank you so much for this! After a few trial and errors (on my part), I was able to get the button up on my site. This is all new to me and there is so much information out there (good and bad), I’m glad to have found your wonderful tutorial and site.

    Many thanks and success to you!
    Y. Kelly

  8. says

    if you could’ve seen the smile on my face when I saw that I DID IT!!!!!! Thank you sooooooo much!! I’ve tried 4 different tutorials and they all failed. Now I can feed my very hungry children! They thank you too!

  9. says

    Thanks Amy, this was easy enough, I’ve been putting this button making task off for ages. Now I’m glad I came across your post. Very helpful.
    But since I’ve got no html knowledge, could you possibly tell me how could I align my logo and my html on the same line? (my widgets width is 250 pixels – so the two little 125 squares would look better alligned horizontally) .
    Best regards
    Ally

  10. says

    Thank you so much!! You just made my day that I could finally find a tutorial that actually worked and help me add a “grab our button!” Thank you, thank you, thank you!

  11. says

    I am brand new to blogging and I’m a bit overwhelmed! I’m trying to understand the instructions, so I’ll try to run through the steps. Also, if I’m featured on a blog, how to add the “Featured On” area with other blogs that featured my posts? Thanks so much for ANY help! My blog is http://mybutterflyhaus.blogspot.com!

  12. says

    Thanks so much for your writing!
    I found that this an article was useful for my work & I hope that you can continue post more exciting writing!
    I really like this site & I will share it for my friends!
    Good luck!

  13. says

    Ooh, I definitely need to create a “button.” Thanks for the tutorial. I just started following your blog. Hope to see you around on The Decorologist!!

    • says

      Oh, but you ARE a rockstar, twice over. First, for making the button. Second, for living in Alaska (I would surely wimp out in the cold). Way to go! :)

  14. says

    I notice there is not a ” at the end of your URL in your img tag. The ” should go after the ; and before alt. I would try that first. If it doesn’t work, I would walk through the coding part again.

  15. says

    Thanks Amy… just managed to make a button… it took my 3 hours from making the picture for the button to posting… but it was worth every second… I’m so pleased with myself! x

  16. says

    Hi! First of all thank you for the tutorial, I think it is so great you would take your time to do this!!!!
    I was wondering if you could help me, my results are I get the box with the scroll menu with an image inside, so I can scroll down and see the image! LOL How do I get it to be an image , then underneath -a scroll box with code? I have copied the whole paragraph, changed the quotes and so far as I know put the right info in , lol Thank you , I look forward to your reply!! Here is what my code looks like.

    <a href="http://delightfullycrazytoo.blogspot.ca&#034; target="_blank"><img src="http://i1264.photobucket.com/albums/jj485/jerri255/DelightfullyCrazybutton_zps201b9af6.jpg&#034; alt="DelightfullyCrazytoo.com" width="125" height="125" /></a>

    • says

      Hi Naomi,

      I notice there is not a ” at the end of your URL in your img tag. The ” should go after the ; and before alt. I would try that first. If it doesn’t work, I would walk through the coding part again. The tiniest details can make a huge difference! :)

  17. says

    Ok, LOVE this tutorial! Thanks so much for sharing!
    Will you please help me out? Bless my heart – how do I add my buttons to a separate page? I’ve got my pages all set up, but I’m doing something wrong! AGH!
    Help me Amy…you’re my only hope!
    Kaylynn

  18. says

    Amy,
    I. could. not. get. this. to. work. Going nuts! Aaaand, then, it worked!! Yea!! You are awesome. Thanks for this very techie tutorial. I’ve stopped cussing and started smiling. Yea. Love this site.

  19. says

    Thank you Amy. I was trying to figure out how to make buttons and came across your post. I sat down and went through it a couple of times last night, fiddled about and …… eventually managed to make it happen. Yay! I was so happy to be able to do it myself, so thank you, thank you.

  20. says

    I am trying to just have the button without the grab and go text. It is not working when I copy and paste in the text you provide with the changes. I am unable to locate where I find the URL for the picture I uploaded to the server. Please help.

    • says

      I guess I should let you know, the pasted text shows up on my blog, but not my picture. Thanks in advance for any suggestions you may have.

  21. says

    Hi Amy, I am having trouble with the 3rd and 4th steps. I entered the code exactly as you said. The image and box with the code shows up in my sidebar. But, when the code is copied and added to a blog post, all that shows up is the photo of the button and the text box. Not the blog button with a link to my site.

    I don’t understand the difference between the 3rd and 4th steps. What am I missing?

    Thank you.

  22. says

    Amy – I.Love.You!! I can’t wait to do this to advertise my Christmas series. Thank you for knowing all this awesome stuff and for sharing it with us and for just being so cute and nice! =)

  23. says

    Thank you so much for this post! You really helped a novice like me! I’m a complete newbie and I was able to make a button! I’ll definitely be using your site as a reference in the future!

    p.s. Is there a way to get my grab box centered under the button?

  24. says

    Wow! I made my button, followed these instructions, and it was like magic! Bam! I have a button, and a way to grab it on my blog now!! Thank you so much–love, love, love your blog!

  25. says

    Hi Amy,
    I’ve used this tutorial to make an install buttons several times on my site and a few others. Recently, I changed my button design and now I am having problems. The code works fine to get the button on my site and the grab box, but when you grab the code- the button doesn’t appear. It will take you to my site, but there is no image.

    Any ideas?

    • says

      Sounds like there may be a mistake in the URL of your image. That’s my first guess without looking at it. I’d double check that. Before you put the image URL into the button code, paste the URL in the address bar of your browser. Your image should pull up without an issue. If it doesn’t, you’ll know there’s a problem with the URL.

  26. says

    THank YOU! You have made this so that I can understand and I made my first button with a grab box with no problem at all! I can’t wait to make a couple more!

  27. says

    Your site has been tremendously helpful. I do have one question though. I have made the button and the grab it box, but my button is not ‘hot’. When you hover over it, there is no way to click it. Can you help?

  28. says

    I adore your site. However, I do wish you would be tutorials with PicMonkey. I realize when you did these it was still called Picnik but PicMonkey seems to be just as good and in some ways better, from what I have read. Thanks for all the wonderful tutorials you give.

    • says

      Hi Karen, I did do a few tutorials after Picnik went away. You can see them here and here. I did not use PicMonkey for these but I used iPiccy. The reason is, when Picnik went away, iPiccy was more feature-rich. I think PicMonkey has added more features now, so perhaps I’ll revisit them again soon. :)

  29. says

    This was really helpful. Everything worked fine when I did it, except when I tried grabbing the code to see if it worked when I pasted it on my test blog, the button came up really tiny. (Smaller than most blog buttons). My original pic was larger than 125 x 125, but I wanted something eye-catching (there are buttons of a similar size by others on my blogs). My regular blog is here: http://nickwilford.blogspot.co.uk/ with the grab box under the button and this is my test blog with the copied version: http://nickwilfordtestblog.blogspot.co.uk/

    Is there something I’m doing wrong? How would I make sure the copied version is the same size as the original? Thanks :)

    • Amy says

      Hi Friv, thanks for asking. A short quote (1-3 sentences) and a link back to this post to be read in its entirety would be greatly appreciated!

  30. says

    First Amy, this ROCKS! I am so glad I could make a blog button etc. However I cannot get the grab my button to work. Instead of giving code to grab in the box for text I see another blog button. Can you help me? I am sure I am doing something wrong, but I can’t figure it out.

    my website is http://www.rethinkingmythinking.com

    Thanks.

    • Amy says

      First of all Angela, love your header! Yes, I see what you mean about the grab box. I know it’s a bit of a pain, but I recommend you delete the code you have and try again. HTML is one of those things that is really picky about getting all the quotes and commas and things in the right place and sometimes it’s just easier to start again. If you did the part about smart quotes, my guess is that you accidentally changed something in a way that didn’t want to be changed. It’s happened to me plenty of times. You can do it! Just gotta put your OCD cap on for a minute and get all that code perfect. :)

      • says

        Thanks Amy!

        Part of the problem is even the code on your site is doing something weird in the middle. I don’t know if it is my browser’s fault or not but in the middle of the code ” is turned into " and < is turned into &It;…
        So the code from your site looks like this:

        <a href="YourSiteURL" target="_blank"><img src="YourButtonImageURL" alt="YourSiteTitle" width="125" height="125" /></a>

        From what I can tell with my OCD cap on I got it right, but my website still says I didn’t get it right. I typed it in and did not copy and paste it…I guess I need to try try again.

        Thanks for your help.

        • Amy says

          Hehe. I know, it’s confusing. My code looks weird, but I did that on purpose, so when you paste it (like you did above), it automagically transforms to what is correct. Yes, I would copy and paste and I bet you’ll be good to go. :)

  31. says

    Amy… Below is the code I am using…I keep getting my blog button in the grab box instead of the code. My browser is doing something strange to your code above so I don’t really know if I have it exactly right….UGH! :/ Can you tell me what I am doing wrong?

  32. says

    Thank you for the tutorial. I’ve been wanting to do this for myblog/site for awhile so anyone who contributed to my blog could display the button. =)

  33. says

    Hi Amy! Thanks for this great tutorial! I’m having one problem and hoped you might know a way around it.

    To test to make sure my button is working, I did two different things. First, after loading the button to the sidebar of my blog, I went to my blog as a visitor would view it. I then selected and copied the code from the grab box, pasted it (in the HTML view) in a new blog post and published it. Then I revisited the page and selected the button, but it took me to http://www.blogger.com/www.lashesandbeard.com instead of just taking me to my site.

    Next, I copied the code from the grab box and then pasted it into the html/java script widget on my sidebar, just like someone would do if they were grabbing the code for their own site. I saved it and revisited my blog, clicked on the button that displayed (without the grab box), and it took me to http://www.lashesandbeard.com/www.lashesandbeard.com which was my site, but a blank page with an error message that the page did not exist.

    Any suggestions on how I could fix this problem, or what I might be doing wrong? I’ve left the button up with a title that says ‘Test Button’ if it helps. Thanks for your help! :)

  34. says

    Oh my gosh, finally! I’ve been working with a few different codes and WordPress wasn’t cooperating with any of them (it kept changing my code as soon as I hit ‘save’).

    Thanks for a clear and helpful tutorial!

  35. says

    Thank you so much for your post and easy-to-follow instructions! I’m so not tech savvy but was able to figure out how to create my blog button on the first try with your simple novice blogger (idiot) friendly directions. ;)

    I’ll be sharing your post on my (newly buttoned) blog. Thanks again!

  36. says

    Great instructions, thanks! I’m having trouble with the size. I know I saved it as 125 pix but when it posts to my blog it comes out HUGE! What’s happening?

  37. says

    Thank you! I started this project this morning and as soon as I get my header right I will finish – I have been wanting to do this for so long – great instructions!

  38. says

    Thanks ever so much for providing this tutorial. It was super easy and took next to no time at all to complete my button! Many thanks for making a seemlessly long job much quicker than anticipated :D

  39. says

    Thank you so much for this tutorial!! I had looked at sooo many and tried to use their html codes to get my box and it NEVER worked! Yours worked for me on the first try! Thanks so much :) Stop by to see it if you’d like!

  40. says

    I can’t get the code to work in WordPress text widget. When I follow your instructions step by step and then click on save, the Widget changes my html code.. What do I need to do to fix it and get it working?

    This is my original code inserted:

    <ahref="http://adaptivelearnin.wordpress.com&34;target-&34;_blank&#34><imgsrc="http://adaptivelearnin.files.wordpress.com/2012/07/adapt.png&34;alt=&#34adaptivelearnin#34;width=&34;125"height="125"/></a&gt;

    This is the code the widget changes it to:

    <a href="http://adaptivelearnin.wordpress.com"&34;target-&34;_blank&#34><imgsrc=""http://adaptivelearnin.files.wordpress.com/2012/07/adapt.png"&34;alt=&#34"adaptivelearnin"#34;width=&34;125"height="125"/></a&gt;

    • Amy says

      Your original code is missing some quotes and end tags like <> which makes me think you might have better luck if you go back and make sure you are not deleting anything unintentionally when you are pasting in your URLs. It’s super finicky, I know, but even the lack of one end quote can throw the whole thing off. :(

  41. TB says

    Hi,
    So I tried to make a button to put on my sidebar. Everything was going well until I actually added it. Under my image there is this box with a little red x in the left corner (http://braceletsbydesign.weebly.com/blog.html). I’m not sure why this is there. Any ideas? I am using Weebly for my blog so I don’t know if this is part of the problem. I also tested my button link (http://braceletsbydesign.weebly.com/button.jpg) and it didn’t work. I’m new to codes and widgets and all this jazz so I will just keep trying. If you have an tips I would love to hear them. Thanks so much!
    TB

    • Amy says

      Hi TB, it seems the URL for your image is incorrect. You should be able to plug in the image’s URL into your browser and it should show up, so you might want to try uploading it again. If you have trouble on your Weebly account, you can still use a free image hosting site like Photobucket. I hope that helps!

  42. Dana says

    I can’t thank you enough, I’ve been reading other posts and nothing worked for the “grab it” button, then I found you and it worked first time. Thank you so much.

  43. says

    Thank you!! Took me a while to figure out what to put on the button but your instructions were great and appear to have worked!

  44. Stephanie says

    Amy,

    Your tutorials are great! Easy to follow! Thank you for blogging all this info!

    Steph

  45. says

    Very interesting. I didn’t know you could make a button like that. I’m learning to copy and paste codes into my blog. I finally created one for my Etsy shop that now shows up on the side. Really cool. I now want to get the like us on Facebook button for a few of my face book pages but don’t know how to do that yet. That could be a good post to do.

  46. says

    Thanks for the post. I appreciate the info on blog comments and will surely start looking out for people who are using automated programmes for making blog comment posts.

  47. says

    Hi, Amy:

    Can the image be hosted on the WordPress blog itself or does it have to be placed on the server? I ask because am not well versed in doing things with my host ever since they changed up a few things.

    Please advise.

  48. says

    This was a great tutorial! Thank you Amy :)
    I just made a badge or blog button for my blog earlier. At first I uploaded the picture to my G+ because I use Blogger and all of my Blogger pics are automatically saved into my G+. It didn’t work as well using G+ tho. I saved it as a 125×125 and if I viewed it through Google, it showed as a 125×125. As soon as I added it to my site, Blogger made it huge even tho it was a small file and the dimensions were set correctly lol!

    Picnik is linked with G+ now. As soon as I hit edit on a picture, it brought up picnik.

    I was able to save it to flickr and it worked from there just perfect.

    • Amy says

      First, I’d make sure your URLs are correct. Then, it looks like there is a semicolon instead of quotes at the end of each of the http://….

  49. says

    Ohmigosh you are BRILLIANT! Thank you sooooo much for this tutorial. I am a non-techie mama blogger (and if you take a peek at what I write about you’ll know I’ve got my hands full!) and *all* I wanted in the whole wide world was a cute little button on my blog. And for some reason no one out there could tell me how to do it in terms I’d understand!

    You made this easy, I love my new blog button, not only is it cute, but it actually *works* and you made my day! Yay!

  50. says

    Thank you SO SO SO much! My wordpress blog is hosted through Go Daddy so it took me a bit to find out where to host the image but it works! Thank you!!!!!

  51. says

    Amy – been trying unsuccessfully for a while to do not only the blog button, but also the text area underneath it. I’ve deleted and redone the quotes. The problem is when the user grabs the code from the box and attempts to paste it into their blog post – it changes the quotes to smart quotes even though I’ve gone thru all of the steps above. it’s driving me nuts… thoughts?

    I’m on a WP.org site

  52. says

    Hey thanks for the tutorial! It was easy to follow and I made my button. But I’m trying to figure out how to hyperlink my button so it goes back to my blog…. and I can’t seem to figure it out. I kinda have it where there’s the picture and it links back on my button, but there’s like letterings littered above and below picture and the picture shows in grab box which I’m not sure is suppose to happen or not… any tips, please? This was great though… I made my first button because of you! Thanks.

  53. Elizabeth says

    Hi Amy. I’m probably going to sound silly, but could you please tell me why I shouldn’t be using internet explorer? I do have chrome and use it occasionally, but old habitd die hard, I guess.

    I’m working on launching my first blog now and could never have gotten this far without you. Thank you!

    • Amy says

      Oh, not a silly question at all. :) Internet Explorer has a horrible reputation of being a stinker on so many levels from the way it renders websites incorrectly to being buggy etc. From a designer’s point of view, it’s frustrating to work with so I abandoned it many years ago.

  54. says

    Thank you! Thank you! Thank you! I tried for so long to create a button and a grab box for my blog and your tutorial was the one that finally helped! Thanks so much for taking the time to publish this.
    Beth

  55. says

    THANK YOU SO MUCH! I did it! I created a blog button – nothing fancy, but I am thrilled. I can’t thank you enough, you make everything sound so simple. You are definitely my go-to blogging resource!

  56. says

    Hi Amy!

    Sorry to bother you with this but I know how good you are at these things and I don’t know who else to turn to!

    http://bewitnwise.blogspot.com

    Can you tell me why my button image is HUGE? It is the one that says “I’ve been featured on BWW” It only looks this big on my website, I already checked it out on my other blog http://tryingitoutblogc.blogspot.com/ (used for checking things out so that I don’t mess up the main blog) and on there it is a normal size! It is the same image. It is the same image location address. I just don’t get it!

    If you have any other questions just ask, I will answer best I can.

  57. says

    Do you know that I L_O_V_E you, I really, really do!!!! I can’t tell ya how long I’ve been trying that stinkin’ button upload thingy from a billion tutes, and no one ever said to delete and reenter those darn little “quotation marks” and I don’t blame them ’cause who would’ve thought of that?–you that’s who!!!

    Happy Wednesday!
    Thanks A Billion Bunches,
    Nicole
    localsugarhawaii.com

  58. says

    I have successfully made a couple of different blog buttons thanks to you!!! I have a question. I need to link to a specific post I would like to use a custom designed button to do that. How do I then code that button/box/artwork so that when someone clicks on that button it takes them to a specific page or post. Hope that makes sense. Maybe there is some other terminology I need to search this. I did a couple of searches and I can’t seem to get the specific answer I need. It is so simple as copying and pasting that post/page location where I put my generic site(www.mysite.com) info for the button? Maybe I am making this too hard……………Thanks in advance!!!!

  59. says

    WOW… Something in my blogging experience that actually worked on the first try. How crazy is that?! Thanks Amy!!

  60. says

    Hi Amy,
    I must be doing something wrong. I can only see 5 quotes to change, and it is still not showing up correctly on my blog. I am so frustrated! Can you please help!

    Thank you!!

    • Amy says

      Go ahead and erase the widget you pasted the code in and start again. This time, don’t worry about changing the quotes and see if it works. Also, make sure you’ve got the right URL for your image. Check it first by pasting the URL into your address bar at the top of your screen and see if it comes up. If it doesn’t, you know it’s a problem with your image URL. I hope that helps!

  61. poonam says

    hi amy.. i have a blog with wordpress , its like xxx.wordpress.com . can i make a blog button for myself? i tried login in at wordpress.com but i cudnt find the C panel or file manager. Pls help.

    • Amy says

      Unfortunately you have a lot less flexibility on a wordpress.com blog (as opposed to a self-hosted wordpress blog) so that’s why you didn’t find a cpanel or file manager. I think you might be able to still have a button but you’d have to host the image at a site like Photobucket (anyone know for sure)?

  62. says

    I tried several different tutorials, but this is the one that worked (I think it was the tip to erase the quotation marks and add them back in?)

    Thank you so much for taking the time to write this!

  63. says

    Thank you so much for this great tutorial. I was easily able to to add our blog button and code to our site!

  64. says

    Hi Amy! Thanks so much for this tutorial. I’m trying to create a button for a fundraiser project that I am working on with several other bloggers. I am struggling with how to do this in blogger. I have the photo created from picnik that part was super easy and clear. The rest of this I’m getting confused on – can you help? I know you said to use it as a gadget but I’m not sure what type of gadget – photo, html text? Thanks for your help.

  65. says

    HELP! I use blogger so I can’t do it exactly like you. But I put it as a gadget and it works but doesnt show my image…….Can I not use an image from flickr and put that path in the place of your image path????? Please give me some ideas.

    • Amy says

      Yes, absolutely. I only ask that you provide just a snippet and direct people back here to read the post in full. I’m always very grateful for links back to BWA. Thank you, Jill!

  66. Tanya says

    Thank you Thank you Amy! I felt so silly that I couldn’t figure it out but it worked! I don’t know why I’m so suprised! Thank you Thank you!

  67. says

    Thanks a million Amy, I’m a new blogger and your tips have been great. I just added my button and learned how to access my file manager! I may change the button later, but for now I have one at least. Plus, now I know how to do it! Yeah.

    Karen Shirlin

  68. Tanya says

    Hey Amy,
    I’m sorry, but I am confused by what you mean when you say in the Sub Step for the Button Widget to delete the quotes and then re-type it. I guess I don’t understand what “it” is or what I need to re-type after I delete the 6 quotation marks.

    • Amy says

      Sorry to be confusing. You’ll delete the quotation marks in the code you pasted and then retype them in just exactly where you took them out. You just have to retype them in order to make them un-smart. :) I hope that helps!

    • Amy says

      I see you have a Blogger blog so you’ll have to host your image somewhere like PhotoBucket. Once you upload it there, you should see an option for the image URL.

  69. says

    Amy I think I must not be clear on posting the code with the photo. I’m not even sure I like how my photo turned out. Does it have to be a square? If not I might just use my logo. If so then I cropped a photo and added some verbage. I seem to keep having a brain warp everytime I read this. Can you help me? I’d like to get this up before Picnik goes down.

    • Amy says

      I definitely recommend you make it a square, and specifically, 125 x 125 pixels. That’s standard blog button size.

    • Amy says

      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!

  70. says

    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!

  71. says

    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?

    • Amy says

      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.

  72. says

    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!

  73. says

    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*

  74. says

    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!

  75. says

    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!

  76. says

    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!

  77. says

    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.

  78. says

    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.

  79. says

    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!

  80. says

    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.

    • Amy says

      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.

  81. says

    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!

  82. Dawn says

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

    • Amy says

      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!

  83. says

    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!!!

  84. says

    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.

  85. Ted V says

    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?

  86. says

    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!

  87. says

    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!

  88. says

    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.

  89. says

    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!

  90. says

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

    • Amy says

      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.)

        • says

          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?

  91. says

    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

  92. says

    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! :)

  93. says

    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 :)

  94. says

    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.?

  95. says

    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.

  96. says

    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

  97. says

    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!

  98. says

    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!!

    • Amy says

      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!

    • Amy says

      Woot! Been there many times myself…makes the feeling of accomplishment a lot greater. Way to go!

  99. says

    *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…!)

    • Amy says

      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. :)

      • says

        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!

  100. says

    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.

    • Amy says

      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!

  101. says

    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?

  102. says

    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!!

    • Amy says

      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).

  103. says

    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 :)

  104. says

    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!

    • Amy says

      Looks good to me! The only thing you should change is the first “https” should be “http”.

  105. says

    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!!

    • says

      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!!!

  106. says

    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.

  107. says

    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!

  108. Ragina says

    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?

  109. says

    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.

  110. says

    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.

  111. says

    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.

  112. says

    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!

  113. says

    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!

  114. Alli says

    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.

  115. says

    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!!

    • says

      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!

      • says

        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?

        • says

          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.

  116. says

    Thank you for the tutorial.. I did get everything up and it looked perfect, but when I tried to see if the code would work if someone copied to paste on their blog, it would not work.. I only had a ? in a blue box. Any idea of what I did wrong?
    thanks so much.

  117. says

    Thanks so much Amy! I’ve been trying to figure out how to do this for years. The button I had figured out, but the “grab my button” box was something I could never do. Love that you walked me through it and I was able to pull it off!!! Thanks so much!

  118. says

    Hello Amy!

    I wonder if you or a reader can clarify something for me. I registered with Istockphoto yesterday. I was looking through the license agreement and noticed this under “Standard License Prohibitions”: 4. use any of the Content as part of a trade-mark, design-mark, trade-name, business name, service mark, or logo; I found the perfect graphic for my facebook fan page and as a possible button for my blog, but I’m afraid to download it and put it in those two places after reading the above. I wrote the business, yesterday, but have heard nothing at this writing. Can anyone enlighten me on this topic? Downloading graphics is all new to me. Thank you!

  119. says

    Wow – THANK YOU! This was VERY helpful and war easier than I thought it would be. I am amazed that something I previously thought was so technical and difficult is really very easy. Your blog is an amazing resource, thanks so much for sharing your passion and knowledge.

  120. says

    THANK YOU! This is awesome- so well-explained and straight-forward. I was nervous getting into my FTP stuff, but I sucked it up and did it. Your blog makes me think that maybe I don’t need to hire a fancy web designer after all, which would save me sooooo much money! Thanks again!

  121. JustJenny says

    Disregard my previous post. I knew there had to be something I was missing because part of it was coming up correctly….I missed one hidden quote. It works great now! your the best.

  122. says

    Thanks for the instructions! This was so much easier than instructions I have used before and it worked great on the first try.

  123. says

    Thank you so much! How do I make the button so that the grab box will show up with the button so others can grab my button from other sites?

    • Amy says

      Not sure I’m trackin’ with ya. If someone wants to put your button on their site, they should be able to grab the code from your site if you completed the steps here.

  124. says

    Amy,

    Awesome! Worked like a charm! I had the code and the pic but couldn’t figure out how to write the grab box. Thanks for the help!

  125. says

    You rock! This tutorial was super easy to follow, and your instructions worked perfectly! I even counted the quotes.

    Smiles,
    -denise

  126. says

    Thank you so much for your help! I’ve wanted to make a blog button for a while now, and your directions on how to create the image were fantastic! I thanked you and linked to your blog on my blog as well. Thanks again!!! :)

  127. says

    WOW! Thank you! I was totally confused until someone asked how to do it through blogger! It worked and I’m so thankful!!! Again THANK YOU SO MUCH!!!!!!

  128. says

    thankyouthankyouthankyou!
    This was awesome and worked so well. I had a ton of fun making buttons. Might have gone a tad overboard, but i had a blast making them!!

  129. says

    Oh my GOSH – thank you!!!! It worked the first time! WOW!

    Next question, how do you aks others to put one on their blog?

    • Amy says

      Way to go! Oftentimes if you just put it in your sidebar with a simple “Grab my Button” heading, others will be inclined to put it on their site.

  130. says

    I designed my button using picnik, and it turned out great. I then uploaded it (after changing to Firefox) on to my public html root menu in my File Manager at BlueHost. I checked. It’s there as a jpg file and looks fine when I “view” it in File Manager. I copied and pasted the following code, and the code box shows up, but there’s no button image, just the name of my site: intentionalhomemaker.com above the code box. What am I doing wrong?

    <a href="http://intentionalhomemaker.com&#034; target="_blank"><img src="http://intentionalhomemaker.com/button.jpg&#034; alt="intentionalhomemaker.com" width="125" height="125" /></a>

  131. says

    Can you tell me what I need to do to have the link open in a new window. I don’t want people leaving my blog but at the same time I want to share the things I like.

    this is the code I have.

    • Amy says

      You can add this to your link HTML: target=”_blank”

      So, a regular link would look like link text so instead it would look like this: link text

      If you’re working in WordPress, you should see a little checkbox or dropdown menu (depending on what version you’re using) that allows you open the link in a new window.

  132. tara says

    i have tried to figure this out and still having trouble
    i have put my image in the public root and in the html file and still can’t get the picture to come up

    this is what i have
    <a href="hillbillysavings.com" target="_blank"><img src="hillybillysavings.com/button.jpg" alt="hillbillysavings.com" width="125" height="125" /></a>

    not sure what i am doing wrong

    • Amy says

      First, it looks like you’re missing the “http://” part of your URL in your image (img src) tag. It also looks like you used “hillybilly” instead of “hillbilly” in that same URL. Change those two things and I bet you’ll be good to go.

      • tara says

        I changed it and it worked. Thank you so much. You look at it so much and don’t realize what it wrong it. Thanks for looking at it and letting me know. It was so simply and I was trying to make it so hard

  133. says

    Amy, I can’t tell you excited I am that I finally got this! (I’m so slow….it took me most of the day!) I’m on to do the favicon! THANK YOU, THANK YOU, THANK YOU!

  134. says

    Thanks so much Amy. I just did this successfully! Woo hoo. I really appreciate you posting this.

    I wanted to share a tip for creating the blank canvas background…
    I wanted a white background, but didn’t have any images that were suitable for that. So I just got on Picasa and created a collage with one photo (any photo), then cropped a square out of the blank area. I resized when exporting.

    I was then able to open it and work with a 125 x 125 blank square!

    You can also change the background color on collages in Picasa, so it would work to make any color blog button you want!

    (I hope that makes sense).

    I’m sure plenty of people have figured this out already. . . it took me forever :)

  135. says

    I am so glad I found this. I’m on a WP.com blog and until tonight the only way I could add a button was to have the code in a post and have that link in the side bar. Now the people featured in my weekly recipe link love list can grab a button if they’d like.

    You rock Amy!

  136. says

    Having noticed the blog button on many blogs, I was keen to do one for myself but didn’t know where to find help. When I googled, I found this site at the top of search results; I didn’t have to look beyond, But what’s even more amazing is that there are so so many tutorials and I am hungry for such material. I have added this to my Blogroll. I’m sure to e coming back here regularly. Thanks so much.

  137. says

    My grab box appears okay, but the picture is just a red “X”. What am I doing wrong? I really appreciate all of your tutorials!

    • Amy says

      Hi Janice,

      I’m sorry I’m a bit late respond to your question here, but it looks like in the meantime you must have figured it out — it’s working for me! Way to go!

  138. says

    hi! This just helped me SO MUCH.
    I have been wanting to have a button and grab box for at least two years if not longer, and I just finished it today! There’s another blog that helped too, along this one. I needed both. Here’s the other one.
    http://www.seabirdblog.com/2009/11/hey-bloggers-blog-button-tips.html

    I was able to do it all for free and I am proud of myself for being able to apply myself to your instructions and do it “on my own” wee!
    I’ll be recommending this to others who ask, for sure.

    If you read my blog, it’s all about the adoption I’m working on.
    my personal blog is http://stinatree.tumblr.com

    Next step is getting a domain name. but I had to thank you for this first.

  139. says

    I had instructions from another blog and it turned out they only worked for Blogger blogs. My WordPress blog was very sad. Then I found your blog and your instructions, which were SO MUCH EASIER! Now I have my blog button back and all is right with my bloggie world. Thank you for making my Monday a little bit better. :-)

    You are simply awesome!

  140. says

    Amy, you saved the day for me!! Thanks for this post. All others for WordPress were more confusing. This was easier to understand and it worked!!! Yeah!!

  141. says

    I blog using Squarespace, and I got the code all right, I think, but my sister says my page looks messed up because a box didn’t appear around it. Is there any way I can make it look a bit more cleaned up?

    Thank you so much for your help.

  142. says

    So I have these question marks above my button and code. What did I do wrong?

    I also want to thank you for all of your help in starting a blog. You’ve been super helpful.

        • Amy says

          Ah, gotcha. Yes, OK, I see what you mean and I’m seeing that too. What you are seeing are places where images should be loading (where the question marks are). So, it makes me think you’ve got some extra image tags in your code in your gadget. It looks like you might have your flickr image tags in there twice.

  143. says

    My question is my button is done… Now can you click the button and it bring you to that site? or the buttom is just a show piece of sorts? I love your direction by far the best on the inet – a major major major huge thanks

    • Amy says

      If you were able to get the code snippet to work, anyone should be able to paste that code right into their website and it will (a) make your button show up on their site and (b) make your button clickable so that the visitor will be taken to your site. I hope that makes sense!

  144. says

    I have been looking EVERYWHERE for instructions on how to do this!! Thank you so much!

    The only difficulty I’m having is that the image pic that is above the blog button code for users to grab is much bigger than the code box. (I did as you suggested and shrunk the picture to start to 125).

    Any idea what I’ve done wrong?

  145. says

    Thank you so much!
    I had my button allready done and posted, but I couldn’t figure out the code box – You made it so easy, like eating!!!

  146. says

    I’m trying to make one via Blogger but from what I can gather they don’t have a file manager.

    Any suggestions?
    I used Picnik and love the image I came up with but not sure where to go from there…

    • Amy says

      Yes, if you’re using Blogger, the process is mostly the same, but instead of uploading your button image to your server (which you don’t have with Blogger), upload your button image to a service like Flickr or Photobucket. Once you do, take note of the unique file location URL.

      • says

        I’m most definitely a beginner and I’m a bit tech-challenged, and of course, I need help! I’ve created my button, uploaded it to flickr, but now how do I get it on Blogger? Argh…

    • Amy says

      I’m not sure I’m understanding. Do you mean you have to enter an FTP password to view your website at all? Hmmm…strange. I think I recommend contacting your host.

  147. Melissa says

    You just plain rock, Amy! This worked perfectly the very first time!!!! I could dance, but I won’t!

  148. says

    Just found your website..WHOOT! I look forward to gleaning as I am just starting up with my own website. I am in wordpress.com right now, but plan on switching over once I gather readership to .org so I can advertise. In the meantime, I am hoping this will work with .com. I have been able to put up other peoples buttons, so am hopeful.

    • Amy says

      Hi Katie, make sure your original photo is cropped to an exact square before you upload it. That might be the since the code specifies an exact height and width (125px by 125px). I hope that helps!

      And pass some of your fashion expertise over this way, will ya? ;)

  149. says

    Thanks for the awesome tutorial! I wanted to mention that for some reason it wouldn’t show the actual image when I put it in a text box, however I threw it in an HTML box and it worked beautifully :) Thanks so much!

  150. says

    I did it! I did it! I did it, yeah!

    Thank you so much. I have been blogging for months and am ready to beef it up and you are now my favorite!! Thank you, thank you.

  151. says

    Hi Amy, i managed to take the text out above my button but then i tried to copy my button to paste it on my page again to see if it worked and the image doesnt seem to appear. i think i did something wrong. When i use all links exactly as you described it makes a picture above & below with grab box inbetween & text above grab box..i wonder what i could be doing wrong?? please help!! i would love to share my buttons
    Thank you x

    • Amy says

      Hmmmm….well, I’m guessing it might have something to do with the fact that yours is a Blogger blog. I’d google it (“blog button Blogger”) and see if you can hunt down a tutorial! :)

      • Sissy says

        Mine is a blogger blog, and it worked just fine. I am wondering if there is a way to have the grab box beside and not below the picture.

  152. says

    Amy! i am so proud of myself for making a button with your easy directions! i can’t believe i did it! anyway the only problem is it has some writing above my button which i cannot get rid of. Can you help? I copied ur whole paragraph like you said then put my image url in from photobucket & used ‘html’ insert on my blogger account. i just wonder how i can get rid of some writing above my button grab box?
    thank you !!!
    Lou

  153. says

    I need help!!! Yikes… I am so frustrated! I had t change my blog name due to infringement which i was completely unaware of…anywho…I now an trying to change my button and cannot get it to work this time (as opposed to how happy I was the last one I did-see above). Anyway I cannot get it to work this time around. UGH! Help please! TY!

  154. says

    I had someone wanting to post my button on their page, but had no clue as to how to do it??? THEN I found YOU! :) Oh happy day! I cannot THANK YOU enough for this tutorial! I did make many attempts at getting it right but eventually did and feel SO relieved! TY!!!!! I use Blogger for my website and used Picnik to design my logo/button and Photobucket for the URL link. The only change I had to make was using the html widget vs the text widget. Thanks again!!! Check out my button when you get a chance and let me know what you think! :)

  155. says

    Hi Amy, I’ve been blogging for almost 2 mos thanks to your step by step tutorial! I am now creating my grab button, and I feel like I’ve done everything right but it’s not pulling in my logo. I could swear I have it in my root directory, but how do I know for sure why it’s not pulling it up?

    You can see on my home page what it’s doing. Thanks for any advice!

    • Amy says

      Hi Ann-Marie,

      Well, I checked it out and it seems to be working. I’m hoping that’s because you were able to figure it out!

  156. says

    Oh. My. Gosh. I did it! *squeal* But not too loud of a squeal because I’m up before the kids, and they don’t know mommy is already hard at work learning how to write HTML from a lovely lady named AMY :) If they knew, they might get up, climb in her lap, drink her coffee and try to write their own HTML (aka: gagagoogoolkdjalfjoiugoiwgkjls) Thanks so much! Namaste!

  157. says

    Thank you! Thank you! Thank you! I had been trying to figure out how to make a blog button and could never get it to work! I am so glad I stumbled onto your blog & I’ll be reading even more of your posts soon! :)

  158. says

    Clearly I have problems because although I uploaded my pic to the directory (didn’t even know I HAD a directory before) I can’t figure out what the correct url is for that image link now. And I’ve tried EVERYTHING.

    Help please???
    Lisa-Jo

  159. says

    Wow! Thank you so much for writing this is! I have always wondered how to do the coding after you make the button and you broke it down so simply!

  160. says

    Thank you, thank you, thank you! I’ve wanted to add buttons for a while now, but didn’t have a clue how to do it. Your instructions were easy to follow and worked beautifully!

  161. says

    Thanks for this tutorial! It worked for me today, although it took me about 2 hours or so and I had to call in my dd for help. Anyway, thank you!

    • Amy says

      You’re welcome! Glad it worked for you.

      Yeah, 16×16 pixels isn’t a lot of space. I recommend just doing one simple letter or basic graphic for a favicon. Otherwise, like you said, it’s tough to see!

  162. says

    Wow that was easy! And I just love Picnik. I created a basic button for now (it’s almost 1:00am!) but tomorrow im adding the grab box. Thank you so much.You are in my reader for sure!

  163. says

    I cannot I accomplished this the 1st time with your help. I been trying to do this for a week using other sites. You are a doll! Thank you so so much. I’m going to tell everyone about you.

  164. says

    Thank you so much for this most wonderful post. The steps were very easy to understand and I was able to upload mine with few mistakes but easy to correct. I am a BIG fan!

  165. Nelda says

    Thank you! You really empowered me to figure something out on my own instead of relying on my IT guys to do it all. Thanks so much Amy!

    Best,

    Nelda

  166. says

    Wow, I totally need this kind of step by step. I will have to come backwhen I have the chance. 11:30 at night is probably not the best time. But then again all the kids are asleep…
    I just might have to subscribe now

  167. says

    This is great, Amy! It worked! I am loving your tutorials. What a great resource.

    Is there a way to put the text box next to the image, instead of underneath?

    Thanks so much!
    Blessings,
    Michele

  168. says

    I just wanted to mention that since I don’t have a permanent logo image yet, I used cooltext.com to create the image for my button. It was very easy and quick to do!

    Hope that’s helpful for someone. :-)

  169. says

    Wow, I totally need this kind of step by step. I will have to come backwhen I have the chance. 11:30 at night is probably not the best time. But then again all the kids are asleep…
    I just might have to subscribe now

  170. says

    Oh my, that made my head hurt. Not b/c of you–your instructions are very neat and detailed!! I would love to create this, but I would probably need an entire kid-free day just to sit down and understand how to go about applying everything! I am going to bookmark this, and hopefully I will be able to make sense of it all one day. :)

  171. says

    I just started following your site as I work on improving my blog. I noticed the grab box on someone else’s site today and wondered how they did it, because it made it so easy to include their image in a post I was working on.

  172. says

    Thanks SO much for this. I know this post took a lot of time – and I really appreicate it. Printing it now to do later – *Blessings*

  173. says

    Thank you so much for all your tips. I just installed my grab box. I tried a few months ago following some other instructions and the grab box did not work. These instructions were so easy to understand and use. Thanks a bunch!

    • Amy says

      You would change the width and height values (but only the first ones, not the second).

  174. says

    Amy, thank you so much. I have used other tutorials that were way off base and didn’t include everything you did. I am so glad you addressed this. Mine was successful. (finally!) If you haven’t been told today that you are awesome, let me be the first :) Come check mine out and see how it turned out!

  175. says

    Great tutorial Amy .. I’m trying to sort out a few buttons right now. But a question – I’m not sure if this is displaying correctly in my browser (at first I thought it was just the feed) but the code that is displaying is, I think littered with extra code like &#34. Is this correct? Also why is the width 123 px and the height 125 – why are they different? Just curious.

    • Amy says

      Mandy,

      It looks like you did it right. There’s only one small mistake in your code. Instead of you have . You need to change the “n” to an “m” and it should work fine.

    • Amy says

      Oh, forgot to add, the reason the width is 123px and the height is 125px in that one part of the code is because otherwise, your button and your grab box would not be the same size. The 123px allows for a 1px wide border on each side, thus making the grab box a total of 125px.

  176. says

    Thanks, Amy! I’ve been wondering how this was done!

    I am getting ready to launch a blog and have been following your step-by-step guide. It has been so helpful! Thank you for sharing your expertise with us!