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 
Thank you so much for this great tutorial. I was easily able to to add our blog button and code to our site!
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!
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)?
hi amy, thanks for replying. i uploaded an image at photobucket but the code above just doent seem to work.
GOT IT ! Thanks so so much for the tutorial.
Hey there, Amy…
Could you please check out my blog button and see what I'm doing wrong? The code shows up, but the picture doesn't. It's on the right hand side of the page:
http://lifeofahomeschooledteenager.blogspot.com/
Thanks!
I have the same problem..did you figure out how to fix it?
I just tired to use picnick and as you probably know they are not taking any new registers since they are closing in April. I guess I will search your site for other sites like this one for cropping photos
I have a question? Picnik is closing in April 2012 what site to make photo's on for our grab button now?
Hi Jackie,
The best alternative I have found for Picnik (which I am soooo going to miss!) is a new website called PicMonkey. It has the same basic features which are free, and then some nicer features which, like Picnik, cost a bit. But resizing is completely free, as are some other cool edits.
Here is the link: http://www.picmonkey.com/
Thanks Cassandra!
Okay I am not even kidding when I say that you seriously just changed my entire blogging experience. Thank you, thank you, thank you!!!! SO many new possibilities now!
You are crackin' me up but thank you. I'm so glad it helped!
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!
WOW… Something in my blogging experience that actually worked on the first try. How crazy is that?! Thanks Amy!!
Yay! Glad it worked.
I was totally freaked out at having to do this but I did it with no problems. Whew!
Amy
fashionandbeautyfinds.blogspot.com
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!!!!
Great tutorial and website –Thanks!
Thank you Bridget.
Hi Amy, I have a question, what program do we use now that picnik is closing?
I've got a couple listed here.
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.
Thank you so much… a great tutorial and now we have a lovely button!
Glad it worked for ya!
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.
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!
Thank you so much I just made my official button. HORRAY!!! Hope you stop by and see my button it's my knockroses with a few sticker butterflys.
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
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.
Thank you so much for this excellent tutorial. You can see the result on my website!
Thank you! Been trying for a month!
Way to go, Abby!
This was so helpful! My blog button is there because of you! Thanks!
Way to go, Megan!
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.
and ignore my question… their button will link back… but the picture above the grab box won't link…. i see now…
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