Wednesday, January 19, 2011

How to Make a Button


What is a button? 

Buttons are those cute little pictures you see as visual symbols for blogs, challenges, events, and all sorts of things. 

You'll often see them on sidebars (check out my button on the right sidebar!) If you look at my Features/Challenges Index, you'll see a list of buttons representing all the challenges I am participating in this year. 

Basically, buttons are good because they provide a visual cue to readers to associate with you, your blog, or your blog post. What's also great about buttons is they link back to your blog!



What You Will Learn

I'll introduce you to some programs you can use to make a picture to use for your button. Then I'll explain the code you'll need to make your picture into a linkable button. Finally, I'll walk you through adding a "Grab My Button" feature to your sidebar.

Let's Do This!

Step 1: Making the Picture

The first thing you're going to need to do is create the image you want to use for your button. You can make your button any size, but 150x150 pixels (like mine) or 200x200 pixels is fairly standard.

For this you're going to need some basic facility with a program like Photoshop. If you're not sure how to do something, I've found Youtube to be a great resource. Just type in something like "Photoshop how to x" and you should be able to find a tutorial video.

If you don't have Photoshop and don't want to spend the money on buying the program, I recommend downloading GIMP. It's a program similar to Photoshop, but it's free! It isn't able to do everything Photoshop can, but for the purposes of making a button, it'll do you what you need. You can also use Picnik for quick editing and creation. I haven't used this program, but it is also free. Picnik seems like it is more limited than Photoshop or GIMP, but look like it has what you'd need to make a button.

Edited to add: Nina from Brush Up On Your Reading reminded me that you of course can always yous MS Paint! The program is very limited in comparison to something like Photoshop or GIMP, but it has a lot of what you'd need to make a cute button. Just look at Nina's blog and her adorable ARGH pictures for proof!

Edited to add: Missie from The Unread Reader suggested a program I hadn't heard of before: Editor by Pixlr.com Best thing about it? It's FREE! Just browsing through it now it looks like a great site that has more than enough features to get you well on your way to making beautiful buttons. Another benefit is you don't have to download it, so you can use it on any computer with an internet connection. Big thanks to Missie for suggesting this site!


Once you've made your picture, find a place to host it (tinypic, photobucket, flickr, etc) and upload your picture. 


Step 2: Writing the Code

Copy this code and paste it somewhere you can work on it (a blog post, a Word document, etc):

<a border="0" href="http://smallreview.blogspot.com/" target="_blank"><img src="http://i51.tinypic.com/34gwkm9.jpg" /></a>

Now, look at the red part:

<a border="0" href="http://smallreview.blogspot.com/" target="_blank"><img src="http://i51.tinypic.com/34gwkm9.jpg" /></a>

This is the page you want people to arrive at if they click your button. If you're making a button for your blog, then you want this link to be your blog's url. If you're making a button for a challenge, then you want to use the url of the page you posted your challenge instructions or sign up page. Replace my url with the url you want to use.

Next, focus on this red part:

<a border="0" href="http://smallreview.blogspot.com/" target="_blank"><img src="http://i51.tinypic.com/34gwkm9.jpg" /></a>

This is the link to the picture you are using. Remember when you uploaded the picture at the end of step one? This is the url you will use. Copy and paste your url here.

Now you have a functioning button! Copy and paste your code into your blog posts or sidebars!



Step 3: Grab My Button!


Want people to be able to "Grab" your button? After what you've just done, this part is easy. Just follow these easy steps to put a "Grab My Button" section in your sidebar:


First, go to your menu and select "Design" and then "Page Elements"




Then, select "Add a Gadget"





You'll be shown a bunch of options. First select "Picture" and upload from your computer ("browse") or paste a link to the picture you made.





Then select "HTML/JavaScript" and paste this code:

<form><textarea rows="6" cols="18"><a href="http://smallreview.blogspot.com" target="_blank"><img alt="Small Review" src="http://i51.tinypic.com/34gwkm9.jpg"/></a></textarea></form>

The blue part is where you will paste your blog's url. The purple part is where you will paste the url of the picture.




Save your changes and you're done! 

Still have more questions? Missie from the fantastic The Unread Reader made a great button post:
How To: Buttons/Badges 




The form is anonymous, so please don't feel shy at all! 

These tips and tricks posts are a bi-monthly feature, so it may take a little time to answer your question, but I WILL answer it!

I'm certainly not an expert, but I'll try my hardest to explain what I do know and research what I don't know.

Click here to read previous Tips & Tricks Posts 

36 comments:

  1. This is VERY helpful! Thank you so much! I need a blog button desperately.

    ReplyDelete
  2. I love these posts! Thanks for the GIMP recommendation - I'm downloading it now. :)

    ReplyDelete
  3. I love your tutorials, they are always so helpful!! :D

    ReplyDelete
  4. I still need to do this but I feel I need to make the banner first and then make a button based on the banner. Ugh. Not fun.

    ReplyDelete
  5. This is great, thank you for posting this information!!

    ReplyDelete
  6. Super helpful! I just need to find the time and motivation now to make one :)

    ReplyDelete
  7. Great tutorial! I made a button a while ago and deleted it for some reason so this was a helpful reminder for me :)

    RE Cate Of the Lost Colony- I'll be looking out for your review to see what you think of it.

    ReplyDelete
  8. I love your tutorials! For my button, I did the picture on MS Paint, and because I'm such a lazy Photoshop user, I went online on Picnik.com and did the 'extra stuff' there like texts, etc. I've only ever used MS Paint when I draw ARGH, pretty primitive :D

    Brush Up On Your Reading

    ReplyDelete
  9. Fantastic tutorial!
    HTML isn't really that hard once you've had a little practice with it.
    Still, there are so many little steps to this project, it could be easy to be stymied by this. You've laid everything out so clearly!

    ReplyDelete
  10. Ha! I have done many posts on how to make buttons/banners. I have even made some and offered to make for people because I know how frustrating it can be when you want something but don't know how to do it.

    If it helps, this site is comparable to PS, and FREEEEEE! Plus you don't need to download a program. http://www.pixlr.com/editor/

    I love using it when I'm at my work computer and have to make something quick.

    Also, just wanted to share my how to: http://www.thesookieverse.com/2010/07/how-to-buttonsbadges.html#more
    http://www.theunreadreader.com/search/label/banner%20making

    I don't know if I have said this before, but one reason I love your blog is because it reminds me of the first blog design I had: http://www.theunreadreader.com/2010/02/reader-under-construction.html

    Thanks for doing these posts!

    ReplyDelete
  11. Thanks for this post. It helps so much especially being a fairly new blogger and all.

    ReplyDelete
  12. I'm so glad this post was helpful!

    Missie, thanks for those links! Your old blog girl has made her rounds!

    ReplyDelete
  13. Great tutorial! I remember trying to figure this out when I was a noob, and wishing someone could help me! :)

    ReplyDelete
  14. You are so awesome for posting this. Virtual kisses being blown at ya!!

    xoxo,
    Lah

    ReplyDelete
  15. I wish there had been a post like this when I was trying to figure out how to make a button! Great job, I know it was a lot of work just to make this post!!

    ReplyDelete
  16. D'oh! I'm such a bully sometimes. I didn't mean to get edited in, but thanks.

    These tutorials you do are very helpful! :D

    ReplyDelete
  17. Aw, you guys are the best! I'm glad you found this helpful!

    Missie you couldn't possibly be a bully. You are far too adorable. Your links were super helpful, so why not share the wealth of information? :)

    ReplyDelete
  18. *blushes*

    Oh, I think I have a topic for you. I remember doing a tutorial on Scheduling Posts because some friends didn't know how.

    ReplyDelete
  19. OOoh, that's a good one. I didn't know how to schedule a post for the longest time. Now that I know it's been a lifesaver. Great idea! Thank you :)

    ReplyDelete
  20. Thanks! this is by far the easiest instructions I've seen! If I can get the picture done, then maybe I'll have a button. I'm still waiting until I get some other things accomplished first but this is a great tutorial!

    Heather
    Buried in Books
    Bloggiesta

    ReplyDelete
  21. Hi Brianna! I used photoshop. The background and header are just different color swaths I arranged to make the stripes/patterns. The girl is a mix of different pictures (her body, some of her facial features) and my own drawing (her hair, a few other parts on her). So it's all my original work.

    I know there are a number of free templates you can find. Try searching for "free backgrounds blogger" in a search engine and you should get a bunch of different results.

    Hope that helps :)

    ReplyDelete
  22. When I pasted my html link in, it transferred it into an image. How do I get it to display as a code that people can copy? Thanks!

    ReplyDelete
  23. Hm, that's strange. Did you select the HTML/Java Script option? Do you mind emailing me your code? I'll look it over and see if I can figure out why it's not working.

    ReplyDelete
  24. I think I just copied something wrong. I tried it again and it worked. Thank you though :0

    ReplyDelete
  25. I have copied it and amended where necessary and on my blog it has the button and header "grab my blog" but no html code underneath for people to select. What could I have done wrong?

    ReplyDelete
  26. Hm, did you paste the code twice? You need to paste it first into a Picture widget and then again in an HTML/JavaScript widget. It would sound like maybe you only used the picture widget?

    ReplyDelete
  27. SO helpful!!! Thanks so much. I now have a working button. I am very glad for it.

    ReplyDelete
  28. Hi there! Wow! I had no idea there were such helpful posts out here in the blogging world. Thank you so much for the highly interesting and very useful info. I can imagine it took a lot of effort and time to create this post, but I really appreciate it. I was wondering, how do I find the direct link to a button I grab from another blog and other to my own. If I want to offer a direct link to their button posted on my blog, that is? Thank you once again for this helpful post:)

    Sarah

    ReplyDelete
  29. Oops! My sleep deprivation caught up with me in that comment. I meant "how do I find the direct link to a button I grab from another blog and 'add' to my own. Thanks:)

    ReplyDelete
  30. Hi Sarah! I'm so glad you found this post helpful. I'm not sure I understand your question.

    If you wanted to add another person's button to your blog, then all you have to do is copy the code they have under their button. Then go to your blog, and wherever you want their button to appear is where you would paste their code. Their button will then appear on your blog and if you click it you will be sent to their blog. If you want to find out what url their button is using, you can right click on their button and select "Copy link location" then paste it somewhere so you can see the url.

    Is that what you meant?

    ReplyDelete
  31. You are beyond awesome. I always check your site first if I want to do something that I don't know how to do. You have never let me down. Thanks for the help.

    ReplyDelete
  32. Rapunzel, That is such a sweet thing to say! Thank you. I'm very happy to hear my blog has been such a resource for you. :)

    ReplyDelete
  33. This helped me so much! Thank you!

    ReplyDelete
  34. thank you SOOO much for the code and for the step by step process. So helpful!! ^__^

    ReplyDelete

It's all about friendly conversation here at Small Review :) I'd love to hear your thoughts!

Be sure to check back again because I do make every effort to reply to your comments here.

Because I am absolutely terrible about following through with blog awards, I can't in good conscience accept any more. Thank you very much for thinking of me though!

Spam WILL be deleted. Attacks on myself or other comments WILL be deleted.

Related Posts Plugin for WordPress, Blogger...