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!
