Thursday, 1 July 2010

How To Make A Blog Button

Hey, so… in Julie’s What We Wish We Knew blog posts, someone mentioned they wish they knew more about how to make buttons and I’ve actually seen a few people mention that before, so I figured I’d write up a post about buttons.

Now, I can’t tell you how to design the button (although I can give some tips and useful sites) but I’ll give you the codes you’ll need to embed them on your site and have the buttons link back to your blog and the code so other people can put your button on their blogs too.

I guess I’ll start with the button making tips:

If you don’t have a photo editing program on your computer, you could make a simple one on paint or you could use a site like THIS one.

On that site you can upload and edit images and it can do everything paint does too (everything from resizing, to drawing and adding effects, to adding text, to animating them - but I don’t recommend making your button animated).

Don’t make your button too big, remember it has to fit into sidebars on your--and other peoples--blogs without stretching out the page.

You can use stock images* for your button (but be sure to check the stock artists stock rules before using). I like to use Deviantart** for stock images (textures, photos, backgrounds etc.) but there are other places you can get stock images from (this site for example, or this one, or this one).

Sorry, my tips on designing buttons aren’t very great but the kind of button you want will be specific to you depending on your personal tastes and what will match your blog so that is the best I can do as far as that goes (unless you want to email me with more specific questions, feel free to:

Now, onto that pesky HTML nonsense…

Here is what the code is for (of course, your blogs button will be in place of ours, this is just the example):

To get that ^^^^ (the grab code will be included, I just put text in the box above to make it less confusing for now and the box should adjust to the width of your sidebar) just do this:

1. Make your button (that’s obvious), then upload it to an image hosting site like photobucket.

2. Copy and paste this code onto notepad (or just, wherever - somewhere you'll be able to read it and do steps 3-5, I recommend notepad though because programs like microsoft word do that auto-correct thing which can screw up the code):

3. Read through the code and wherever I’ve written “PASTE YOUR BUTTON URL HERE”… well, paste the URL for your button*** there.

4. Read through the code and wherever I’ve written “PUT YOUR BLOG URL HERE” - I think you get the point, you put your blog URL there.

5. This part is really important. In the code, there is a bit that says (textarea) and (/textarea) - blogger is being annoying and wouldn't let me make that into html coding, so I need you to replace the brackets around the "textarea" and "/textarea" with < these >. If you don't do this, that part of the code won't work (the part that creates the html disabled box for people to grab your buttons code).

6. Once you’ve replaced my caps-lock instructions with the appropriate links, just copy the edited code and put it on your blog (if you want it in the sidebar: design > page elements > add a gadget > html/java script > paste code > save > bam, you’re done!****).

Anyway, hope this has been helpful and I've not confused anyone.


*stock images are basically pictures that can be used in other peoples art and things, uploaded for the purpose of other people using them. Some book covers use stock photos, for example.

**If you're using stock photos or textures or whatever from Deviantart, be sure that what you're using IS stock - original art is uploaded to Deviantart too, the stock stuff will be in the resources section (which is the bit I linked). Also, I know I've mentioned already, but check the stock artists stock rules especially if you're using stock from deviantart (as some artists want you to ask permission before using their stock outside of deviantart).

***URL for your button = the direct link to your button once you upload it somewhere online, just in case you didn't know.

****Correction: bam, you SHOULD be done. This code works for me and it worked on my old myspace layout site... it should work with all layouts, I think, but I'm not exactly the Yoda of html coding so I could be wrong. Let me know if you have any problems with the code.


  1. Thanks for doing these kinds of posts! I used your advice to make my own button! Thanks again and keep up the good work!

    Shalena @ Writer Quirk

  2. thank you for posting this...ive looked all over for instructions like this and i swear they are all written in gibberish. this actually makes sense to me. i was able to successfully make buttons....thanks!!

  3. I have an extra " /< outside the box and I can't figure out why. Any thoughts?

  4. Hi there, for some reason my actual button isn't showing up, just the link...any ideas?


  5. Thank you so much! Your a lifesaver :) You explained it really well

    Mia @GrippedintoBooks

  6. This is the best advice I have found. I have an extra >/ outside my button picture. (any advice??) I just used some clip art for my button and used your link to put text on it but it's very, very tiny but it is a button. LOL
    If you want to look, please do at
    (I have no idea if the HTML works to post b/c I don't have one following me that has a blog. Test, test, please. Someone?

  7. Thanks for this! I have been trying to figure it out. I did a google search and you were the first to pop up!

  8. For some reason the image won't show up no matter what I do. Can someone help?

  9. Thank You!!! Easiest one I found.

  10. I used your post as a referance:

  11. Usеful іnfoгmation. Luсky mе I founԁ your website accidentally, and Ӏ am ѕtunned why this accident did not toοk place earlieг! I bоokmаrked it.
    website design



Related Posts with Thumbnails

Back to Home Back to Top Bloggers Heart Books. Theme ligneous by Bloggerized by Chica Blogger.