UPDATED: 2/6/11
I explain to my design clients over and over how to create a button code, so I thought I would write a post about it.
So you just got a blog makeover and with it came this nifty little button. (Or you got industrious and made your own using my tutorial.) But you aren’t entirely sure what to do with it.
The Code
First, let me explain the basic button code. Here is the code to my Musings of a Housewife button.
Now let’s break it down. There are basically two parts:
Hyperlink Reference:
The hyperlink reference is defined by href. This determines the web page that the button will link to — in this case, Musings of a Housewife.
Image Source:
The image source is defined by img src. This calls up the image from where it is hosted online.
So, let’s use this generic example, and I’ll show you how to create your own working button code. You will replace the parts in bold. Make sure you end the code with </a> because that is how you close the code so that nothing else picks up the hyperlink reference.
1) Create the Hyperlink Reference
Replace “Web Page URL” in the hyperlink reference above with the URL of the web page you want your button to link to. Make sure to enclose it in quotes.
2) Create the Image Source Code
Host your image somewhere online. I use Photobucket. Once you’ve uploaded your image, replace “Image URL” in the sample code above with the URL to your image.
3) Insert your new Button Code into the vessel of your choice!
Paste the entire button code into a blog post (in the HTML view, of course) or into a sidebar widget! And you’re good to go.
Troubleshooting
If you have trouble with the button code working, check your quotation marks. You MUST have quotes around the URLs to the web page reference and the image source.
If you do, and it’s still not working, your quotes may have been changed to “smart quotes”. Smart quotes are the curved quotation marks that distinguish an open quote from a close quote. Of course your keyboard does not differentiate, but some computers convert them automatically. HTML does not like smart quotes. HTML wants straight quotes. Because smart quotes are not always so smart and sometimes turn the wrong way, which gets the HTML all befuddled. So. You may need to take the code and put into a TextEdit program and then save it in HTML format, which should make the quotes straight, and then copy and paste the code into your widget. I KNOW. Life is full of inconveniences, though, so get over it.
Now you may be saying, okay, that’s cool. But what’s a button for?
Blog buttons are basically a way to promote a website.
Other uses for buttons are:
1) Blog carnivals.
2) Button ads. (See the square ads on my sidebar.)
3) Buttons are used to display that you are a member of a group. (Such as the Frigidaire Test Drive Team button in my footer.)
4) Buttons often promote another blog that you write for. (Such as my All Things Chic and Therapon Skin Health buttons.)
5) Design credits. (Such as my DCR Design button.)
See? A myriad of possibilities! Got questions? Leave ‘em in the comments!
If you want to know how to put a button with the code beneath for others to grab, use this code:
This is awesome! Thanks!
THANK YOU for this. I don’t even have a button and I’m in great need of a blog makeover, so I’m sure this will come in handy.
Why do you use photobucket when you could upload the picture to your own website and not have to rely on a 3rd party. I would think having links to photobucket would slow down the site rendering.
Actually, I was told to host off site so as to not overload my server. This is where I wave a white flag. I don’t understand all that jazz.
Great tutorial! I will have to add this to my list of things to do. See you Saturday!
I think I’ve got all this, but maybe you could do a part two with how to make the little scroll box for the code to share with others. And why do some of them automatically select all when you click on them and others don’t?
I’m sure I could track down the info somewhere but just thought I’d ask in case you were thinking of more posts along this line.
I would be interested in the box below the button as well so others can pick up my button!
I too am interested in how to get the box below with the scroll code so I can share my button with others.
Could you please post about it or email me and let me know how to get the picture/button on top and the scroll box below it?
Thanks so much…GREAT tutorials!!!!
thank you thank you thank you!!!!
I can’t believe I actually did it!!!!
Starting a small biz and had desperately wanted to include buttons to our social networking pages. Your quick and easy ‘how to’ was EXACTLY what I was looking for!!! Thank you!
Are men even allowed in here?… Well I proudly say I have been checking your site for the incredibly useful-yet-easy-to-apply tips!
Your site is both eye and mind pleasing (yep! even a guy can learn here!)…
kudos to a job well done!
Sicerely,
Carlos
Miami, Florida
Dec-2009
Thank you so much for the information on how to create a button and the code.
If I change my template, how much do you think I should change my button? I’d think buttons are another branding tool so am I wrong for thinking that it would be OK to change the colors of my button but not the specific design. Am I way off on this?
Thank you so much, this was really helpful! I am such a dummy when it comes to technical issues, haha:)
Thanks so much!!! I googled, found you, and made my own button with linking code and all!!
Help!!!!! I have been working all weekend on trying to create abutton for my blog and I can’t seem to get it to link back to my blog it opens to photobucket?
Below are my two HTML posts?
AND -
I was hoping you might see where I made my mistake? Or direct me somewhere else.
Thank you, Thank you, Thank you!!!!!!
Debbie
Thank Thank
This was so great and easy to follow. It helped me a ton. This was my first attempt at creating a button and I did it with ease, so thank you very much!
thank you so much for the button info and this article too – they were really helpful and much appreciated. your instructions were clear and simple (perfect for me LOL) now all i need is for someone to see if it works!!! i’m going to try and create a new background now!
Your directions were perfect! Thanks!
I’m looking for a tutorial that puts the code to the right of the button as opposed to under it. Any advice?
Try taking out the paragraph breaks in the middle, between the two sets of code, if that makes sense.
Oi! I can not figure this out! You explained it perfect english and I am completely lost! I sat here for almost an hour going back and forth between my photobucket and blog and your page!!! I just don’t know what to do! How would I take a picture and put fun writing on it? I must not be meant to have a button
…
Are you trying to make a button or the code to put under it? If you are looking to make a button, you need a different post.
Try this one. http://www.musingsofahousewife.com/2009/03/how-to-design-a-blog-button.html
I am getting this error.
Page not found
Sorry, the page you were looking for in the blog Christy’s Coupon Corner does not exist.
The page is the home page. I put in my url in quotes.
http://christyscouponcorner.blogspot.com/
But it still isn’t working! Help!
And how do you put the html under the button to let other people grab your button?
Thanks for your help
I LOVE YOU!
Ok, I’m getting a little carried away. THANK YOU for explaining this in ENGLISH so that I could finally understand- I have been trying to figure out how to do this, but everything I read was like a foreign language! I was almost in tears over it yesterday! I now have a working button and I am SO PSYCHED. Thank you for this awesome tutorial!!!
Thank YOU!!!!!! SO! MUCH!!! Newbie at this blogging stuff but so excited about it! This was extremely helpful! THANK YOU A THOUSAND TIMES OVER!
Thank you so much! I’ve been scouring the internet for information to build my own header & button. I came to the right place & I am so excited. Thank you so much. I’m now subscribed.
Where exactly in the html code should the information go? Also, many buttons have html script to copy & paste in a box so that other users can repost their button. Do you know how to get that? Thanks for your help!!!
Thank you for info!
Here’s the code i’m trying to use…it’s not working…all I get is that little symbol that shows there is supposed to be an image there…not the image. I’m using photobucket’s direct link. I actually want it to link to a different blog, but for now I’m testing it on mine. Help!
Nevermind!! I figured it out! But I would LOVE the code to add the code for others to grab!!
Thank you so much for your page! It helped me create a couple blog buttons and select the one I like best!
Here’s the final product!
you have an awesome blog! I’d love to link it to mine
oops I guess it didn’t post my button jargan …
this doesn’t seem CRazy hard!?!? going to try it this week! you may have an email headed your way with questions!!
thanks!!! !
I am much too right brained for this!! I am getting simlar error messages as the ones mentioned above….also wanting the right coding info for others to get my blog button…I am not sure what to do next…..ugh
Hey- my answer woman to the blogging world! I want to put the code under my button on my blog page so that people can download it and put it on their pages…. how do I get the code to show without actually turning into the button?
Thanks! you’re so awesome and have been such a help! hope you don’t mind all my silly questions
Hello other Jo Lynne! It is rare to find someone who shares my name and its spelling (although I don’t have a dash between the two names. I get called Joy Lynne or Jolene all the time, though, like the name is DIFFICULT or something. Spanish speakers in our area (Utah) can’t say their “j’s” and sometimes I get called “HO” (so embarrassing!). How about you?
Thanks for the tutorial. I have such difficulty with the technical aspects of blogging. This will be a great help. Drop by my blog anytime. Jo
Thank you! Thank you! I finally am able to make buttons for my sidebars in my wordpress blogs!! So exciting!
Thank you so much for sharing how to make code for my blog button! I did it! Now I can’t remember how to post the code on my blog so others can grab it. I have done this before, but I don’t remember. Could you help me? Thanks-
Karen
Thanks to your help, I made a button!! Now how do I post the code for others to grab? I’m lost! HELP!!! Thanks!
EXACTLY what i needed! thank you!
Thank you for this!!!!
Thanks so much for the info on setting up a blog button and getting it onto our actual blog. It seems that after an hour, I am having trouble with smart quotes. They pop up around my image code (not my blog code) when I hit the save button for the HTML element in Blogger. I am not sure what a “TextEdit” program is. I did try to use WORD and save the code as a web page, but that did not work. Can you suggest a TextEdit program I can use?
Thank you so much!
Carrie, my program is conveniently called “TextEdit” lol – it came on my Mac. If you’re on a PC, perhaps edit pad lite would work for you? http://www.editpadlite.com/
Great tutorial post! I am very interested in putting the code box underneath the button so my readers can use it on their blogs as well…I’d like to know how to do this! Thanks!
Thank you so much for this tutorial! It worked great for me! I would love it if you would share with me how to get the text at the bottom of the picture so other can add my button to their blog! Thanks again!
okidokie. i’ve got my button done AND my code. like many of the others, i just need further direction of how to add the scroll box below my button on my blog. can you lead me further on this? thanks in advance, and for all the help these past two posts of yours have been! i’ve got them bookmarked in my favorites!
I just stumbled across this site via a ‘googling’ about how to ‘update my code (?) for buttons and backgrounds on my blog. I am a very novice blogger and really don’t understand the techno jargon that goes along with it. However, I have a notice on my blog from shabby blogs that I need to ‘update my code’ by January 31 so I don’t lose what I have… HELP!!! Not sure what to do at this point.
Sincerely, Julie (another mom at home)
I would love to have the code on how to put the under the blog button so others can grab it and advertise it on their site.
THANKS! I like your site and the helpful information.
-Caren with a “C”
preservinghomebasics.com
I just wanted to say THANK YOU! By following your help I created a cute button for my site!
I am at http://www.rockthatplate.blogspot.com/
Thank you again!!
Andrea
Hello,
I know this is an old post so I understand if you can’t respond, but I was wondering if you could email me and explain how to put the scroll txt underneath the button so that others can grab it off of my blog?
Thanks so much for doing this!
Melanie
THANK YOU SO VERY MUCH FOR THIS! Also, for the tutorial on how to create the button! I have read SO many different blogs and websites on how to create a button and never could do it. Thanks to these two blogs by you, I have now done it! I feel so good! LOL! You are awesome!
How awesome! So good to know.
Thanks so much for your help Jo-Lynne! I finally managed to accomplish this with your helpful tutorial – wooHooo! Linked to you from my blog entry today…happy Friday to you:)
Can’t thank you enough for posting this! Great instructions. Most tutorials leave me hopelessly confused, but you’ve done a wonderful job. Very clear.
Hi, Jo-Lynne! This is a great tutorial! However, I’m having an issue–when I type in my website { http://www.acupofalphabetsoup.blogspot.com } and my image URL { http://withlovelauren.files.wordpress.com/2011/02/alphabet-soup-button.png } it automatically converts to the image…without the code at the bottom for others to take and put on their blog. Help!
Hey Lauren. Email me your code and I’ll take a look.
Is there any way I can send you my code so you could take a look at it? With your tutorial above about making the button w/ a box, am I ONLY supposed to replace the “blog url” and “image url”? Am I supposed to do anything with the other blue highlighted info such as “text area”? Thanks.
Hi there
So my sister has this quaint little blog she’s been working on, and it could use some designing. So i’m trying to purdy it up, and she’s trying to get the button that is in question here, but the problem is I cannot for the life of me figure out what i’m doing., Every time I add the hyperlink, it just does not show up. I don’t know if its just ignoring the whole link because i misspelled something,, or its because i’m not going through the whole deal to make html… If anyone could answer any of my questions that would be great, i know some basic html/xhtml/ and css. I’d just like to get this figured out for her. Thanks.
you can get a hold of me by emailing me at maytag08@gmail.com
Thnk you so much for this post and the how to create a button post! I just put my very first button up on my blog! Hurrah!
This is just what I was looking for. Thanks so much!
Thank you so much! I’ve been trying to figure this out forever and you finally answered my questions. Thanks!!!
Thank you so much for this tutorial! I’ve been looking for easy to follow instructions!
Thank you so very much!!!!
Thank you so much for your post. I was following another tutorial and was so close to being finished with my button but Blogger kept giving me ‘page not found’ even though it had my Website name right there as well -which I could click on and get to my site. Something was “in the way” and it was those darn curved quote marks LOL Did what you suggested and I am now the proud owner of my ‘first’ button. Thank you so much for your help : D
Yeah, those quotes will getcha every time. Glad it worked out!
WOW ~ found this by googling and SO glad i did!!!! i ran into a few glitches, but they were minor and i figured them out. Thanks SO much!
i included a link to this great tutorial on my “buttons” page
Thanks so much! That was fun. I’m going to add a link back to you on my blog.:)
Thank you, much appreciated.
Thank you so much for posting this! It’s been a while since I’ve done blog buttons, and I was trying to make a couple for the blog party I’m starting today. I was using a code from another “how to” website and was ready to throw the computer out of the window! I could get my buttons to show up on my post, but when I tried to copy them, they didn’t work!
After reading your post, I realized that my code included the “smart quotes” you talked about. What a relief! Now everything’s working beautifully!
Thanks so much!!!
YAY!!!! Congrats.
This is SUCH a great tutorial. You helped me make a clickable button in minutes and I’m forever grateful
Awesome! So glad it helped.
Hello! This is absolutely the best tutorial for creating blog buttons and codes, I spent ages looking for a tut that makes sense. Thank you!
I am just starting to put together my blog and this was so helpful!!!! THANK YOU!!!!
Hi,
Do I type my button code directly into the field that opens up for HTML/Java Script widgets in Blogger? I’ve tried this but it doesn’t work. Thanks.
Yes that should work. If not, send the code to me and I’m happy to take a look. Sometimes it’s just one small character missing that messes up the whole code.
Wow, that was quick. Thank you! Here’s my code:
</a/
I tried it again but and I get a tiny little square with a border around it. If I click on it , the link works but my cute little button isn't there.
Opps. Let’s try that again. Sorry. Here’s the code:
</a/
Thank you!! I had been trying to figure out for a while how to add the code box under a button and couldn’t get it to work for wordpress. This worked perfect! Thanks again! =)
Thank you, thank you, thank you!! I have spent literally hours working on trying to make a blog button using various tutorials, and then I stumbled upon yours! It was so simple, it worked the second time I tried it. I had read all the way down to see about the quotes thing, once I fixed that it worked! I will be putting a link up on my blog to this page for anyone else like me who is just having a tough time!
If i have an image that i did not get from the internet, how do i give it a “hosting” url?
by the way………this information has been a big help, thank you!
getfitchick
Hi there. I found your blog searching Google on how to DIY a blog button. Thanks so much for this tutorial. I’ve created mine today and have put up a post on how I did it. Also added a link to your site. Thanks!
Thanks – I’m new to blogging but this tutorial and the blogger button one had me done with those in no time!
Thanks a ton, that is a great tutorial! Helped me so much.
Thank you SO much for this! It worked and I am ecstatic…I did it without my techie husband! W00t!
This tutorial was perfect–simple and straight forward. Thanks so much!!!
Thank you so much for your helpful tutorial! I made a boring button just now so I can get the hang of it. I’m sure I’ll make a more exciting one soon. I appreciate how much you’ve helped a newbie like me understand how things work!
this is life changing! thanks so much for the helpful and EASY directions!
Hello!
Just wanted to thank you for posting this “how to” I am not a computer whiz and I was able to create my own button for others to grab and share! Thank you very much!!
I’m trying to add a button to blogger, and following your instructions, I was able to post the picture I wanted to a blogpost (pasting the html info I got from photobucket), but how do I get it as a widget. I cant figure out how to get to the sidebar. I tried adding a gadget and “adding my own” but it I can’t figure out where to put the html info. It asks for a url but when I put that in I get an error message that the gadget is broken.
Would love some guidance, as I am obviously new at this, but am trying to dress up my blog as I start posting more.
You want to add an HTML gadget. Then put the code in the body of the gadget. Give it whatever title you want.
Thank you for this information, I had tried to make a button and the code for people to grab it but for some reason it was not working. You made it easy for me to fix the issue and it is now up on my site!
Jo-Lynne, Thank you so much for the step by step instructions to create a button and a code for others to copy. I had a hard time getting it to work at first, it kept saying that photobucket had deleted my photo, so I looked closely at the whole link, and realized there wasn’t an > after my photobucket link. So I added the > to the button and the code and then it worked just fine. Thought I’d share just in case anyone else was having the same problem.
Yay!! I walked through your tutorial on how to make the button and how to put it on my blog and it worked….the second time around..lol~
Yay…..Thanks so much for the great tutorial! 
~Lisa
This is the best tutorial about making a button that I have seen yet! Very simple instructions. And I totally GET IT. The only thing that hangs me up is getting the image code! I can never get the image code!!!!!! How do you get the image code?
Katrina
They All Call Me Mom
thank you so much !!!! It took me several tutorials that didn’t work before I came across yours, which worked perfectly!! Awesome
thank you so much! it was perfect, and so so helpful!!
I have been searching for days on how to do this and your was the only one that actually worked! Thank you so so much
xo emily
This helped so so much! Thank you for being the only person who puts it in steps
I thank you soo so much!! This is an awesome step by step instructional.
Thanks so much!!!! You just broke this all down for me and I am excited. I just created two buttons to link to various pages. I can’t thank you enough for stating it so simply.
~H
AWESOME!!! So glad it worked for you.
Maybe I don’t understand this well, but I do not see the example code? Did you delete it?
I used your example code to make my button, but her I am just not seeing the example.
Ok so I thought I had it figured out but I think I’m confused.
I created a photo with text on Picnik and sized it. Then I added it to Flickr. When I clicked on the photo it came up with an address which from my understanding is what i use to capture my image to post on Blogger (my blog). I also need to add my web address, right? That would be first then my flckr address.
I add this to HTML code in design settings for my blog?
How do i get the code to show so that others can capture it and place onto their blog?
I haven’t done any of the steps above yet with the address or photo, just trying to figure this all out. Your assistance would be greatly appreciated. I’ve spent most of my Saturday afternoon trying to figure this out and starting to get antsy!
Hi Vicki. I had this code in my post, and the plugin I used to show HTML got broken.
I’ve emailed you with the code.
Ok, still not working, her’s my blog address http://stephsgrn.blogspot.com/ and my pic address http://s1244.photobucket.com/albums/gg569/stephsgrn/?action=view¤t=CM_Amber.jpg If you could help me, I’d greatly appreciate it! I tried the code you gave for the button with the html box beneath it, changed what I was supposed to, and made sure all the ” were straight.. don’t know what else to do?
Your pic address is wrong. When I went there, it said “the specified media does not exist”. That is probably what is messing up the code. Double check that by putting it in your browser and seeing if it brings up your image.
I just wanted to let you know you helped me out tremendously! I’ve used the code you gave me as a template to put other things on my blog! Check it out sometime and see what you think! Anyway, I just wanted to say thanks, and keep up the good work!!
Do you know how to make it so that the button link opens a new page window? I love this tutorial and have used it several times now. Thank goodness you put the bit in there about the smart quotes because mine wouldn’t work until I fixed that! Thanks from http://mommawords.com!
Yes. But since my comments read html it may not show up right for you. You add this:
target=”_blank”
within the a href part, after the link. If I type out an example, it will just read it. Email me if you need more help.