How to make a Button for your Blog or Event!
I think I'm about ready to make a new button for my blog, I'm not really liking the green, but as you can see I do have a button, and I want to help any of you that are interested and that don't already know, learn to make one too.
Some things you will need before you begin are an account on Photobucket and some kind of graphics program. I wish I had photoshop but I don't and I couldn't afford it, so I downloaded a free program called Paint.net that has worked really well so far for all of my designing. If I deal with pictures that are very big, like my backgrounds, it is really slow for me but I think that has more to do with my computer than with the program.
Okay, so once you have those here is what you do:
1) Open up your graphics program. Open the picture or graphic that you want people to see as your button. If it is a larger picture (like your header) and you just want a portion of it, cut out that part and paste it as a new picture. You might want to add a border and words to your graphic here, or you can add them after you resize it. Since I don't know what program you will be using I can't help much more here with the exact details. But if you need help with this part please email me and I will help you. If you don't have a program and don't want to download one you can send me the picture you want to use and I'll resize it and doll it up for you.
2) Once you have the picture you want to use, resize the image. Mine is 160 x 160 pixels but is a little large so you may want to do 150 x 150 or 140 x 140. Make sure it looks how you want it to and then save it as a JPEG.
3) Go to your photobucket account and upload the image you have just saved. Select the reduce to 160 x 120 (small) option. Leave that page open.
4) Now it is time to create your button. What I am going to do is give you the code I use and you will plug in your information. A good place to start doing this is to open a new gadget and select HTML/Javascript. That way you can see what it looks like on your blog when you're done.
5) That is what my button code looks like. Now here is what you have to do to make it your button. Highlight this part:
then paste in that spot the URL of your blog. This is where you want people to end up when they click on your button.
6) After you have done that highlight this part:
then paste in the DIRECT LINK from photobucket. You will see under your image different codes. For this you want to use the Direct Link. All you have to do is clock on the code on photobucket and it copies it. Then come back to this highlighted portion and save.
7) Save it and then look at your blog and try clicking on the button to see if it worked. If it did, you now have a button!
Okay, now that you have your button you may want to share it with those that come to your blog by creating a scroll box where readers can come and get your button and paste it to their own blog like mine:
I think I'm about ready to make a new button for my blog, I'm not really liking the green, but as you can see I do have a button, and I want to help any of you that are interested and that don't already know, learn to make one too.
Some things you will need before you begin are an account on Photobucket and some kind of graphics program. I wish I had photoshop but I don't and I couldn't afford it, so I downloaded a free program called Paint.net that has worked really well so far for all of my designing. If I deal with pictures that are very big, like my backgrounds, it is really slow for me but I think that has more to do with my computer than with the program.
Okay, so once you have those here is what you do:
1) Open up your graphics program. Open the picture or graphic that you want people to see as your button. If it is a larger picture (like your header) and you just want a portion of it, cut out that part and paste it as a new picture. You might want to add a border and words to your graphic here, or you can add them after you resize it. Since I don't know what program you will be using I can't help much more here with the exact details. But if you need help with this part please email me and I will help you. If you don't have a program and don't want to download one you can send me the picture you want to use and I'll resize it and doll it up for you.
2) Once you have the picture you want to use, resize the image. Mine is 160 x 160 pixels but is a little large so you may want to do 150 x 150 or 140 x 140. Make sure it looks how you want it to and then save it as a JPEG.
3) Go to your photobucket account and upload the image you have just saved. Select the reduce to 160 x 120 (small) option. Leave that page open.
4) Now it is time to create your button. What I am going to do is give you the code I use and you will plug in your information. A good place to start doing this is to open a new gadget and select HTML/Javascript. That way you can see what it looks like on your blog when you're done.
5) That is what my button code looks like. Now here is what you have to do to make it your button. Highlight this part:
then paste in that spot the URL of your blog. This is where you want people to end up when they click on your button.
6) After you have done that highlight this part:
then paste in the DIRECT LINK from photobucket. You will see under your image different codes. For this you want to use the Direct Link. All you have to do is clock on the code on photobucket and it copies it. Then come back to this highlighted portion and save.
7) Save it and then look at your blog and try clicking on the button to see if it worked. If it did, you now have a button!
Okay, now that you have your button you may want to share it with those that come to your blog by creating a scroll box where readers can come and get your button and paste it to their own blog like mine:
<a href="http://www.themomnerd.blogspot.com"><img
src = http://i266.photobucket.com/albums/ii246/mrsmusicmommy/momnerd-1.jpg></img
src></a>
src = http://i266.photobucket.com/albums/ii246/mrsmusicmommy/momnerd-1.jpg></img
src></a>
Here is the code to create a scroll box. Once again you will want to paste in your own information. Otherwise, you'll end up posting my button!! ;) We don't want that, do we?
Now you may want yours to be a different size or a different color. To do that you just change the code. My border is 5px solid black, you can change the width by making the 5px bigger or smaller, and you can change solid black to another color. And you can change the height and width and background color. Once you have changed that here is how you make it yours:
Highlight this part:
In place of that, paste in your button!! That is the code that we made earlier. Once again you'll want to paste all of this in as a gadget and then you can check if it's working.
I hope this makes sense! If you need any help let me know! Good luck and make sure you tell me if you make a button and I'll post it on my blog!
Now you may want yours to be a different size or a different color. To do that you just change the code. My border is 5px solid black, you can change the width by making the 5px bigger or smaller, and you can change solid black to another color. And you can change the height and width and background color. Once you have changed that here is how you make it yours:
Highlight this part:
In place of that, paste in your button!! That is the code that we made earlier. Once again you'll want to paste all of this in as a gadget and then you can check if it's working.
I hope this makes sense! If you need any help let me know! Good luck and make sure you tell me if you make a button and I'll post it on my blog!
Thanks!
ReplyDeleteThis is awesome info - THANKS! I have a couple of buttons in mind that I want to create.
ReplyDeleteI tried to do a signature file using the instructions over at TCBOTB but they suggested Paint.net and then used instructions/screens from a different program. I got TOTALLY lost.
If you have time, would you post a little tutorial about getting a graphic into Paint.net and how the dickens to edit it? lol
Thank you SOOOOO much for this!!! I need to make one for my quilt swap!
ReplyDeleteOh, thank you so much...I am so doing this as soon as I can! You are the best to look up for us tech challenged bogger wanna be's like me!!
ReplyDeleteGreat tutorial! I would have loved this back when I made my button!
ReplyDeleteAmen! This would have been soooo helpful to me back in the day! LOL I've always wondered about Paint.net. It's nice to see an opinion on it.
ReplyDeletehttp://cusmile2day.blogspot.com/
ReplyDeleteOk..you click the pic and it goes to my site, but, I cannot figure out how to get the scroll box to work! HEP ME!
I'm gonna have to favorite this. I made a button for my giveaway, but I couldn't quite do the scroll box bit. Thanks!
ReplyDeleteI can't get the scroll box to work either :(
ReplyDeleteI've got it now! Go grab it!! While you are there, look at the little button I did for my sponsors. You like?
ReplyDeleteWhere does everyone find all the cute pictures that they use for their buttons?
ReplyDeleteThanks for posting this tutorial, you make it sound do-able and I am a complete idiot about all computer-technical things.
Hey, I put the scroll box on my site under the button you made and it kept wanting to recognize my code in the box as the code for the button and put the button in the box instead of the code. I did a bit of html research and found that I could replace the < symbol in the code with < and the > with > then when it shows up in the box it has the < and > but doesn't process the code and leaves the text in the box. Crazy, but it works now and y'all can go grab my button code :) Thanks a bunch!
ReplyDeleteHa ha ha--I forgot the comments process html also! I'm really not crazy like that comment makes it look! I replaced < with "& l t ;" (without spaces or quotes) and > with "& g t ;" (again, no spaces or quotes). Crazy HTML recognition is everywhere!
ReplyDeleteI got the button okay, but the scroll bar is giving me fits. I'm not HTML literate. I'm trying to do Angela's fix, but, hm. Bites being old;)
ReplyDeleteI made my first button !!! Thanks ever so much. It's not a great button, but it's mine :-)
ReplyDeleteIt's on my blog,if you want to look :-)
Woo hoo! I did it! I made 2 buttons, one for each blog! Thank you thank you thank you!
ReplyDeleteCouldn't have done it w/o your help :)