Wednesday, February 25, 2009

"How To" Make a Button/Badge

How to make a button/badge for your blog or website.

1. First, you need an image or picture you would like to use as your button. You can either take a picture you have and re size it or make an image from scratch. If you're making one from scratch you will most likely need Photoshop, unless you have another program you use. You can download a free trial of Photoshop at adobe.com.

If your using Photoshop - Open up a new document to be sized 100x100 pixels. This is the best size for a button in my opinion, you can make it any size you like. The simplest thing you can do after opening a new document is just type the name of your shop/blog/website. For example:

You can get as creative as you want by adding a cute background or a picture.

If you're not using Photoshop - Get the picture you would like to be the button and head on over to a photo editing site. A great one is Pixer.us. Upload your picture to the site and re size to about 100x100 pixels. You may have to crop it to make it a perfect square. But like I said, you may choose any size you want if you don't want to use 100x100.

2. Once you have your photo/image complete and sized save it to your computer. Now, off to get your photo a HTML code. Photobucket.com is easy to use and will assign your photo/image a HTML code. Upload your photo/image to photobucket. This is what it will look like:

This is a screen shot of my button on Photobucket. There is your HTML code under your photo/image.

Copy the "HTML Code" and place it inside the code where it says "ENTER PHOTO HTML CODE HERE"
And put the website you would like your button to lead to where it says "ENTER WEBSITE HERE." Make sure you put http:// in front of your website address. My button code for example:

<em><a href="http://www.smilemonsters.blogspot.com"><img src="http://i2.photobucket.com/albums/y17/Jo1971/Button2.jpg"/></a></em>


Here is the code you'll copy and paste then enter your personal info:

<a href="ENTER WEBSITE HERE"><img src="ENTER PHOTO HTML CODE HERE"/></a>

Once you have entered your info in the above code you will have your very own HTML code for your button/badge! Exciting uh?

On Blogger- Go to layout - Add a Gadget - HTML/Javascript box - paste your code you have worked so hard at here. This will make your button appear on your blog. Leave the window open.

NOW, you want to make that precious code available to your adoring fans. They will in turn copy and paste it to their blogs to proudly display your button! You must make that HTML code "publish-able".

Go HERE . There are two ways there to display your code. I would pick the easier but that's just me. It's a matter of copying and pasting a simple code then adding your code to it.

Remember that window you left open in blogger? The one you put your button HTML code in? Go back there and paste this code there. Under the the code you put there just a bit ago. You'll have two codes there now. One that will display your button, one that will publish so it can be copied. When you click save and view your blog now you should see your button plus a code beneath that your fans can copy!

It will look like this:





I tried to make this as easy to understand as possible. If there are any questions feel free to ask. I'm not a whiz at this but I can sure try to help!



Contributing author : Hannah!
Post was updated on 1/14/2011

Share

110 comments:

Sherry said...

thanks for such good info. I have not try yet.

Genejosh said...

i'll try this one once i have time and get back to you once i've made one..thanks

JuliaB said...

I've always wondered how to do this! Thank you! x

Rachel@oneprettything.com said...

Oh this is fantastic! I know so many people who have been wanting to do this! Thanks so much for sharing, I'll be linking to this.

Missie Zee said...

This is perfect. I've been wanting to try making my own button for some time. Thanks for the tutorial.

Cecelia---Sis---Mom said...

Thank you so much for sharing this information. I have been wanting to make one for so long.

Cece

Charissa said...

I've always wondered how people do this on their blogs. Thanks for the info!

robinrane said...

Oh this is grrrreat! I needed it bad! Thx!
Robin Rane'
All Things Heart and Home

Susan said...

My code to grab isn't in the little window like yours. what am I doing wrong?

Thanks

Junie Moon said...

I saw your tutorial on One Pretty Thing and popped over to say thank you so very much. I've been so frustrated trying to figure out how to do this as it is not my life goal to be an HTML expert. Your instructions are clear and simple for someone like me. I appreciate it.

Carebear said...

Thank you so much for this tutorial! I'm off to try it out!

Stephanie said...

Wow! Thank you!!!

Creations With Heart said...

Thank you so much for this post!!

This is where I'm stuck though.
I don't see anywhere where it says- "ENTER PHOTO HTML CODE HERE"
And put the website you would like your button to lead to where it says "ENTER WEBSITE HERE."

Any suggestions? :)

Kimmy said...

I never knew how this worked until now! Very neat..I was tooling around the 'net and ran across your site.
I love the layout you have. You have a very nice blog.
Have a good week and thanks for the tip!

PlumValleyDesigns said...

This is a great blog! I chose this one over about 12 others I looked at. Thanks!

Dayfamilyof4 said...

I love my new button! Thanks :)

Analou and Bones said...

Thank you so much for this information. I just finish making my first badge. I really do appreciate sharing this information. Have a nice day.

The River Otter said...

This page was unbelievably helpful for me. I just made Twitter and Facebook badges for my band's MySpace page (www.myspace.com/thegleasons so you check it out, hot off the internet, as a testimonial)
Thanks for this. You are wonderful to put this out there.

Name Badges said...

i fond many important and good information from your blog. really this is a informatics blog.
thanks you dear for provides us good information.

genial said...

greetings from Jakarta Indonesia ;)

this kinda great information for me :thumbsup: thnx for sharing this.. you're so kind!!!

Blog Queen said...

thanks sooooooo much! I've been wanting to make a button that's others good grab for years. You're a life saver!!!!

SewMuchAdo said...

You are the best, I'm so happy I found your instructions, I think I can actually handle this now!

Molly said...

I've looked everywhere for simple instructions to do this. Thank you! I really think I can handle this. Planning to try it today!

Molly @ My Audio School

Molly said...

Well, I tried it and it didn't work quite perfectly. I pasted the code into one of my blogs and the button appeared just fine, but the HTML code was in a looooooong string below it. Is there anyway to get it into one of those scrolling boxes?

Also, when I copied the code that would allow someone to put my button on their site, and pasted that into one of my other blogs, the button image appeared but there was HTML code above and below the image. What am I doing wrong?

Wear Necessities said...

THANK YOU THANK YOU THANK YOU!

Oh wow. You are so awesome! Thank you so much for creating this tutorial. It's so exciting to be able to create fancy little html buttons on my website.

Check out my little button on the far bottom right if you like!! i love it!!

http://wearnecessities.blogspot.com/

Christi said...

Thank you! I followed along and got my button/badge up for sharing on my page. I've also added you to blogs I'm following and looking forward to more great blogs!

Cristina said...

Yes..I am almost there! How do you create the code within the scroll area for others to copy/paste? That's the one bit I can't get - and I used Flikr instead of photobucket..I couldn't log in from work!??!

Thanks for this!!! AWESOME!

xx

Cristina

Jane said...

This was fantastic, exactly what I needed to know!!

Jane

Freedom of Stitch said...

OK... so it took more tries than I care to admit, but I DID it! And you ROCK all up and down the block for sharing this lil how-to... vive la tutorial!! Many thanks, Victoria www.freedomofstitch.com

Sparky said...

I've tried several times and it doesn't work. :((

SpoTtheSnoT said...

Thank you so much!!! just what i needed.

GranolaMom4God said...

Thanks so much for this GREAT tutorial on how to make buttons. You made it easy. Everything else I googled was difficult!

Helen McGinn said...

Thank you, thank you, thank you!!

The Fountain Yield said...

hello- im trying to do but i cant! im using image chef. the codes are different. please help. thanks

Chelsey said...

Thank you soooo much!!!! I knew the HTML code, just not how to make the code "publish-able" to make it available to my readers. Thanks again!

nightblastz said...

This is cristina's message to you..Yes..I am almost there! How do you create the code within the scroll area for others to copy/paste? That's the one bit I can't get - and I used Flikr instead of photobucket..I couldn't log in from work!??!

We have the same problem..Help please..

Anonymous said...

Good post and this fill someone in on helped me alot in my college assignement. Gratefulness you for your information.

Melba said...

Wow, this is great! I just happened to find you by doing a search about how to make my own blog button. This was very easy to follow and I now have my button, though I may perfect it a bit.

Thanks for the great how-to post!

Melba

Caitlin @ That House on The Corner said...

Thank you thank you thank you! You have saved me so much time!

rsanders said...

Thanks for this info. I will try this one out.

Mewes Mountain Arts said...

Thank you! Works like a charm!!

Sonja said...

Thanks so much!

Marisa @ Getting Back To Basics said...

Thanks so much. I have bookmarked you to come back to when I'm ready to design my badge. So far yours is the best how to post I've come across.

Anonymous said...

I can't get the badge to work properly, I would like to be able to click on the picture and be linked to my website, however if I click on the picture I am taken to the photobucket link. Do you have any suggestions? Please email: jwheeloc@indiana.edu
Thanks!

Parenting in blue jeans said...

I feel a little lost after reading this but I am going to attempt it and am very grateful for your post!

Vibrant V said...

Thank you so much for this! I have been puzzling over how to make buttons for hours upon hours and your post saved me in the end! :)

The Pigg Family said...

Thanks. This is excellent. Is there a way to do this in a post but not on the blog as a whole? I'm doing a "bucket list" and thought it'd be cute to put a "donate" badge on the page...but don't want it to link all from the actual blog page but from a specific post...please email me the answer rather than responding to this since I don't want to do follow ups because of all the spam on here.

momikoito said...

thanks to this... I was able to create my own badge and I also found out that somebody's using my email address for photobucket account.

MySkinConcierge said...

Thanks! I just used your instructions to make a blog badge, but I need someone to check and see if it works. Can you tell how un-techie I am!!! I would really appreciate it! You can find me at http://myskinconcierge.blogspot.com/ and www.twitter/myskinconcierge also www.facebook.com/myskinconcierge

Katie said...

Thanks for the info!

I tried this and it did work! But blogger is messing it up because it is adding in my blog link somehow on the badge so my link isn't working! Any idea on what is wrong? Thanks!

Jen said...

A million thanks!

Ranting_Navy Wife said...

Thanks so much for posting this blog. Ive been looking everywhere to find out how to do this. It seemed so difficult and the steps you provided and the way you described everything was so very helpful and it made it seem easy. Thanks so much!

Dawn said...

Thanks so much for this! I will be trying it out as soon as I get the chance:)

bigguysmama said...

I copied the html code, but don't see anywhere that says "Enter photo html here". Is it in the html code? Or are you looking at something else when we're supposed to enter the html? This is where I'm stuck.

Thanks,
Mimi
mnjesusfreak at gmail dot com

Fussy Monkey Business said...

Just found this tute. Little confused on where to find the "ENTER PHOTO HTML CODE HERE"
And put the website you would like your button to lead to where it says "ENTER WEBSITE HERE." Help please:o) I really want to have a button:o)

Moggypie said...

Did anyone ever get an answer to the question about where the "ENTER PHOTO HTML CODE HERE" and "ENTER WEBSITE HERE" boxes appear? I followed all the instructions here all the way up to copying the HTML code on Photobucket--but there are no boxes for the above on that site, nor on Blogger in the Gadges section, so I do not know where the author is seeing these. Thanks!

Moggypie said...

Ah ha! Never mind! Figured it out! Look at the string of html code for your image that you get from Photobucket--compare it with the smilemonsters sample (the one following "my button code for example" in the article), and just replace the smilemonster URL with your URL, and the stuff after img src= with your image source info. Works like a charm :)

melina bee said...

thanks, this is super useful and I can't wait to make my own badge
melina bee

joyce said...

thanks for the info. im going to try in now..

Sara said...

Thank you so much! This is almost exactly what I was looking for. It was so simple! You Rock! Thanks again for posting this.

www.touchofhomelearning.blogspot.com
www.touchofhomelearning.com

Lori Smith said...

Taught me something...and made me look computer saavy! THANKS!
www.emptyhandsfullhearts.blogspot.com
www.doingitafraid.org

Krishna said...

This is definitely a great help for me!
Thanks!

Pickled Pink said...

You're awesome! Thank you, sooo much! I think I did it! I have read several tutorials & yours had language I could actually understand, THANK YOU! Now, can you tell me how to put the code that people will copy into a box, so that it's not just the text below the picture? I've seen some that have the code partially hidden in a box. Thank you, again...

♔Reyna♔ said...

I tried it and it didn't work quite perfectly. I pasted the code into one of my blogs and the button appeared just fine, but the HTML code was in a long string below it. Is there anyway to get it into one of those scrolling boxes?

Thanks!
Reyna
www.glamglory.blogspot.com

Rachel's Whimsical Wardrobe said...

This was just what I was looking for, thank you for such an easy to follow tutorial.
The encoding thing didn't seem to work for me though, just produced a string of code under the button, but it's not essential, I was more interested in having a button to link to my site : ) However if you could shed some light on the encoding problem, I'd be grateful : )

Anonymous said...

I really like your blog and i really appreciate the excellent quality content you are posting here for free for your online readers. thanks peace claudia.

Meg said...

nice post! very informative and useful, i've got to try this!;)

Jennifer said...

What a great post! You've written it so that I think even I will be able to figure it out! My goal is to do this project this week. Thanks so much for sharing this information. I'll let you know how it goes :)
Oh, and I am loving your blog. I just discovered it. I've already decided my kids are making the birdseed project on Saturday!
Thanks,
Jenn

Geralyn said...

MAHALO NUI LOA for this post!!!
I totally appreciate your brilliance and for sharing.
Wishing you joy!
Geralyn
www.hokulii.typepad.com
www.flutterbutter.com

CLewis said...

Thank you!! This was easy to follow and though my button isn't anything special (yet) I've got one and for that I am proud! And grateful, of course:)

My name is Tiffany said...

Thank You so much for this post. I have tried others that for some reason did not work for me but this one did. This post is the reason I have been doing the happy dance around my house this morning.

Victoria Strauser said...

I just did this and it works!! I used Flikr and the hardest part was after uploading my pic, finding where they kept the code. ;o)

http://www.aspendance.blogspot.com/

miki said...

Great directions!
I hope you don't mind that I posted a link back here for other folks who would like to learn! :)

http://blacktulipshop.blogspot.com/

SisterBatik said...

Just did this - it was super user friendly - thank you : )

http://sisterbatik.blogspot.com/

clavs said...

That is so nice of you to share this.
I have been trying to learned how to make a badge for my blog, now I know...
clavs

Jennifer said...

This is exactly what I needed. Thanks so much!
Now, I need to figure out how to get those little buttons you have under your signature (the blogger, fb, twitter, etc.) Do you have a post about that? :)

Maria Rodz said...

Thank you so much! It really helped! :D

Anonymous said...

Hi - I am really happy to discover this. cool job!

alanna. said...

Thanks so much! This was perfect, simple and easy to understand!!

xo alanna
iheartlaughing.blogspot.com

Bang said...

you're such an angel! thank you :D More power

Gwen said...

This was just what I needed - I was able to create my own badge. Thank you SO MUCH! :)

SInea said...

OMG

Sara Shoemaker said...

this helped a trillion! thanks so much :)

Anonymous said...

Hey - I am really delighted to discover this. great job!

Sarah said...

Thank you so much for posting this!!

makerland said...

Thank you SO much for this - I can't wait to make my own (I shall give you full credit too!) Yours is very cute by the way.

Priyanka said...

Is there anyway to decrease the size of my code box? It's waaayy t long now.

And thanks:)

Mare said...

thank you, thank you!! but can't get to pixer.us :( will try something else!
Luv, Mare
http://mare-itsjustmebeingme.blogspot.com/

Chisum Crew said...

Hi Hannah, Thanks so much for the info - I had no clue. I did run into a problem with my pic not showing up...Not sure what I'm doing wrong. The text box is there and if you click on the area above it (blank spac, sigh) it does take you to the blog. Any ideas? Thanks, lg

http://chisumscrew.blogspot.com/

Lynn Read said...

OMG I Did It!!!!! I don't understand codes at all, but I did it!!! I'm freaking proud!!! Thank you so much!!!

axlrate7 said...

Thank you for giving a nice tutorial, I made now my first ever badge for my blog... God bless you! =)

Candace said...

Thank you SO much for being the first person who explained this clearly! I've spent hours looking over websites, none of which I understood! The only recommendation I would make is to add the "below" after the "place code inside" instructions. I'm new to this, so I didn't understand where to find what you were talking about until I read further down.

But thank you! You were extremely helpful!

ChiChi81 said...

Thank you so much for sharing this! I tried it and it worked!

Cheers!
Wi

reyapot said...

thanks for this post.. i have been trying to figure out how to do this for hours.. :) good thing i found your blog..

i hope u can visit my blog.. i just started a weekend meme that's why i needed to post my badge's code :)

i hope you can participate too! see u!

thanks again!

Becky @ The Barefoot Seamstress said...

Thank you thank you thank you! I have tried every other tutorial around and your's was the only one that worked properly!

Cyber Community said...

Oh my gosh..I thought it was hard to make something like this. thank you very much for posting this!

Lil'Bits said...

thank you ! i have tried several other how to create grab button but none worked! yours did! the first time .(i do have a ./> symbol behind my button and don't know why?) no matter i will practice this more !thanks!!

Kelly @ Corner of Main said...

Thank you!! I made one simple button, now I am going to attempt one with a code box underneath...

s smallcomb said...

It was a bit trial and error for me, but I did it!!! Yay! Thank you so much for this tutorial!

Pinaynanay P said...

I've always wondered how to make it! I will try this one and hope to make one ! thanks for the info!

Amanda said...

Thanks for your post! I'm a teacher, new to blogging and I am majorly intimidated by code.. but it's not so tough!! I continued on to make a published code box, but the box is stretching into my blog... not matching up with the format of my blog :-/ Any ideas?

Thanks again!!
Amanda
Learn, Laugh, Grow

Janet Johnson said...

Thanks! Super helpful. :)

Kate @ A Creative Cookie said...

Thank you so so so much! I just love my new buttons! This is so helpful - thanks again!

Kendall said...

Thank you SO much! I have tried so many other tutorials, and they haven't worked! Thanks for making this simple and easy!

Jamie said...

Thank you for this!

Joanne said...

This was a great tutorial! Thank you! I will mention this in my latest post if this is ok? Let me know if it is not. :)

Olya said...

Well, thank you so much! Such a good step-by-step tutorial. :-)

Olya
www.creativesideofme.com

Marie said...

thank you so much for this! i used your code!

Nancy Johnson Horn said...

Thank you so much for that tutorial! It worked!

Anne Kimball said...

Hi Jo, I’m Anne from Life on the Funny Farm (http://annesfunnyfarm.blogspot.com).

A couple weeks ago I started co-hosting a blog hop (Tuesday Archive Link-Up), and it just occured to me that I should have a blog badge. I went to Google and it brought me here! I have to say I'm a little intimidated, b/c I'm not too tech savvy, but I'm going to give it a try. I also pinned this.

Anyway, thanks so much!