Answering more reader questions today…
Many people have asked me how to make their own blog button. This is the mother of all blog button tutorials (well, at least it felt that way when making it!!). Stick with me.
Update: Before you embark on your blog button-making journey, I highly recommend you read my two blog button tips. These are two things I learned when making my own blog button.
This time I'm going to show you how to make a 125px by 125px blog button like this (ahem…pardon my ugly, thrown-together button):
Once you do, you might want others to be able to grab your button and put it on their own site, in which case you'll need a grab box along with your button like this:
A visitor would simply copy the code in the grab box, paste it into their own site and your button would show up there!
In order to do it you need to:
- Create an image 125px by 125px (which will be the button itself).
- Upload your image to your server.
- Create the code others will copy & paste to grab your button.
- Display your button & grab box on your own site (ready to be grabbed by others).
1. Create an image 125px by 125px (2 options)
Blog buttons are typically 125px by 125px square. To create your button, you can use either an existing image as your base, or you can start one from scratch.
Option A: To use a photo or existing image as your blog button base:
You are going to use the very same technique I showed you in How to Watermark a Photo. I'll post the video again in case you missed it. The only difference is, instead of resizing your image to 16×16 pixels square, you're going to resize it to 125×125 pixels square.
Can't see the video? Watch it here.
Here are the steps (video notes):
- Go to Picnik.com.
- Upload your photo.
- Crop your image into a perfect square. (It doesn't matter what size it is at this point as long as it's the same number of pixels wide by the same number of pixels high.)
- Once it's cropped, resize your image to 125px by 125px.
- Add text, effects, stickers, etc. to embellish your button as you like.
- Save it.
- Done!
Option B: To use a blank canvas as your blog button base:
If you want a button with a solid-colored background as a base, you could employ the trick I showed you in How to Make and Install a Favicon (above). That is, find a photo with a good swatch of color you can isolate to use as your solid-color background. Once your background is set, you'd follow steps 3-6 above to add your text, etc.
OR
You could also use an application like Gimp (which requires a bit more design knowledge but is free). In this case you would open a new canvas, 125px wide by 125px high and then add text and maybe an illustration or two (iStockphoto is a popular site where you can purchase illustrations).
Now you've got your image.
2. Upload your image to your server
Follow the instructions in How to Access Your File Manager or How to Use FTP to upload your image to your server. (Aren't you glad we learned how to access our server? It definitely comes in handy!)
Take note of the location of your image. It doesn't matter a whole lot where your image is stored, as long as you know where it is. To make it easy, I would install it in my "root" (first level of my blog files). This is what it looks like (click to view larger):
If you do upload your button image here, the location of your image will look something like this:
http://YourDomain.com/ButtonImageName.jpg
3. Create the code others will copy & paste to grab your button
The basic code one will copy and paste to get your button to show up on their site looks like this (you will replace the bold with your own URLs):
<a href="YourSiteURL"><img src="YourButtonImageURL" /></a>
The <a href="…"></a>" portion is your hyperlink and is the page you want someone to land on when they click your button (most likely your home page). Make sure you don't forget the closing tag (</a>) at the end!
The <img src="…"> identifies where the image is located so a browser (i.e. Firefox, Safari, Chrome, Internet Explorer…but I know you're not using Internet Explorer, right??) knows where to find it in order to display it.
So, for example, if I was going to put a button on my site (and I uploaded it to my root directory), my code would look like this (ignore the line break):
<a href="http://bloggingwithamy.com"><img src="http://bloggingwithamy.com/button.jpg" /></a>
<a href="http://bloggingwithamy.com"></a> (i.e. BloggingWithAmy.com) is where they land when they click on my button, which the computer reads like this: <img src="http://bloggingwithamy.com/button.jpg" / >
Make sense?
4. Display your button & grab box on your site (ready to be grabbed by others)
Let's put your button and a grab box in your sidebar for others to grab. You'll do this by pasting the below code in a text widget.
To get to your widgets from your Dashboard, go to Appearance–>Widgets. Click & drag the "Text" widget into your sidebar (your sidebar options may differ from mine in this photo):
The text widget should automatically pop open for you once you drag it into the sidebar; if it doesn't click the little down arrow on the right side of it. At this point you're ready to paste your code (below).
(By the way, if you want a refresher course on placing widgets into your site, check out How to Use WordPress Widgets.)
Here's the code you will paste into your text widget. It consists of two parts:
- Your image.
- The grab box.
Highlight and copy the entire next paragraph into your text widget. You will obviously replace the bold parts with your own code:
<img src="YourButtonImageURL" alt="YourSiteTitle" /><div style="width: 123px; height: 125px; overflow: auto; border: 1px solid #666666;"><a href="YourSiteURL" target="_blank"><img src="YourButtonImageURL" alt="YourSiteTitle" width="125" height="125" /></a></div>
So, for example, this is what mine would like:
<img src="http://bloggingwithamy.com/button.jpg" alt="BloggingWithAmy.com" /><div style="width: 123px; height: 125px; overflow: auto; border: 1px solid #666666;"><a href="http://bloggingwithamy.com" target="_blank"><img src="http://bloggingwithamy.com/button.jpg" alt="BloggingWithAmy.com" width="125" height="125" /></a></div>
Important Sub-Step: Make all code above HTML-friendly by changing the quotes!
In a nutshell, if you just copy the code above and paste it into a widget, it won't work. Why? Because there are these things called "smart quotes" which mess everything up. (Feel free to google if you'd like. I'll spare you the details.)
The bottom line is, it's a bit of pain, but this is how I recommend making your code HTML-friendly:
- So you copied the above code.
- You pasted it into a text widget (as described at the beginning of Step 4).
- Now, once you've pasted it in your widget, very carefully delete every quote (") and re-type it. There are 6 total. I suggest doing them one at a time and in order. Be sure not to add any spaces or extra characters in the process.
- Save your widget.
- Your image and text box should appear. If not, delete the code, re-copy it and paste it into a text widget and try changing the quotes once again. (It's easy to make a mistake.) (If it still doesn't work, it's probably all my fault.
)
Once it's in your sidebar, people can simply copy all the code in the grab box, paste it into their site and your button will show up!
Did you like this tutorial? There are a whole lot more of those 'round here! You might also like:
- How Much Do Real Bloggers Actually Make?
- How to Blog for Income
- Earn Online Easily & Legitimately
- How to Make and Install a Favicon
- Make Reading Your Blog Easier: 3 Tips
- How to Write an Ebook: The Guide
- A Simple, Effective Commenting Technique
Here are even more of my quick tips.
This post is part of Works for Me Wednesday.
Here at BloggingWithAmy you'll find tips, tools & tutorials about blogging and websites in plain English. Want to 
Thanks, Amy!
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!
So glad it's been helpful!
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 ". 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.
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!
Thanks.
Glad it was helpful!
Thank you!!!
Can I ask a question? How do I make the grab boxes a little smaller? Mine are huge!
You would change the width and height values (but only the first ones, not the second).
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!
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*
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.
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.
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
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.
Thank-you Amy! You're a legend! I always find your tutorials quite concise and easy to follow!
LOL! A legend…wow…you just made my day.
Thanks!
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
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
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
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!
Thanks Carol. Glad it worked!
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.
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!
Way to go!
Thanks so much!!!! This totally worked!
Woohoo!
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
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!
It took me two hours, but I did it! thank you so much for the tutorial!
Woohoo! Way to go!
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. You'll be a coding whiz in no time.
Thank you so much! This was so informative!
Glad it was helpful!
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!
You're welcome! Glad it worked!
Thank you!! Best instructions ever!
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!
Glad it was helpful!
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
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?
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?
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!
Yay! Glad it worked!
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!
You're crackin' me up.
Way to go!!
I just blogged about you! Yay! Thanks again! http://blog.fit2b.us/2010/11/make-your-own-blog-button.html
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!
Thanks so much for this!
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! 
Thank you so much for this!!!
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!
What part isn't working?
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
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!
Ok Thanks Amy! Happy Holidays!! x
Thank you, Amy. With your clear and detailed instructions I created a button for my blog http://dreambeast.net
@ 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!
Thanks for the resource Lori!
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
Hmmm…where are you stuck?
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.
Yay!
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!
Thanks so much! Of all the tutorials I read, this is by far the clearest.
I'm so glad! Thanks for stopping by.
Thank you!
Amy, how do I prevent my picture from being so blurry?
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?
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!
Yay, glad it worked!
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.
Thank you so much! I got it on my second try after I fixed the quotations.
Awesome!