Amy Lynn Andrews

I share tips, tools and tutorials for blogging, making money online, productivity and social media.

  • Useletter
  • Knowtbook
  • Contents
  • Blog
  • About
  • Contact

How to Make a Blog Button

Updated January 22, 2016

Many people have asked me how to make a blog button. In this post we’ll talk about blog buttons, how they’ve changed, my top 2 blog button tips and how you can create one, or shareable graphics in general.

How to make a blog button with a grab box

The history of blog buttons

Blog buttons used to be quite popular, especially before social media came on the scene (circa 2010; this post was originally published in May of 2010). They aren’t quite as common today, but you can still find them around the web. Here’s an example of Money Saving Mom’s blog button at the bottom of her sidebar.

Money Saving Mom blog button

The idea is, a visitor can copy the snippet of code in the box on the right, paste that code into their own site and the button (on the left) will automagically appear in their own site.

When to use blog buttons

Before social media, displaying someone’s blog button on your site was a way to show your support of that particular blog. Social media has now given site owners other ways of professing their like of other blogs and websites, via the Like button, favorites, hearts, etc.

Even though blog buttons as we knew them aren’t as common as they once were, the idea of providing a graphic for your visitors can come in handy. For example, perhaps you are running a promotion or launch of a product, or you want to provide graphics for your affiliates. That is one time you might provide that snippet of code so others can easily display your graphics on their sites.

Pros & cons of blog buttons

I do recommend always making your own graphics others can use when a graphic is called for. That way, it’s convenient for those who are promoting for you, but most importantly, you can keep your branding consistent.

Related: My Top Branding Tips

One thing to keep in mind, though, is that when you provide your own code for this purpose, you are hosting the image yourself. This means every time your graphic is loaded onto someone else’s website, your hosting server is being pinged. Depending on how much traffic that other site receives, that could be a lot of load on your server.

The other option would be to provide your own graphics, but instead of providing the snippet of code for others to use, encourage them to download your image and upload it to their own site as they would any other image. The benefit here is that they are hosting your image on their own server and not yours. Assuming your graphic isn’t huge in size, this shouldn’t be an issue for them. The con to this approach is that some people won’t go through the steps of doing it themselves. Copying and pasting code is quicker and easier.

Related: 10 Blog Design Dos & Don’ts

Let’s assume you want to create a graphic or button for others to use.

My 2 top blog button tips

  1. Make it interesting.
  2. Include a very clear call to action (or a very enticing title).

Instead of including just your logo or blog name, make your blog button something someone will want to click. Make it mean something. Be creative. Intrigue them.

Blog buttons and similar-sized ads are a dime a dozen these days. People like images, but they like images that speak to them and don’t just advertise something.

Make someone curious. Make them wonder what’s behind that button of yours. And make it super clear exactly what they should do next (like, include words like “Click Here”).

In short, make your blog button more than just, “Here’s the name of my site. The end.”

Related: How to Create a Call to Action: 6 Tips

What size should your graphics be?

A common size for a blog button is 125 x 25 pixels. Other graphics come in all shapes and sizes and are used in various ways. For example, you may create graphics consistent with Google Adsense ad sizes for affiliate promos.

Just for reference, optimal image dimensions for various social media images vary and change. There are also many, many sizes for profile photos, cover photos and more. Here are the dimensions I am currently using for my basic graphic creation (w x h, in pixels):

  • Pinterest: 735 x 1102
  • Facebook: 1450 x 725
  • Twitter: 1450 x 725
  • Instagram: 1000 x 1000
  • YouTube (thumbnail): 1280 x 720

Do you want a grab box too?

Once you make a button, 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. A grab box allows a visitor to copy the code in the grab box and paste it into their own site and your button shows automagically.

Blog button how-to

In order to do this you need to:

  1. Create an image, 125px by 125px in this case (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 your graphic or button

To create your button, you can use either an existing image as your base, or you can start one from scratch.

I recommend you use Canva or PicMonkey to create your button.

Both provide templates & tools to help. You can also create an image with your own dimensions. For this tutorial, we’ll use 125 x 125. So, you would click the link that says “Use custom dimensions” and enter 125 by 125.

Next, design your button. I’m not going to go into the hows of design here. Canva’s Design School has a lot of tutorials as does a quick Google search.

In its most simple form, you’ll use the options on the left to upload a photo as your image background or choose a color for the background and then you’ll add text. (Remember my 2 tips above.)

Once your design is done, download it to your computer using the download option in the top right of your screen. You’ll want to publish as an image. It should automatically be downloaded to your computer. Make sure you rename it appropriately. I talked about naming your images here.

Now you’ve got your image.

2. Upload your image to your server

The easiest way to do this is to add your new image to your WordPress Media Library. Do this by going to Dashboard –> Media –> Add New.

Add media to WordPress Media Library

Upload your image and take note of its URL.

To find its URL, go to Media –> Library. Click on the image. In the widow, you’ll see the image URL on the right. Copy that URL. The whole URL won’t be visible, so make sure you copy the whole thing.

Media Library image URL

Alternatively, you can follow the instructions in How to Access Your File Manager or How to Use FTP to upload your image directly to your server (i.e. outside of WordPress).

It doesn’t matter a whole lot where your image is stored, as long as you know its URL.

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>

Basically, it’s just the HTML for a clickable image.

  • The <a href=”…”></a>” portion indicates a hyperlink and is the page you want someone to land on when they click your button.  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.

Make sense? If not, read my post How to Make a Clickable Image for more explanation.

4. Display your button & grab box on your site

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 widget (box) that says “Text” into your sidebar (your sidebar options may be set up differently from mine in this photo but same idea):

How to put a text widget in your sidebar

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

Related: How to Use WordPress Widgets

Putting the HTML code in a widget

The code you will paste into your text widget consists of two parts:

  1. Your image (on the left from Money Saving Mom’s image above).
  2. The grab box (on the right).

Highlight and copy the entire next paragraph into your text widget.

<img src=”YourButtonImageURL” alt=”YourSiteTitle” /><div style=”width: 125px; height: 125px; overflow: auto; border: 1px solid #666666;”>&lt;a href=&#34;YourSiteDomain&#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>

Once it’s in there, you need to replace the text placeholders with your own information.

Below are examples of the replacements you will make in the above code. Do not touch or change any quotes or weird characters. Simply highlight the exact phrase as shown below and paste your information just like they are written here in my examples:

  • YourButtonImageURL (2) = https://amylynnandrews.com/ex-button.jpg
  • YourSiteTitle (2) = Amy Lynn Andrews
  • YourSiteDomain (1) = AmyLynnAndrews.com

Troubleshooting tip

If you copy the code above, change the phrases as indicated and paste it into a widget but it doesn’t work, it could be that you are falling victim to smart quotes. (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 try this to make your code HTML-friendly:

  1. So you copied the above code.
  2. You pasted it into a text widget.
  3. Now, once you’ve pasted it in your widget, very carefully delete every quote (“) and re-type it. If you see double quotes, turn it into a single quote. 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!

This post is part of Works for Me Wednesday.

Pin
Share
Tweet
+1
Share
Stumble

Filed Under: Nuts & Bolts

P.S. Got information overload?

I can help. I wade through the internet, find the best stuff and put it in a short, regular email called the Useletter®. It’s free.

Comments

  1. Beth says

    April 19, 2014 at 2:23 pm

    Awesome post! You made things really easy, thanks!

  2. Kristi says

    April 2, 2014 at 9:34 am

    Thank you SO much for sharing this!!! From other comments, it seems I was very lucky that this was the first tutorial that I tried … it worked seamlessly! Here’s a link in case you’d like to check it out:
    http://makingitinthemountains.wordpress.com/

  3. Keating-Mariee says

    February 19, 2014 at 9:12 am

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

  4. Heather says

    February 10, 2014 at 2:56 pm

    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!

  5. Janelle Knutson says

    February 6, 2014 at 2:45 am

    It worked!!!!!! Thank you for taking the time to make this blog button tutorial. It was so easy to follow! LOVE your website!

  6. Heather {Woods of Bell Trees} says

    January 31, 2014 at 11:03 pm

    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!

  7. Samantha says

    January 7, 2014 at 10:25 pm

    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?! : /

  8. Amanda says

    October 25, 2013 at 2:18 pm

    I have tried several other tutorials today and yours is the first one I managed to make work! Thanks so much!

  9. Morgan says

    October 23, 2013 at 7:14 pm

    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

    • Amy says

      November 11, 2013 at 5:01 pm

      Glad it was helpful, Morgan. 🙂

  10. Sissy says

    September 21, 2013 at 8:26 pm

    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

    • Amy says

      September 23, 2013 at 2:44 pm

      Hi Sissy,

      Just rename your image on your computer before uploading it to your blog. 🙂

  11. Yepi kizi says

    July 27, 2013 at 2:06 am

    Thank you so much! I did it! I would like it have the two buttons side by side, but this is good for now.

  12. kizi games online says

    July 25, 2013 at 9:16 am

    I would like to say that this article really convinced me, you give me best information!

  13. friv says

    July 8, 2013 at 8:18 pm

    You share a great writer, I really appreciate this article. Thanks for nice article.

  14. Christina says

    July 7, 2013 at 9:53 pm

    Great tutorial Amy! More power!

  15. Tammy Doiel says

    July 4, 2013 at 12:22 am

    Thank you so much! I did it! I would like it have the two buttons side by side, but this is good for now.

  16. Yun Kelly says

    June 27, 2013 at 8:26 am

    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

  17. kizi games online says

    June 20, 2013 at 4:28 am

    thanks to your post, I have a hard time with your post it made ​​me realize so many things to thank you very much.

  18. Jillian says

    June 14, 2013 at 6:10 pm

    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!

    • Amy says

      June 14, 2013 at 10:19 pm

      🙂

  19. friv 3 says

    June 13, 2013 at 3:40 am

    Thanks a lot. I like your blog.

  20. friv says

    May 17, 2013 at 10:40 pm

    Thanks for giving me the useful information. I think I need it. Thank you

  21. Ally says

    May 2, 2013 at 4:14 am

    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

  22. Sheila Knapsack says

    April 29, 2013 at 2:54 am

    Thanks! Great stuff!

  23. renee says

    April 24, 2013 at 10:39 am

    Thanks Amy, since the new blogger my old button code would not work. Your code does 🙂
    Blessings,Renee

    • Amy says

      April 24, 2013 at 7:18 pm

      Yay! Glad to hear it, Renee.

  24. Caitlin says

    April 16, 2013 at 10:39 pm

    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!

    • Amy says

      April 17, 2013 at 7:14 am

      You’re welcome, Caitlin! Glad it worked.

  25. Elizabeth says

    April 16, 2013 at 6:23 pm

    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!

    • Amy says

      April 17, 2013 at 7:15 am

      I would put a text or link widget (called a “gadget” in Blogger I think) in your sidebar.

  26. gazo2 says

    April 10, 2013 at 4:09 am

    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!

  27. Pam - Housewives of Frederick County says

    April 4, 2013 at 11:57 am

    Yay! It worked! It was painful, but it worked.

    Thank you so much. I’ve been wanting to do this for months.

  28. Jemma Taylor says

    March 13, 2013 at 6:07 am

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

  29. Megan @ Allergy Free Alaska says

    March 6, 2013 at 1:15 am

    I just made a author bio badge for my site and I feel like a rockstar!! Amy, you’re amazing! Thank you so much for this!
    Hugs from Alaska!
    Megan

    • Amy says

      March 6, 2013 at 4:09 pm

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

      • Megan @ Allergy Free Alaska says

        March 7, 2013 at 12:25 am

        Ha ha ha!! I would much rather deal with the cold than the heat (I’d melt). You’ll have to come visit us sometime… in July! 😉 The snow should be gone by then. LOL

        • Amy says

          March 8, 2013 at 5:54 pm

          Sans snow only in July?? Oh my, Alaska would not be for me. Give me 100+ degrees any day! 🙂

  30. Girl Games says

    February 22, 2013 at 1:39 am

    Thanks so much for this tutorial. I feel like a computer whizz now worked after a few errors on my part!

  31. kizi 4 says

    February 22, 2013 at 1:37 am

    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.

  32. Jill says

    February 8, 2013 at 6:38 am

    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

    • Amy says

      February 8, 2013 at 7:45 am

      Way to go, Jill!

  33. Naomi Edwards says

    January 31, 2013 at 5:41 am

    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>

    • Amy says

      February 5, 2013 at 8:14 am

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

  34. Kaylynn Young says

    January 29, 2013 at 8:57 am

    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

  35. Ava says

    January 28, 2013 at 9:49 am

    Thanks so much for this tutorial. I feel like a computer whizz now 😉 worked after a few errors on my part!

    • Amy says

      January 28, 2013 at 11:23 am

      Way to go, Ava! You are a whizz–I concur. 🙂

  36. Robin says

    January 24, 2013 at 1:17 pm

    Ugh. I’ve tried this several times. I get the code showing, but no button. Am I missing something? Here is my code:
    <a href="http://robinjonesgifford.com&#034; target="_blank"><img src="http://robinjonesgifford.com/Blog-Buttom.jpg&#034; alt="robinjonesgifford.com" width="125" height="125" /></a>

    I am off to upload your button to my site. It’s the least I can do for all you do for us!
    Robin

  37. Katie @ PensamientosFromParadise says

    January 14, 2013 at 12:18 am

    Amy! your site has been a HUGE help to me in changing over to WordPress! I finally got a button on there today too! Whoo Hoo! Thanks so much for all your hard work in putting these tutorials together. They are great!

    • Amy says

      January 15, 2013 at 7:55 am

      You’re so welcome! Glad it’s been helpful, Katie. 🙂

  38. Karin says

    January 13, 2013 at 9:08 pm

    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.

    • Amy says

      January 15, 2013 at 7:56 am

      Woohoo! So glad you got it to work, Karin.

  39. Carina says

    January 13, 2013 at 10:46 am

    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.

    • Amy says

      January 15, 2013 at 7:53 am

      Way to go, Carina!

  40. Barb says

    January 3, 2013 at 12:29 pm

    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.

    • Barb says

      January 3, 2013 at 12:34 pm

      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.

  41. [email protected] Paper Realm says

    December 31, 2012 at 12:54 am

    After looking at like 5 different blog posts on this, yours finally made sense!!! THANK YOU!

  42. jana says

    December 29, 2012 at 4:31 pm

    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.

  43. Jenni says

    November 28, 2012 at 3:13 pm

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

    • Amy says

      November 29, 2012 at 8:19 am

      Thank you, Jenni. I appreciate it. 🙂

  44. Bonnie @ the pin junkie says

    November 18, 2012 at 11:46 pm

    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?

  45. Pricilla J. Designs says

    November 12, 2012 at 7:58 am

    This really worked and I’m thrilled! I feel so empowered now. Thank you!

    • Amy says

      November 12, 2012 at 11:27 am

      You’re welcome, Pricilla!

  46. Kali says

    November 11, 2012 at 1:20 pm

    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!

    • Amy says

      November 12, 2012 at 11:22 am

      Yay, glad it worked Kali!

  47. [email protected] notconsumed says

    November 9, 2012 at 3:56 pm

    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?

    • Amy says

      November 12, 2012 at 11:04 am

      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.

  48. Monica says

    October 25, 2012 at 10:50 am

    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!

  49. Marisa says

    October 22, 2012 at 3:21 pm

    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?

    • Amy says

      October 23, 2012 at 7:58 am

      Hi Marisa, I’m thinking you may have figured this out because it seems to work for me??

  50. [email protected] says

    October 19, 2012 at 3:12 pm

    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.

    • Amy says

      October 19, 2012 at 4:17 pm

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

  51. Nick Wilford says

    October 8, 2012 at 5:47 pm

    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 🙂

  52. Friv says

    September 26, 2012 at 10:16 pm

    May I reference some of this on my website if I include a backlink to this web page?

    • Amy says

      September 27, 2012 at 8:00 am

      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!

  53. Angela Mackey says

    September 19, 2012 at 8:21 am

    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

      September 19, 2012 at 8:32 am

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

      • Angela Mackey says

        September 19, 2012 at 9:14 am

        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

          September 19, 2012 at 9:41 am

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

          • Angela Mackey says

            September 19, 2012 at 12:12 pm

            I guess I was too smart for my own good? My browser last week didn’t actually show your code for the box, but showed the box itself. So I started tweaking things from the beginning. Mistake. Thank you for all your help!

          • Amy says

            September 19, 2012 at 5:07 pm

            You’re welcome, Angela!

  54. Cobilynn says

    September 16, 2012 at 5:53 pm

    YOU ARE A LIFESAVER!!!! THANK YOU! THANK YOU! THANK YOU!

    • Amy says

      September 18, 2012 at 7:57 am

      You’re welcome, Cobilynn!

  55. Angela Mackey says

    September 7, 2012 at 6:44 pm

    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?

  56. Laini says

    September 3, 2012 at 3:48 pm

    Thank you so much! It was easy to follow, and I just made my first blog button. Yay me!

    • Amy says

      September 3, 2012 at 7:03 pm

      Way to go, Laini!

  57. j.ajabad says

    August 29, 2012 at 1:20 am

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

  58. Claudia says

    August 20, 2012 at 2:12 am

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

  59. Jessiac says

    August 14, 2012 at 4:52 pm

    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!

  60. Devin @ Nom Yum & Free says

    August 9, 2012 at 5:39 am

    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!

    • Amy says

      August 9, 2012 at 11:09 am

      So glad it was helpful, Devin! Thanks for stopping by and sharing.

  61. Diana says

    July 30, 2012 at 12:40 pm

    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?

  62. Anja says

    July 30, 2012 at 11:00 am

    Thanks for sharing this great tutorial! I’ve linked to it in my post about blog re-redesigning (don’t want to promote myself, but lots of bloggers seem to want to see the post they’ve been linked to, so here’s the link: http://cocalores.blogspot.de/2012/07/tutorials-ans-ressources-for-your-blog.html). xo Anja

  63. Capability : Mom says

    July 29, 2012 at 9:04 am

    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!

  64. Rachael says

    July 25, 2012 at 9:27 pm

    Thank you! This was perfect!

  65. Tiffany says

    July 25, 2012 at 2:29 pm

    Thank you so much for this! It was very detailed and the instructions were easy to follow.

  66. Stacey-Lee says

    July 19, 2012 at 1:54 am

    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 😀

    • Amy says

      July 19, 2012 at 7:51 am

      So glad it worked, Stacey-Lee!

  67. Kara says

    July 14, 2012 at 11:47 am

    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!

    • Amy says

      July 14, 2012 at 6:50 pm

      Woohoo! I’m so glad it worked for you Kara. 🙂 Way to go!

  68. Beth Crumpler says

    July 13, 2012 at 4:41 am

    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

      July 13, 2012 at 10:41 am

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

  69. TB says

    July 2, 2012 at 7:09 pm

    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

      July 3, 2012 at 1:40 pm

      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!

  70. Dana says

    June 30, 2012 at 12:52 pm

    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.

  71. Emily Walker says

    June 29, 2012 at 10:44 am

    It worked perfectly! Thank you for the help!

  72. Yogamama says

    June 21, 2012 at 12:59 am

    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!

  73. Stephanie says

    June 20, 2012 at 12:42 pm

    Amy,

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

    Steph

  74. Gina at CampClem says

    June 20, 2012 at 10:19 am

    Amy,
    Googled to find this, and it is a perfect tutorial! Yippee!

    Hope it works for me! Thanks!
    g i n a

  75. kassie says

    June 12, 2012 at 8:32 pm

    Thanks so much! this was really helpful.

  76. jennifer fay says

    June 10, 2012 at 4:29 pm

    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.

    • Amy says

      June 11, 2012 at 1:45 pm

      You mean something like this? 🙂

  77. baja ringan says

    June 2, 2012 at 9:36 pm

    Hi Amy,
    Great tips, I like your way to explain it, helpull, thanks Amy

  78. friv says

    June 1, 2012 at 5:19 am

    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.

  79. Missy says

    May 31, 2012 at 11:54 pm

    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.

    • Amy says

      June 1, 2012 at 4:35 am

      Yes, you can host it on your own server.

  80. Dawn says

    May 30, 2012 at 6:40 pm

    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.

  81. jenifer Cuttill says

    May 30, 2012 at 1:36 pm

    Hi I have the link this is what it looks like
    <a href="http://crazyforcouponsandfreebies.com&#034; target="_blank"><img src="http://crazyforcouponsandfreebies.com/button.jpg&#034; alt="crazyforcouponsandfreebies.com" width="125" height="125" /></a>

    But when I post it as a text widget I get no picture only text do you know what I am doing wrong?
    Thanks

    • Amy says

      May 31, 2012 at 4:37 pm

      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://….

  82. Cathy says

    May 30, 2012 at 6:41 am

    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!

  83. Leah says

    May 23, 2012 at 9:07 pm

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

  84. Patty says

    May 23, 2012 at 8:12 pm

    Um, Amy? If you click on the Link to Picknik, it says it has moved over to Google…now what?!

    • Amy says

      May 23, 2012 at 9:08 pm

      Hi Patty, thanks for letting me know about that link (I changed it now). Try here.

  85. JennyRain says

    May 20, 2012 at 3:15 pm

    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

  86. Ravenous Biblioworm says

    May 12, 2012 at 11:56 pm

    and ignore my question… their button will link back… but the picture above the grab box won’t link…. i see now… 😀

  87. Ravenous Biblioworm says

    May 12, 2012 at 11:45 pm

    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.

  88. Megan Lawing says

    May 8, 2012 at 2:11 pm

    This was so helpful! My blog button is there because of you! Thanks!

    • Amy says

      May 10, 2012 at 4:40 pm

      Way to go, Megan!

  89. Abby Murphy says

    May 1, 2012 at 2:17 pm

    Thank you! Been trying for a month!

    • Amy says

      May 2, 2012 at 6:20 am

      Way to go, Abby!

  90. Gabriel H says

    April 30, 2012 at 9:03 pm

    Thank you so much for this excellent tutorial. You can see the result on my website! 🙂

  91. Elizabeth says

    April 30, 2012 at 12:00 pm

    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

      April 30, 2012 at 3:52 pm

      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.

  92. Beth Huntington says

    April 21, 2012 at 8:37 am

    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

  93. Amanda Throckmorton says

    April 19, 2012 at 9:14 pm

    Thank you so much I just made my official button. HORRAY!!! Hope you stop by and see my button it’s my knockroses with a few sticker butterflys.

  94. Briana says

    April 12, 2012 at 10:11 pm

    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!

  95. Cassandra Hart says

    April 12, 2012 at 9:51 pm

    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.

  96. Dorset Finca says

    April 12, 2012 at 1:32 am

    Thank you so much… a great tutorial and now we have a lovely button!

    • Amy says

      April 12, 2012 at 4:18 pm

      Glad it worked for ya!

  97. Nicole says

    April 11, 2012 at 12:30 pm

    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

    • Amy says

      April 12, 2012 at 4:10 pm

      You are very welcome and I’m glad I could fill in that little missing piece for ya. 🙂

  98. Kendra says

    April 9, 2012 at 8:01 pm

    Hi Amy, I have a question, what program do we use now that picnik is closing?

    • Amy says

      April 10, 2012 at 9:05 am

      I’ve got a couple listed here.

  99. Bridget says

    April 3, 2012 at 4:49 pm

    Great tutorial and website –Thanks!

    • Amy says

      April 4, 2012 at 3:59 pm

      Thank you Bridget.

  100. Leslie says

    April 1, 2012 at 8:28 pm

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

  101. Amy Shaughnessy says

    March 27, 2012 at 2:15 pm

    I was totally freaked out at having to do this but I did it with no problems. Whew!

    Amy

    fashionandbeautyfinds.blogspot.com

  102. Lindy says

    March 27, 2012 at 9:48 am

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

    • Amy says

      March 28, 2012 at 11:51 am

      Yay! Glad it worked.

  103. Mallory Mcshane says

    March 21, 2012 at 1:18 pm

    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

      March 21, 2012 at 4:04 pm

      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!

  104. Leah at YourDimeYourTime.com says

    March 20, 2012 at 10:23 pm

    Okay I am not even kidding when I say that you seriously just changed my entire blogging experience. Thank you, thank you, thank you!!!! SO many new possibilities now!

    • Amy says

      March 21, 2012 at 3:55 pm

      You are crackin’ me up but thank you. I’m so glad it helped!

  105. Jackie Paulson says

    March 20, 2012 at 6:53 am

    I have a question? Picnik is closing in April 2012 what site to make photo’s on for our grab button now?

    • Cassandra Hart says

      April 10, 2012 at 10:50 pm

      Hi Jackie,

      The best alternative I have found for Picnik (which I am soooo going to miss!) is a new website called PicMonkey. It has the same basic features which are free, and then some nicer features which, like Picnik, cost a bit. But resizing is completely free, as are some other cool edits.

      Here is the link: http://www.picmonkey.com/

      • Amy says

        April 11, 2012 at 11:12 am

        Thanks Cassandra!

        • Amanda Danae says

          June 20, 2012 at 12:23 pm

          If you have a google email address, you can use their photo editing program. They actually bought Picnik, so it’s exactly the same thing 🙂

  106. [email protected] Snail Pace Transformations says

    March 14, 2012 at 12:12 pm

    I just tired to use picnick and as you probably know they are not taking any new registers since they are closing in April. I guess I will search your site for other sites like this one for cropping photos

  107. Katie says

    March 10, 2012 at 11:20 am

    Hey there, Amy…
    Could you please check out my blog button and see what I’m doing wrong? The code shows up, but the picture doesn’t. It’s on the right hand side of the page:

    http://lifeofahomeschooledteenager.blogspot.com/

    Thanks!

    • Stephanie @ One Sleepy Mom says

      March 16, 2012 at 8:36 pm

      I have the same problem..did you figure out how to fix it?

  108. poonam says

    March 7, 2012 at 11:34 pm

    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

      March 8, 2012 at 12:22 pm

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

      • poonam says

        March 8, 2012 at 3:36 pm

        hi amy, thanks for replying. i uploaded an image at photobucket but the code above just doent seem to work. 🙁

      • poonam says

        March 8, 2012 at 4:16 pm

        GOT IT ! Thanks so so much for the tutorial. 🙂

  109. Jenna says

    March 3, 2012 at 11:32 am

    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!

  110. Mandy says

    March 3, 2012 at 7:31 am

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

  111. Syahirah Yaman says

    February 29, 2012 at 2:17 pm

    Hi, Amy. Nice tutorial you have there. But, I have a little problems. I already made it but, when I try to test the code, I refresh the server, it fill nothing. Blank. Hope you can test my code and solve the problem soon. Thanks.
    http://alittlegirltale.blogspot.com/

    P/S: I used Blogger and Google Chrome server.

  112. Shannon Stubbs says

    February 27, 2012 at 9:03 pm

    Thanks so much! I was on another site earlier and spent hours and didn’t get anywhere. This worked on the first try! FOllowing your blog now. Thanks 🙂

    • Amy says

      February 28, 2012 at 2:23 pm

      Glad it worked for you, Shannon! Thanks. 🙂

  113. Elizabeth says

    February 27, 2012 at 11:29 am

    I got it 🙂 Thanks again!

    • Amy says

      February 28, 2012 at 2:22 pm

      Oh, good job! You beat me. 🙂

  114. Elizabeth says

    February 27, 2012 at 11:10 am

    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.

    • Amy says

      February 28, 2012 at 2:22 pm

      Put it in an HTML Text gadget.

  115. Reggie says

    February 26, 2012 at 11:29 pm

    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.

  116. Jill Wilhelm says

    February 25, 2012 at 3:37 am

    I love this tutorial! You have done a great job! I would love to post about it linking back to you. Is that ok? Thanks!!

    Jill

    • Amy says

      February 25, 2012 at 9:14 am

      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!

  117. Courtney P. says

    February 24, 2012 at 7:27 pm

    Thank you for this wonderful tutorial, Amy! My only question is what site is out there that we can use once Picnik closes down?

    • Amy says

      February 25, 2012 at 9:20 am

      I wrote about that here. 🙂

  118. Tanya says

    February 22, 2012 at 9:01 am

    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!

    • Amy says

      February 22, 2012 at 11:17 am

      Woohoo! Way to go, Tanya. 🙂

  119. Karen says

    February 20, 2012 at 10:34 am

    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

    • Amy says

      February 21, 2012 at 8:17 am

      You’re welcome, Karen! Yes, you can do it!

  120. Tanya says

    February 18, 2012 at 1:09 am

    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

      February 18, 2012 at 11:14 am

      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!

  121. Tina @ TinaInBetween says

    February 13, 2012 at 2:34 pm

    Thanks Amy! This was a huge help to me when I was making my button for my new site! Thanks for sharing!

  122. Vicki Bensinger says

    February 6, 2012 at 8:59 am

    Will Flickr work as a hosting site for my photos?

  123. Vicki Bensinger says

    February 4, 2012 at 4:01 pm

    OK one last thing. I guess I’m not sure how to find the url for my photo. Yes, I use IE:8

    • Amy says

      February 6, 2012 at 8:54 am

      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.

  124. Vicki Bensinger says

    February 4, 2012 at 3:49 pm

    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

      February 6, 2012 at 8:54 am

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

  125. Shanna Schneider says

    February 1, 2012 at 8:38 pm

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

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

    http://www.becauseshannasaidso.blogspot.com

    Thanks Again!!

    • Amy says

      February 2, 2012 at 9:15 am

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

  126. Kate F. says

    February 1, 2012 at 1:28 pm

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

    Thanks Again!

    • Amy says

      February 1, 2012 at 7:02 pm

      You’re welcome. Way to go Kate!

  127. Barbara H. says

    January 31, 2012 at 8:14 am

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

    • Amy says

      January 31, 2012 at 8:40 am

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

  128. Athena at McElrath Cabaret says

    January 28, 2012 at 11:56 pm

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

    • Amy says

      January 30, 2012 at 8:38 am

      Woohoo! Way to go, Athena!

  129. Tami says

    January 25, 2012 at 5:46 pm

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

    • Amy says

      January 26, 2012 at 10:15 am

      Way to persevere! Glad to help. 🙂

  130. Abby says

    January 22, 2012 at 3:01 pm

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

  131. Kathy says

    January 22, 2012 at 7:52 am

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

  132. kelly says

    January 14, 2012 at 9:01 am

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

  133. Leslie says

    January 12, 2012 at 8:05 pm

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

  134. Spoon Fed Baby says

    January 12, 2012 at 5:01 pm

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

  135. Sheila says

    January 12, 2012 at 1:15 pm

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

  136. Anthony says

    January 10, 2012 at 12:38 pm

    Great post!

  137. Donah says

    January 9, 2012 at 8:32 pm

    Thanks so much for the help…

  138. allena says

    January 9, 2012 at 7:50 pm

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

  139. allena says

    January 9, 2012 at 7:49 pm

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

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

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

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

  140. allena says

    January 9, 2012 at 7:46 pm

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

    And thanks, Amy.

  141. Julie Snow says

    January 9, 2012 at 8:38 am

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

    • Amy says

      January 9, 2012 at 10:55 am

      Thank you!

  142. Tamytha says

    January 7, 2012 at 4:10 pm

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

  143. chris says

    January 6, 2012 at 9:25 pm

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

    • Amy says

      January 9, 2012 at 10:45 am

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

  144. Jana says

    January 4, 2012 at 12:41 pm

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

  145. Dawn says

    December 29, 2011 at 12:02 am

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

    • Amy says

      December 29, 2011 at 9:35 am

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

  146. Courtney says

    December 23, 2011 at 11:22 am

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

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

    • Amy says

      December 26, 2011 at 10:21 am

      Woohoo!!!!! Way to go!

  147. Megan says

    December 21, 2011 at 10:28 am

    THANK YOU!! This was super easy!!

  148. Lorilee @ Loving Simple Living.com says

    December 15, 2011 at 2:45 pm

    Love this. Just got it working. … I don’t know what I would do without you 😉

  149. Vicki Bensinger says

    December 14, 2011 at 8:53 pm

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

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

  150. Angie says

    December 10, 2011 at 11:33 pm

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

    • Amy says

      December 12, 2011 at 3:15 pm

      Thanks, Angie! So glad you stopped by and found it helpful. 🙂

  151. Christie says

    December 6, 2011 at 10:44 pm

    So this won’t work for blogspot?

    • Amy says

      December 8, 2011 at 6:16 pm

      It still works. You can insert the info in a gadget.

  152. Ted V says

    December 2, 2011 at 9:03 am

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

  153. Michelle @ Changed By The Maker says

    December 1, 2011 at 1:04 pm

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

  154. Michelle @ Changed By The Maker says

    December 1, 2011 at 11:37 am

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

  155. Michelle @ Changed By The Maker says

    December 1, 2011 at 10:41 am

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

  156. Kristen @ Celebrate Every Day With Me says

    December 1, 2011 at 8:16 am

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

  157. Kim says

    November 29, 2011 at 9:17 am

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

    • Amy says

      November 29, 2011 at 9:34 am

      You’re welcome. Glad it was helpful!

  158. Stocki says

    November 28, 2011 at 2:16 pm

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

  159. {K} says

    November 27, 2011 at 4:36 pm

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

    • Amy says

      November 28, 2011 at 2:41 pm

      Awesome! Glad it worked for you. Thanks for sharing. 🙂

  160. Heather says

    November 26, 2011 at 9:42 am

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

    • Amy says

      November 28, 2011 at 2:02 pm

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

      • Michelle @ Changed By The Maker says

        December 1, 2011 at 4:01 pm

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

        • Darlene says

          December 15, 2011 at 12:09 am

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

  161. Linda says

    November 15, 2011 at 5:55 pm

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

  162. Becky says

    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!

    • Amy says

      November 8, 2011 at 6:46 pm

      WOOT! So glad it worked for ya. 🙂

  163. Derek says

    November 5, 2011 at 11:13 am

    Great tutorial 🙂

    Its work for me.

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

  164. Chat With Vera says

    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.

    • Amy says

      November 4, 2011 at 4:25 pm

      So glad! Thanks for letting me know. 🙂

  165. pat says

    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

    • Amy says

      November 4, 2011 at 4:24 pm

      Yay! So glad you found it helpful. Way to go!!

  166. ZombieMommySaves says

    November 2, 2011 at 6:29 am

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

  167. ZombieMommySaves says

    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!

  168. Jill says

    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♥

  169. Maria B says

    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

  170. Cel Woods says

    October 26, 2011 at 11:25 pm

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

  171. This Side of 30 says

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

  172. Beth Anne says

    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 🙂

  173. Jacinda Walker says

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

    • Amy says

      October 21, 2011 at 8:40 am

      Jacinda, I made this into a complete post: How to Make an Image Clickable. Did you see it?

  174. Rie says

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

  175. Veronica says

    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.

    • Amy says

      October 17, 2011 at 10:55 am

      Try inserting < center > at the very top of that chunk of HTML in your widget and < /center > at the very end.

      • Amy says

        October 17, 2011 at 10:56 am

        (remove the spaces inside the < & >)

  176. Veronica says

    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!

  177. Amy @ Raising Arrows says

    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

    • Amy says

      October 8, 2011 at 8:33 pm

      You’re welcome. Glad it was helpful!!

  178. Truth Mama says

    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!

    • Amy says

      October 8, 2011 at 8:33 pm

      Thanks so much. I’m so glad it was helpful!

  179. Camille says

    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!

    • Amy says

      October 5, 2011 at 3:04 pm

      Woohoo! Way to go! Glad to help.

  180. sue says

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

    • Amy says

      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!

  181. Kristen says

    October 5, 2011 at 3:03 am

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

    • Amy says

      October 5, 2011 at 11:52 am

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

  182. Pat Harrell says

    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!

    • Amy says

      October 4, 2011 at 1:58 pm

      You are very kind, thank you. Glad you figured it out!

  183. Brandi @ Must Love Coupons says

    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!

    • Amy says

      October 3, 2011 at 2:29 pm

      You’re very welcome. I’m glad it’s helpful!

  184. Susan Hill says

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

    • Amy says

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

      • Susan Hill says

        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!

  185. Mendi says

    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.

    • Amy says

      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!

    • Mendi says

      October 5, 2011 at 11:15 pm

      That worked! Thanks so much for your help.

  186. Patty says

    September 26, 2011 at 12:24 pm

    Yay! it worked! Thanks for the tip.

  187. Mara @ Kosher on a Budgget says

    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!

    • Amy says

      September 12, 2011 at 1:50 pm

      Yay, glad it worked for ya!

  188. Joanna @ Southern Daisy says

    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?

    • Joanna @ Southern Daisy says

      September 10, 2011 at 7:07 pm

      Nevermind. When I changed the ftp:// to http:// it worked perfectly! Thanks again for a great tutorial!

      • Amy says

        September 10, 2011 at 7:47 pm

        Glad you figured it out! Woohoo! (You’re very welcome.)

        • Joanna @ Southern Daisy says

          September 10, 2011 at 8:16 pm

          My friend tried putting my button on her site and it only showed the name of my blog. It didn’t show the picture. I copied the code exactly like you said.

          • Amy says

            September 10, 2011 at 8:30 pm

            Check your grab code…it looks like your image location URL has an @ sign in the middle of it which is most likely the problem. If you are having trouble uploading it via FTP or your cPanel, you can upload by going to Dashboard –> Media –> Add New –> Choose from computer. It will upload and then you will see “File URL” at the bottom of that new window. Copy the URL next to “File URL”. Hope that helps!

          • Joanna @ Southern Daisy says

            September 10, 2011 at 8:39 pm

            Ok, I did that, but she said it’s still not showing the picture. 🙁 I’m not good at all this coding stuff.

          • Amy says

            September 12, 2011 at 1:56 pm

            Really? It works for me when I try it on my test site.

          • Joanna @ Southern Daisy says

            September 12, 2011 at 3:19 pm

            Ok, well maybe she just copied the code wrong then. Glad it worked for you! Thanks for all your help!

  189. Erica says

    September 8, 2011 at 1:00 am

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

    • Amy says

      September 10, 2011 at 4:01 pm

      You’re welcome!

  190. Alexandra Rae says

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

    • Amy says

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

  191. Mrs. Weber says

    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 🙂

  192. Amy says

    August 29, 2011 at 8:11 pm

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

  193. paige says

    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!

    • Amy says

      August 29, 2011 at 8:24 am

      You are very welcome! Glad it worked. 🙂

  194. Shari Lynne says

    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

    • Amy says

      August 27, 2011 at 12:52 pm

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

  195. laura says

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

    • laura says

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

  196. Renee says

    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.

  197. Renee says

    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!

    • Amy says

      August 25, 2011 at 9:28 am

      Is it live somewhere so I can look at it?

  198. Ragina says

    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?

  199. Rosshalde Pak says

    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.

    • Amy says

      August 20, 2011 at 9:57 am

      Woot!

  200. Jackie @ Blessings Overflowing says

    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.

    • Amy says

      August 16, 2011 at 8:05 am

      Add margin-top: 10px; to your div style tag like this:

      div style=”width: 123px; height: 125px; overflow: auto; border: 1px solid #666666;margin-top:5px; margin-top: 10px;”

      Make sure you’ve got the at the beginning and end. You can also change the 10px to more or less if you’d like.

      • Jackie @ Blessings Overflowing says

        August 16, 2011 at 8:07 am

        Thanks, Amy!

  201. Jackie @ Blessings Overflowing says

    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.

  202. Jackie @ Blessings Overflowing says

    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.

  203. Kristen @ Joyfullythriving says

    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!

    • Amy says

      August 12, 2011 at 9:43 am

      Thank you, Kristen! I’m so glad it worked for you. 🙂

  204. Michele says

    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.

    • Amy says

      August 11, 2011 at 4:18 pm

      So glad it’s helpful! Way to go!!

  205. [email protected] Today says

    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!

    • Amy says

      August 9, 2011 at 9:06 pm

      Thanks for the tip, Judy! That’s excellent. (And I bet your dinner would be LOVELY!) 🙂

  206. Yosefa @nonrecipe says

    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!

    • Amy says

      August 4, 2011 at 4:51 pm

      That is so kind. 🙂 So, did it work? 🙂

      • Yosefa says

        August 5, 2011 at 3:29 am

        Not only did it work, someone used the code to post my button! Check it out – http://www.nonrecipe.com. I love that you can click on the button on the front page of my site to get to my link party.

        • Amy says

          August 9, 2011 at 9:30 pm

          Nice!

  207. Alli says

    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.

  208. Chris {NotAnotherGayWeddingBlog.Com} says

    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!

    • Amy says

      July 28, 2011 at 8:51 am

      So glad it worked!

  209. Tifaine says

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

    • Heather Wood says

      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!

      • Amanda says

        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?

        • Heather Wood says

          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.

  210. Living says

    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

  211. Linda says

    July 20, 2011 at 11:10 pm

    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.

  212. Sharla says

    July 11, 2011 at 12:38 pm

    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!

    • Amy says

      July 12, 2011 at 8:54 am

      Glad it worked!

  213. Bonnie says

    July 1, 2011 at 9:02 pm

    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!

    • Amy says

      July 5, 2011 at 8:49 am

      Hmmm…good question. I would contact iStockphoto and ask directly.

  214. Dayna ~ Inspiration for Decor says

    June 28, 2011 at 10:14 pm

    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.

    • Amy says

      June 29, 2011 at 3:44 pm

      You’re so welcome. I’m glad it was easy to follow.

  215. Natalie C. says

    June 24, 2011 at 10:16 pm

    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!

  216. JustJenny says

    June 22, 2011 at 9:01 pm

    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.

    • Amy says

      June 24, 2011 at 4:01 pm

      Glad you got it to work. Those quotes can be tricky!

  217. Mikailah LeFevre says

    June 20, 2011 at 12:22 pm

    I don’t get it…. I’m only 14, and I wanted to get the blog button on my blog, but I can’t figure it out! Thanks!
    Mikailah

  218. dawn says

    June 19, 2011 at 12:39 pm

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

  219. Brandee says

    June 13, 2011 at 10:21 pm

    Thank you! I linked back: http://brandeeshafer.blogspot.com/2011/06/i-have-button.html

    • Amy says

      June 16, 2011 at 8:44 am

      Thanks, Brandee!

  220. Diane says

    June 13, 2011 at 12:23 pm

    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

      June 16, 2011 at 8:43 am

      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.

  221. Mel the Crafty Scientist says

    June 9, 2011 at 3:25 pm

    Thanks so much for this awesome tutorial! I featured your post in my roundup of tutorials for creating blog buttons here: http://www.thecraftyscientist.com/2011/06/roundup-blogging-resources-blog-buttons.html. I’d love for you to check it out and grab a featured button if you want! : )

  222. Heather says

    June 6, 2011 at 10:27 pm

    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!

  223. Denise says

    June 5, 2011 at 12:08 pm

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

    Smiles,
    -denise

    • Amy says

      June 6, 2011 at 9:24 am

      “I even counted the quotes.” <–LOL! 🙂

  224. Kristen says

    June 4, 2011 at 6:38 am

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

    • Amy says

      June 6, 2011 at 9:15 am

      My pleasure, Kristen!

  225. Aria and Tilly says

    June 3, 2011 at 12:03 pm

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

    • Amy says

      June 3, 2011 at 6:26 pm

      Woohoo! 🙂 So glad it worked!

  226. Rose says

    May 25, 2011 at 1:05 am

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

    • Amy says

      May 26, 2011 at 7:06 pm

      It’s all about fun! 🙂

  227. Mary says

    May 20, 2011 at 10:38 pm

    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

      May 21, 2011 at 6:33 am

      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.

  228. Crystal @ Intentional Homemaker says

    May 15, 2011 at 11:50 pm

    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>

  229. Charles says

    May 8, 2011 at 3:28 am

    Thanks Amy. I’ll give it a try.

  230. Cherie-Lynn says

    May 6, 2011 at 8:10 am

    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

      May 6, 2011 at 9:14 am

      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.

  231. tara says

    May 2, 2011 at 9:43 am

    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

      May 3, 2011 at 9:46 am

      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

        May 3, 2011 at 11:35 am

        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

        • Amy says

          May 3, 2011 at 3:23 pm

          Sometimes it just takes another pair of eyes. I know how that goes! 🙂

  232. Kiersten says

    May 1, 2011 at 5:52 pm

    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!

  233. [email protected] Deal Hunting Diva says

    April 27, 2011 at 10:29 pm

    Amy… You are AMAZING!!! Thank you so much. You have helped me countless times. My blog is 3 weeks old today and I have learned so much from your tutorials. You ROCK!

  234. Stacy @ Delighting in the Days says

    April 26, 2011 at 9:33 pm

    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 🙂

    • Amy says

      April 28, 2011 at 10:41 am

      Thanks Stacy. Way to go!

  235. Michelley QueenofQueens says

    April 11, 2011 at 3:33 pm

    It worked like a charm! Thank you so much for sharing your knowledge.

  236. Micha @ Cookin' Mimi says

    April 9, 2011 at 8:58 pm

    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!

  237. Pushhyarag2000 says

    April 9, 2011 at 11:16 am

    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.

    • Amy says

      April 11, 2011 at 1:46 pm

      Thanks for stopping by and I’m glad it was helpful!

  238. Bridget says

    April 1, 2011 at 3:57 pm

    Thanks so much! I am new to this whole blogging world and I wanted a cute button and now I have one. I got very frustrated last night, but I figured out what I did wrong today and everything is peachy:)

    Bridget from http://www.bumluxury.blogspot.com

  239. Amber says

    March 31, 2011 at 9:16 am

    Thanks a bunch! Worked great!

  240. Erin says

    March 30, 2011 at 8:18 pm

    Thank you so much!!!

  241. Janice says

    March 29, 2011 at 4:35 pm

    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

      March 31, 2011 at 10:10 am

      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!

  242. Stina says

    March 28, 2011 at 7:11 pm

    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.

    • Amy says

      March 29, 2011 at 3:32 pm

      Way to go Stina!

  243. Elizabeth Gorski says

    March 21, 2011 at 7:39 am

    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!

    • Amy says

      March 21, 2011 at 11:55 am

      My pleasure. Glad it worked for ya. 🙂

  244. Tara at The Adventures of MommyHaha says

    March 18, 2011 at 12:32 pm

    Thank you so much! I was able to make a cute little button for my blog all by myself.

    • Amy says

      March 21, 2011 at 12:01 pm

      Way to go, Tara!

  245. Blanca Stella says

    March 16, 2011 at 3:34 pm

    After several attempts I finally got it. Thanks for your great instructions!

  246. Tracye says

    March 16, 2011 at 5:43 am

    Thank you so very much!!!

  247. Angela says

    March 11, 2011 at 7:11 pm

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

    • Amy says

      March 12, 2011 at 6:02 am

      Yay, so glad!

  248. This Much says

    March 11, 2011 at 2:57 pm

    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.

    • Amy says

      March 11, 2011 at 3:02 pm

      Make sure you have this part in your code: That should put a border around your grab box.

      • Amy says

        March 11, 2011 at 3:20 pm

        Oops! *This* is what you should make sure you have. 🙂

        div style=”width: 123px; height: 125px; overflow: auto; border: 1px solid #666666;”

        • This Much says

          March 11, 2011 at 5:12 pm

          Got it! Thank you so much!

  249. Amy Kirchhoff says

    March 6, 2011 at 9:19 pm

    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

      March 7, 2011 at 6:51 am

      I’m not seeing the question marks. Could it be your widget/gadget title?

      • Amy Kirchhoff says

        March 7, 2011 at 8:20 am

        Thanks so much for getting back to me. I’m happy to hear you’re not seeing them. Here’s a Flicker link to the screenshot I’m seeing: http://www.flickr.com/photos/amytriedit/5506205294/

        • Amy says

          March 8, 2011 at 10:59 am

          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.

  250. evielynne sanchez says

    March 5, 2011 at 4:12 pm

    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

      March 7, 2011 at 6:53 am

      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!

  251. Tiffany says

    March 4, 2011 at 8:56 am

    Thanks Amy!

  252. angela ackerman says

    March 3, 2011 at 6:44 pm

    Haha, no worries, I figured it out. Again, huge thanks. I really appreciate this!

    Angela @ The Bookshelf Muse

    • Amy says

      March 3, 2011 at 8:47 pm

      🙂 Way to go!

  253. angela ackerman says

    March 3, 2011 at 6:41 pm

    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?

  254. Laura says

    March 1, 2011 at 5:35 pm

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

    • Amy says

      March 2, 2011 at 5:50 am

      “You made it so easy, like eating!!!”

      That cracked me up! 🙂

  255. Robinella says

    February 18, 2011 at 2:15 pm

    Thanks a bunch.

  256. Alex Jacobson says

    February 17, 2011 at 4:26 pm

    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

      February 18, 2011 at 7:52 am

      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.

      • Barbara says

        July 10, 2011 at 11:22 am

        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

          July 12, 2011 at 8:50 am

          You can add your HTML to a gadget in your sidebar.

  257. Christina says

    February 15, 2011 at 6:14 pm

    Yes! This was sooooo easy and fun to do! I can’t stop smiling. Thank you!

    • Amy says

      February 16, 2011 at 6:00 am

      Glad it worked for you!

  258. Jesika Jennings says

    February 15, 2011 at 3:45 pm

    OMG, thank you! I was having the hardest time with this.
    You rock.

  259. Alisha @ SnugasaBugBaby.com says

    February 12, 2011 at 10:31 pm

    I was SO EXCITED to get a button on my page… but now my whole site requires that you enter my ftp password before viewing it…any idea how to remedy this?

    • Amy says

      February 14, 2011 at 6:01 am

      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.

  260. Melissa says

    February 12, 2011 at 12:46 pm

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

    • Amy says

      February 14, 2011 at 5:58 am

      LOL! Glad it worked. 🙂

  261. becca says

    February 10, 2011 at 5:42 pm

    Thank you so much! I got it on my second try after I fixed the quotations.

    • Amy says

      February 11, 2011 at 4:58 am

      Awesome!

  262. Jennifer Ervin says

    February 3, 2011 at 7:10 pm

    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.

  263. Lisa @ Grandma's Briefs says

    January 24, 2011 at 12:51 am

    Hi Amy: Thank you so much for the clear and concise directions for this. It worked on the first try. You are awesome and appreciated!

    • Amy says

      January 24, 2011 at 5:32 am

      Yay, glad it worked!

  264. Katie says

    January 20, 2011 at 5:56 pm

    Amy, how do I prevent my picture from being so blurry?

    • Amy says

      January 21, 2011 at 7:21 am

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

  265. Kim Wombles says

    January 9, 2011 at 6:08 pm

    Thank you! 🙂

  266. The Little Wife says

    January 5, 2011 at 10:37 am

    Thanks so much! Of all the tutorials I read, this is by far the clearest.

    • Amy says

      January 5, 2011 at 1:10 pm

      I’m so glad! Thanks for stopping by.

  267. Jules says

    January 4, 2011 at 1:54 pm

    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!

  268. Judy Daniell says

    December 31, 2010 at 1:19 pm

    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.

    • Amy says

      December 31, 2010 at 8:29 pm

      Yay!

  269. Judy Kraige says

    December 29, 2010 at 8:18 pm

    Hi Amy, got my button up but can’t figure out how to do the rest. After doing it 2-3 times it’s not working. Any extra tips maybe? Thanks Judy

    • Amy says

      December 30, 2010 at 7:20 pm

      Hmmm…where are you stuck?

  270. Lori Devine says

    December 28, 2010 at 3:50 pm

    @ Lou-There is a great tutorial here for installing a button in Blogger. I recommend that you use Amy’s make the button tutorial then follow these steps to install with a scroll box:

    http://jenieshell.blogspot.com/2008/11/how-to-make-blog-button.html

    I had problems displaying the code in the scroll box. There is a website and a tutorial on here about how to get your computer to not read your html so your code can be displayed. Best wishes!

    • Amy says

      December 30, 2010 at 7:33 pm

      Thanks for the resource Lori!

  271. Mary Maddox says

    December 24, 2010 at 5:43 pm

    Thank you, Amy. With your clear and detailed instructions I created a button for my blog http://dreambeast.net

  272. Lou says

    December 22, 2010 at 12:03 am

    Ok Thanks Amy! Happy Holidays!! x

  273. Lou says

    December 21, 2010 at 4:05 am

    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

      December 21, 2010 at 4:52 pm

      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

        September 27, 2013 at 10:07 pm

        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.

  274. Lou says

    December 21, 2010 at 1:20 am

    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

  275. Kirstin says

    December 15, 2010 at 10:46 am

    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!

    • Amy says

      December 17, 2010 at 8:31 am

      What part isn’t working?

  276. Jenn says

    December 9, 2010 at 2:05 am

    Thank you so much for this!!!

  277. Kirstin says

    December 8, 2010 at 6:20 pm

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

  278. Dee @trees all dance says

    December 1, 2010 at 9:17 pm

    Thanks so much for this!

  279. Ann-Marie says

    November 28, 2010 at 10:09 pm

    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

      November 29, 2010 at 9:15 pm

      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!

  280. bethany learn @fit2bmama says

    November 11, 2010 at 9:06 am

    I just blogged about you! Yay! Thanks again! http://blog.fit2b.us/2010/11/make-your-own-blog-button.html

  281. bethany learn @fit2bmama says

    November 11, 2010 at 8:40 am

    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!

    • Amy says

      November 11, 2010 at 9:54 am

      You’re crackin’ me up. 🙂

      Way to go!!

  282. Kait says

    November 5, 2010 at 9:11 pm

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

    • Amy says

      November 11, 2010 at 9:01 pm

      Yay! Glad it worked!

  283. Bernadette Cooper says

    November 5, 2010 at 2:29 pm

    I finally got the link right, but my box looks terrible. The letters are red and the box had both horizontal & vertical scroll bars. Is it a setting in my theme?

  284. Lisa-Jo @thegypsymama says

    November 3, 2010 at 3:01 pm

    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

    • Amy says

      November 3, 2010 at 3:36 pm

      Where in your directory did you load it? If it’s in the root, it should be something like http://thegypsymama.com/imagename.jpg

      Otherwise, if you loaded into a folder within your directory, it would be something like http://thegypsymama.com/foldername/imagename.jpg

      Does that help?

  285. Allie says

    October 29, 2010 at 8:00 pm

    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!

    • Amy says

      October 30, 2010 at 5:35 am

      Glad it was helpful! 🙂

  286. Tammy says

    October 18, 2010 at 6:37 pm

    Thank you!! Best instructions ever!

  287. Staci says

    September 25, 2010 at 1:50 pm

    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!

    • Amy says

      September 28, 2010 at 3:09 pm

      You’re welcome! Glad it worked!

  288. xj says

    September 23, 2010 at 7:01 am

    Thank you so much! This was so informative!

    • Amy says

      September 28, 2010 at 3:23 pm

      Glad it was helpful!

  289. Christi says

    September 14, 2010 at 2:30 pm

    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

      September 21, 2010 at 6:43 pm

      You’re welcome. You’ll be a coding whiz in no time. 😉

  290. Amber says

    September 13, 2010 at 8:06 pm

    It took me two hours, but I did it! thank you so much for the tutorial!

    • Amy says

      September 21, 2010 at 6:42 pm

      Woohoo! Way to go!

  291. Kimarie @ The Cardamom's Pod says

    August 23, 2010 at 9:49 pm

    Thank you SO much, Amy! I did it! I’m still trying to work on a favicon, but, I just can’t get my calligraphy to show up and be bold at 16×16 pixels… LOL

    • Amy says

      August 24, 2010 at 7:59 am

      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!

  292. lauralee says

    August 7, 2010 at 6:31 am

    Thanks so much!!!! This totally worked!

    • Amy says

      August 7, 2010 at 4:07 pm

      Woohoo!

  293. Amanda says

    August 6, 2010 at 11:49 pm

    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!

    • Amy says

      August 7, 2010 at 4:07 pm

      Way to go!

  294. Marsha says

    July 13, 2010 at 10:44 pm

    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.

  295. Carol says

    July 1, 2010 at 12:56 am

    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!

    • Amy says

      July 2, 2010 at 3:48 am

      Thanks Carol. Glad it worked!

  296. Nelda says

    June 23, 2010 at 11:24 am

    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

  297. Emily says

    June 2, 2010 at 6:18 pm

    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

  298. Michele @ Frugal Granola says

    May 29, 2010 at 1:48 pm

    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

  299. Michelle (Health Food Lover) says

    May 27, 2010 at 6:32 pm

    Thank-you Amy! You’re a legend! I always find your tutorials quite concise and easy to follow!

    • Amy says

      May 31, 2010 at 8:34 pm

      LOL! A legend…wow…you just made my day. 🙂 Thanks!

  300. Carol says

    May 27, 2010 at 2:02 pm

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

  301. Staci @ teaching money to kids says

    May 26, 2010 at 9:33 pm

    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

  302. Brandi says

    May 26, 2010 at 2:50 pm

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

  303. [email protected] Daily Round says

    May 26, 2010 at 10:20 am

    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.

  304. Liberty says

    May 26, 2010 at 10:03 am

    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*

  305. Reesa says

    May 25, 2010 at 10:55 pm

    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!

  306. Becca - Our Crazy Boys says

    May 25, 2010 at 9:24 pm

    Thank you!!!

    Can I ask a question? How do I make the grab boxes a little smaller? Mine are huge!

    • Amy says

      May 25, 2010 at 9:49 pm

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

  307. Turkana W says

    May 25, 2010 at 7:22 am

    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!

    • Amy says

      May 25, 2010 at 9:52 pm

      Thanks. 🙂 Glad it was helpful!

  308. Mandy says

    May 24, 2010 at 9:13 am

    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

      May 24, 2010 at 10:20 am

      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

      May 24, 2010 at 10:27 am

      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.

  309. Carol says

    May 22, 2010 at 9:38 am

    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!

    • Amy says

      May 24, 2010 at 10:28 am

      So glad it’s been helpful!

  310. Michele @ Frugal Granola says

    May 21, 2010 at 4:18 pm

    Thanks, Amy! 🙂

Welcome!

Learn how to start a blog or website. In plain English. From a 13-year blogging veteran.

Most popular…

  • How to Start a Blog
  • Table of Contents
  • How to Make Money Blogging
  • Tools I Use & Recommend
  • How to Decide What to Blog About
  • How to Write an Ebook
  • The Useletter
  • Tell Your Time
  • (Click here for more…)
  • Facebook
  • Google+
  • Instagram
  • Pinterest
  • Twitter
  • YouTube

Are you saving time with the Useletter®?

I wade through the internet and find the good stuff. So you don’t have to. It’s free.

  • Useletter
  • Contents
  • Blog
  • Knowtbook
  • Tools I Use
  • Hey Amy Show
  • Affiliates

© 2010–2018 Amy Lynn Andrews · All rights reserved · My theme Parallax Pro · Privacy Policy · Disclosure Policy