Buttons are the hottest thing out there in the blogging world right now. Grab mine and I'll grab yours, right? (Oooh, that sounds a bit inappropriate.) I think a lot of blogging newbies think that making a button requires a whole lotta technical stuff. And yes, it does. But if you understand a few basics, it will make sense. Thanks to Beth for this question!
Disclaimer: I do not claim to be an HTML expert. I mean, I'm working on it, but by no means could I do an entire blog design.
So, what's the deal? How do you make a button? And more specifically, how do you make one that, when the code is copied, leads back to your blog?
Well, look no further. I have all, I mean, some of your answers.
1. Get your image. It can be anything. A picture, a red background, whatever. Open that picture up in whatever photoediting software you have. I use (gasp!) Photobucket. I know, so professional. But it's sooooo easy for me to use. I house all my pictures there and it's a great place to do basic editing.
2. Resize. You'll need to resize the image to whatever size button you want. The most common size is 125x125. That fits most people's sidebars without going over the edge. Personally, I believe mine are a tad bigger. Most sidebars are around 150-200 in width, so just make sure you take that into account.
3. Add words. Add whatever you want your button to say. It could be your blog name, your weekly meme or whatever.
4. Upload it to whatever hosting site you use for your pictures. (Remember, I use photobucket, but I'm sure you could use any hosting site. And since I'm already in photobucket for my editing, I'm set to go!)
From here on out, all you need is the code. I'm going to be completely honest with you... the only reason I know the code is from using buttons over and over. I'm a genius, I know. Also remember that a blog button code has two parts. The first part of the code is the code for your actual image. The second part of the code is for the text box that you see under your image (the code that people use to copy and paste your button.)
this is exactly what the code should look like:
The top section is the code for your actual button. So basically you'll need everything in red:
img (space) src=
then in quotations the exact location where your image is located. "PIC LOCATION.JPG" (You can see what mine looks like above.) Make sure you have the end quotes. The beginning of the code should have the less than (<) sign and the end of the code should have a backslash with a greater than sign. (/>)
You with me so far?
The second part of the code... you must first indicate the text box. You can change those numbers to whatever you want them to be. Obviously, 6 rows and 20 columns worked for me, so I never changed them! The /br is just a break and the center part just means that the text is centered in the text box. The (a href=) part is where you put your blog URL. Then again, you have the img (space) src= with the location of the picture all in quotes. Notice how this is the same exact code as the first part! This is what your readers will copy and paste so the button shows up on their blog! The final three pieces are just closing off the above codes.
Again, just make sure you include everything there... quotations, carrots, letters and backslashes!! I'm going to attempt to make a box so you can just copy and paste, then replace it with your own img and URL....
(Ok, I'm not as much of a genius as I thought... the box above is missing one piece of code!! BE SURE TO ADD THE FOLLOWING TO THE END OF THE CODE FOR IT TO WORK!! NO SPACES!! See, I told you I didn't totally know what I was doing and I'm sure some of you are going to read this and laugh that I couldn't stinkin' figure this out... and I'll have you know it's driving me nuts, but I'm not going to waste anymore time on it!!)
< / textarea>
And there you have it!! And I all do for all my different buttons is just copy and paste an old one and replace it with the new picture location!!
Got it?? Please feel free to leave me a comment if you are confused or need help!! I will definitely help anyone who wants to get set up!
Good tip? Let me know by leaving me a comment! I always love hearing what you have to say!
9 comments:
Great tutorial! I had that part figured out.. well I copied someone elses code and put mine in.
What I'm trying to do is make a scroll box under the button, so people can grab my code to add my button to their blog. Holy run on sentence!
You totally rocked! Worked like a charm.
Thank you!!
Oh My! I'm going to have to try this later. Thanks for sharing that although it's a lot of info for my HTML-challenged brain. Ok, I'm sure this is a dumb question...but where would one get the cute pictures like your little woman juggling? Are those specifically designed by someone and are there any that can be used withough copyright infringement?
I've been trying to make one for ages!!!! Thank you. You rock! =D
Cool! I will have reread this later and make one. For a HTML code challenged gal, this ,ay take me awhile.
Whoo hoo!!!!
Thanks Julia! I'm about to go finish up my button now! Check back next week for my super awesome meme to go public!
Not be be weird or anything but I could totally kiss you right now. I am new to blogging and feel like the ONLY blog in town without a button. I had no idea how to make one until now. Wow, thank you ever so much!
Love your new look and thanks for the info!
I tried to make mine and it didn't work. I tried it 3 times and it didn't work. Maybe you can help me.
Post a Comment