Sunday, November 9, 2008

How to Make a Blog Button

This is an update to a post I wrote a while ago on my personal blog! I've actually realized it's much easier to make a button since I wrote that post!! So here we go! Here's how to make a clickable blog button using html!!

Before we get started on the actual html code there are somethings you will need to do first:
  • First, you need to create an image. I made mine on Adobe Photoshop. There are several websites that specialize in buttons if you don't have photoshop. Google "Blog buttons or chiclets" in order to find these websites. You will then need to save your image to your hard drive!
  • Next, you will need to upload your image from your hard drive to the internet. You can do this by uploading it in a post on your blog. You can also use Picasa, photobucket or Flicker.
  • Then, you will need two URL addresses to insert into the html code. The first address is the site you're linking to. The second is the address where your image is located on the web. (To find this address, click on the image in your published post. Then right click on the image, scroll down, click on properties and copy the URL address.

Now we are ready to create the html code and to install it on your blog.
  • Go into the layout section of your blogger account and create a new Gadget.
  • Choose HTML/Java Script.
  • Copy the code below and paste it into the text section of your new HTML/Java Script Gadget.
<center><a href="URL address you're Linking to"><img src="URL address of your uploaded image"/></a></center>

  • Replace the sections in red with the two url addresses that meet your needs.
  • click save.
  • Enjoy your new button!
Hope these steps where helpful!! Let me know if this tutorial was useful, confusing or unclear!! Thanks

Now, if you want to learn how to make a scroll box under your button so others can grab your code GO HERE!

63 comments:

Chips and Salsa with Beans said...

Just what I was looking for! Thanks for the help. Wish me luck!

Rae Ann said...

Thanks! This was just what I needed. How do you make it so the code is visable so people can copy/use your button? Do you just paste it into a text window?

Laura said...

I'm so glad I found your blog and your super easy-to-follow tutorial. However, I've been working at this now and for whatever reason, I can't get anything to show up when I insert the pieces for my own button? The only thing that has shown up is "alternative view" or any other words I inserted there. I've saved my picture down to 150 pixels by 150 pixels, I've used your code and even tried just plugging my info into the codes for other "photo" buttons I have on my blog, but still no luck. Do you have any suggestions? I know I'm a beginner at this, but it doesn't seem like it should be this frustrating! Can you please help??
Thanks so much!

One Creative Queen said...

Thank you so much for a great, easy to follow tutorial! I did a trial button but took it down because the picture was way too big. Then I got all involved in editing pics in PhotoBucket. :) Your tutorial works great and is ultra easy to follow. What a welcome relief!

McKay Family said...

Like Rae Ann, I have the same question about making the code visible so people can use the button.

Also, I am having sizing issue...it's either way to small or just too large that the edge gets cut off when uploaded...any suggestions??

Jen said...

I do have a tutorial on how to make the scroll box where you can copy the code. It's under my tutorials.

As far as the size of your button goes make sure to create it smaller than the width of your sidebar. I would say make it less than 200 pixels and it should fit!

If you still have questions please feel free to email me!!

Jen

Melissa said...

I just found this blog today, and it made me so happy! Come over to my blog to see my blog button that YOU helped me build!! Thanks!

I also use google to figure out how to do stuff!

Kim... and Her Coffee said...

THANK YOU SO MUCH for these tutorials. I never would've figured this out otherwise. Love your site will link to it from my blog. A million thanks!

Linda said...

Very helpful. Just what I needed.

redpolkadot said...

I sware if I could kiss you I would. THANK YOU!!!! I feel like I have been looking for this info all of my life. Now I just have to figure out how to get the cool box so people can get the code. YOU R AMAZING!!!!

The Beaver Bunch said...

You rock Jen! I just made my own blog button and text box(es) with HTML inside for others to use when linking to my blog! I linked your blog to mine as a show of thanks! Thanks again!

Melinda said...

This worked thanks!
cakesbymelindajoy.blogspot.com

Michele said...

THANK YOU!!! Finally someone who could explain this so I could understand!!!I am so excited!!
You can see my button on... http://itsinthebag2007.blogspot.com/ And I'll put yours on mine!! THANK YOU!!!

Kristi said...

Ok, I know your instructions should be simple enough but I'm just not getting it! I don;t know what I'm doing wrong. My blog is http://maddiegirlfashions.blogspot.com/

If you can tell me what to do.... Thanks!

Kelly said...

thank you so much for doing this. I had a blast creating my button and it was all thanks to you

The Sheppard Bunch said...

This was a big help! Thanks!!!

Under the Florida Sun said...

I Googled how to make a blog button and your blog came up. What a great tutorial. Thanks so much! I gave you some linky love on my blog for this!

Have a great day!

Xue Lin said...

Thanks so much Jen!! You are my hero, but there's one problem,
can you go to my blog?
www.flyaway-twinkle.blogspot.com
whenever i put my blog button, the template will get ruined. why?
so i had to put the button just below, can you help?
thanks!

Gena said...

Oh, my gosh! Can it really be that easy?!
Thanks, girl!

Dawn said...

Perfect! Thank you. So simple to understand.

Bella Crafts said...

So glad that I found your tutorial! Can't wait to create my link button and html code.
Thank you for sharing!

chili pepper said...

Hey thanks. I think even I can do it following your instructions!

PhotoJenique said...

Got there in the end, thanks to you! And I put a scroll box under the button too! Thank you :)

MammaDucky said...

Holy cow! I didn't realize how simple it was! Now, could I have figured that out on my own? Heck no. THanks for the help!!

Brooke said...

thanks for sharing this simple to follow tutorial!

Ben, Heather and kids said...

Thank you SO much for posting these easy to understand and follow directions. I'm far from a blog-genius, but I was able to create a button!! (I gave credit to you, by linking your blog in my posting!) Thanks SO much! :)

Rachelle said...

Awesome! You are an incredible teacher! I'm doing a test button right now and once I get my real one up, I'm going to do a post on your tutorial! Thanks!

Holly said...

Hey, thanks! I managed to make a button! I'm linking back to you.

Beth Stone said...

Hi - thanks for the tutorial. I think I must be doing something wrong. I made a button, which I uploaded to flickr. When I use the "link" on flickr, nothing shows up. When I use the "html code" on flickr, the picture shows up, but it adds a little box on top of it with a red x in it, like a picture is missing there. Can you tell me what I'm doing wrong? Thanks!

Sophia said...

This is so awesome and helpful, thanks!

Dawn said...

I can get the linking code, but the picture is just a box with a red x in it. Can you help me figure out what I am doing wrong?

Carly said...

Great, easy to follow, but unfortunately, doesn't work on my eplusc.wordpress.com blog :(.

Little Monarch said...

thank you so much!

L@Craftaholics Anonymous said...

Just found your blog and I have to say, you just solved the biggest mystery for me!! THANK YOU! Creating code for buttons has been such a mystery for me. I appreciate this so much! Thank you for sharing your knowledge and know how.
Best wishes,
Linda

Mrs. So and So said...

This post was perfect!! Thanks so much for the awesome directions.

KENZY said...

I was just wondering how you MAKE a button. I don't have photoshop, so what is a good website to make one at?

DecoratingYourWorld said...

Okay first off please don't laugh...I am too frustrated to do this and to persistant to quit...I've followed your directions several times...however my 40 something year old brain is still puzzled. I am trying((with a capital T)) to add a blog button to my blog...I've got the part where I locate where my pic is posted on line but when it comes to putting it together i fall apart..Okay one of my questions is (like I said please don't laugh) I am confused where you are saying the site i am linking to (should that be blogger or to my site http://decoratingyourworld.blogspot.com?Please help?

DecoratingYourWorld said...

JEN....THANK YOU SO MUCH! POSTED YOUR BUTTON TO MY BLOG AND SAW THAT... WHAT I WAS DOING WRONG WAS LEAVING OUT SOME QUOTATION MARKS!!YOUR THE BEST CAN'T WAIT TO DO ANOTHER TUTORIAL!!I WILL BE BLOGGING ABOUT YOU AS WELL AS SOON AS I ADD A COUPLE MORE TUTORIALS!!!~Charlsey

lishalou said...

I'm having the same issue where a little box shows up but my image can't be seen. The box links to my page, but no image. can you help? resonatedance@gmail.com

www.rez-o-n8dance.blogspot.com

Tyler said...

This is great! The only thing I was confused about was how big to make it. I went with 150 x 150

Julie said...

This was great! So easy to follow. Thanks so much!

Kerri said...

love your blog, you're a genius!

chie said...

thanks for the tutorial. your blog's really helpful. the steps are easy to understand and use. more to come. i'll be visiting you a lot now coz i only starting blogging days ago. :)

Hagler Happenings said...

Thanks! I got it to work after playing around with it. My image was really big, but I clicked Rich Text & was able to adjust it there. Thanks again!

Blossom said...

Nice! Thanks for making it so easy for the rest of us. I put links on my blog back to your posts on how to do this.

ChUnK said...

This was very helpful. Thanks! Also wanted to let you know that I've grabbed one of your buttons & posted it on my site: www.chunkmunst.blogspot.com :)

Rishabh Modh said...

Very very useful information. short and sweet and covering all. you give me exactly, what i was looking for. Thank you very much.

Zibeline said...

Thanks for showing me how to do this! Also, I have become a HUGE fan of picnik.com. You should check it out for making blog buttons!

Naila Moon of the Grey Wolf said...

OMGSH! I had been looking for a simple explanation on how to make these things. Low and behold, I fell upon your blog.
It took me a few minutes but I finally figured it out!
Thanks a bunch!
~NM

Naila Moon of the Grey Wolf said...

PS>I grabbed your blog button to add to my page too. ;-)

hipchic~cynde said...

AAAAHHHH you are a gem!!! This is great!!!! Thank you thankyou :)
I have been trying forever to make my own button and never getting it right....finally with your help it worked!

Cristan said...

THANK YOU SO MUCH!!! This was the perfect tutorial! Just what I needed :D

Rhonda said...

Jen~
You are the best! I have been wanting a Button for my blog and just couldn't figure it out. Your tutorial is the BEST!!!!
Thanks so much!

Wendy said...

Hi,

I followed your tutorial to make a button, and now my blog has gone all funny with nothing in the centre column and the blog posts on the left under everything else. Any idea what's happened?

michaela said...

HELP!!! I followed what you said a gazillion times, and I am just not getting it right somehow! I am THE definition of computer illiterate!
If you could help, i would be forever indebted!
ahmh61398@gmail.com

Lhet said...

Hi, nice blog! It's so helpful for people who wants their blog to be more personalized. ;)

http://iammakingmoneyonthenet.blogspot.com

Healthy Mamma said...

You. Are. Awesome! super easy, thanks!!! Now I just need to figure out how to add the html so people can "grab" my button.

♔Reyna♔ said...

Thanks so much for posting this! I have been looking for how to do this for weeks! Everyone had such weird explanations and it just frustrated me... I have my button now! Feel free to check it out on my blog! BTW: i followed:)

Thanks,
Reyna
www.glamglory.blogspot.com

thesilverofhisfining said...
This comment has been removed by the author.
Jamie said...

What can I be doing wrong? I have made an image, uploaded it to my blog then copied & pasted into HTML, it shows up on my sidebar as a little box with an x through it???

Wendy said...

I want to say THANK YOU SO MUCH!!! I have been working on this for almost a week with no success. I found you, and in less than 5 seconds you fixed me!! What a blessing you are. Thank you, Thank you, Thank you!

justsandyy said...

Does this only apply to blogspot? I have wordpress and it just didn't work at all :(

{Grace} said...

Your blog is so helpful. I've made "updates" to my blog that I got from your blog! Thanks for the help.

But the code isn't working for me...