So many of you emailed me after I posted the tutorial on how to resize a button asking me to teach you exactly how to make one. So here is a tutorial with step by step directions on how I do it… as I am sure there are a million different ways to get it done!
I use the same html for every button I make. I can’t remember where I first got it, but it works so I use it and haven’t tried any others. Here is the code:
It looks like madness or a foreign language, but when entered right, it will post like this on your blog:
A nice graphic with text box underneath it.
Here is how to make it:
1. Photobucket
First thing you need to do is open a Photobucket account. Any image hosting site is fine, but Photobucket is the one I use and so all my directions for this tutorial will be based off of codes from that site. Maybe all sites are similar enough for this tutorial to work for all image hosting sites, but since I don’t use them, I don’t know!
2. Upload
From your account, upload a picture or your logo. If you need ideas on how to make a logo, try scrapblog.com- they have a million cute clip arts and backgrounds.
3. Resize
Resize your image in photobucket to be the size you want. Most people like a 125×125 button, but that is the smallest I would ever suggest making one.The one I am making is 200×250, which is actually on the larger side, but this is just for this tutorial.
4. Take Note of the Codes
When you look at your picture from your album homepage, you will notice 4 separate codes under your picture when you scroll over it. It will look like this:
Open your blog and get ready to add an html gadget by going from Layout-Add a Gadget-Html. It will pull up a box that looks like this:
This is where you will be adding your html code for your button that you make.
(The rest of the directions will be in a word document so you can copy and paste the code in its html form easier)
Making a Button
Now save your html code and cross your fingers that it worked!!!
If you feel like this is too much to learn or you are super confused, I will make one for you! Check my advertising page for details and just scroll past the ad options
About Steph from Somewhat Simple
This was very nice of you to share!!! Thanks for the directions-I'll have to try it out one of these days. Love the new look of your blog.
Ah, great, thank you so much for sharing the secret!!! I've been toying with the idea of making a button for my blog and was discouraged by the code… I am saving this and will try…
Thank you, thank you!! Love your new header too.
This worked like a dream, thank you so much!
thanks for sharing i haven't tried it yet – i think this is something i will have to try when kids are down and it has my full attention- i ll let you know how it goes- thanks
Hi, this is perfect. I discovered this a few weeks ago, and never thought about doing a post on it, lol! I just might. Thanks for the tip on Scrapblog(?), I've been using pics.
Hi Steph- I was excited to get home from work today so I could check out your blog. I knew you would have it redesigned since V Day is over. I love your newest change. It looks great. I also think you are a genius teacher in all things html. Your tutorial is great. I get it – all the html gobbely gook. thank you.
Diane
Thanks for sharing all this information…one day, when I feel really brave, I will try making one!
Thanks for the tip! I want to try this but haven't had the nerve. You make it sound simple
Ohhhhhhhhhhhhhhhhh, how I needed this about 3 hours ago!!!! But I am soooo saving this link! Thx!!!
m ^..^
This is great info for a newbie like me. I'll be checking back for more tips!
Very generous of you to take the time to share this! Thanks!
What a great tutorial! I get asked this question a lot and you spelled it out so clearly.
Thank you for linking it up to Tip Junkie. My readers are going to eat this up!
Hi there!
I just found your blog the other day and just love it! So great! Thanks for the tutorial.
XOOX
Jen
I can handle the button, but how do you add a text box below it so people can copy the HTML for their blogs?
i just did a blog button for my cousin using a similar way. it works great. i think yours it just about the same. so i can testify it works. it really really works.
Oh my gosh!!! It totally worked for me! Thank you so much! Your directions were so easy to follow… thanks again!
Thanks so much for sharing these directions! I've never tried to make a button with the code under it before, so I'm excited to try!
I've tried, and tried. And tried & tried to do this… but up until now, nobody else's tutorials worked for me. Thank you from the bottom of my heart for sharing this with us. I am sighing a huge sigh of relief right now! I am also going to post about this sometime soon on my blog, because I think everybody should know about your wonderful, generous blog!
Blessings!
-Sarah
I already had the button taken care of but couldn't figure out the text box. Thank you so much for posting this. You made it VERY easy!
Great tutorial!! Thanks for sharing; I think I now have the courage (and know-how) to try it myself!
What an awesome tutorial. I would have to REALLY cross my fingers if I tried it – I am such a techno duh.
Thanks for sharing this. Great info for newbies like me.
You are fabulous! Thanks for linking up to Thrifty Thursday this week!
Hugs,
Leigh
Tales from Bloggeritaville
http://www.lbratina.blogspot.com
Oooh Weee, thanx so much for sharing this! It seems way easy to do myself!
This is such a helpful post thanks so much for sharing. One thing, would it be possible to put the html code in a format that can be cut and paste as when I try to select it to copy it only comes up as an image file. Unable to select and copy on the scribd format either. Or is it just me being thick, could be lol!!
alicia
Thanks for sharing!
Thanks for joining Get Your Craft on Thurs. at Life As Lori
Please join me next week for another great party!
Thanks for the button 101 post! I'm pretty sure that I'm not the only one who gets the heebie jeebies when thinking about having to make a button. Great tutorial!
Ack! I've looked and looked and can't find the link back to the Make Your Monday blog party…Am I missing it somewhere?
Thanks so much for visiting Craft Schooling Sunday! I need this tutorial myself! all the best, Sara
I am a novice but I was able it to work. Thanks for sharing this with us.
It is such a good idea for a tutorial… I remember learning this was really hard!
I am so glad you stopped by to join our little the party, I hope to see you there again! We have them every Friday. (And we are now doing a recipe link up on Wednesday!)
Cassity @ Remodelaholic
Thanks so much for joining my party!! And great tutorial. I really really love your blog!
XOX
Jen
I'm the only one here that can't copy and paste your code. I've been trying to figure this out for 3 years with no luck.
(
You're my hero! I totally needed this tutorial this week. And 1300 followers? You're a rock star!!!
I did it! I love your Blogger 101 Tutorials. Off to learn some more. Thanks a bunch.
http://3sunkissedboys.blogspot.com/
Thanks so much for your colour coded HTML instructions! I did it!!
The directions are easy enough, but when I copy the code to put in on another blog, the button doesn’t even show…help?
Do you have a WordPress blog? I dont know if this code will work on WordPress because when I switched from blogger to wordpress, my buttons were messed up. Plenty of other people have used this tutorial on blogger without any problems, but WordPress may be different. Sorry I am not any help!!!
Thanks!! I wasn’t able to create my button until I read your tutorial!!!!!! It’s great!
I can tell you that I have read so many instructions on how to create a button over the past 7 months, and finally this one worked! I had to have someone create my blog button, but I used your instructions to make my etsy shop button…you are a true lifesaver!!!!
Thanks Jessica! I am glad it worked for you!