Amy Lynn Andrews

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

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

Comments

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  66. 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 😀

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

  68. 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;

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

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

  72. 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. Amy,

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

    Steph

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  109. 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. Thank you so much for this great tutorial. I was easily able to to add our blog button and code to our site!

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

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

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

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

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

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

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

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

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

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

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

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

  129. 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*

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

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

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

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

    • 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. 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. I am doing something wrong. I have the button, but in the text box below the button, the button appears again. Please help!
    Thanks.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  222. 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. You rock! This tutorial was super easy to follow, and your instructions worked perfectly! I even counted the quotes.

    Smiles,
    -denise

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

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

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

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

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

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

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

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

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

      • 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

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

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

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

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

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

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

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

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

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

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

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

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

  256. 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…

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

      • 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…

    • 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. You just plain rock, Amy! This worked perfectly the very first time!!!! I could dance, but I won’t!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.
I take your privacy seriously. By signing up you agree to the terms in my privacy policy here.