Creating Blog Badges/Buttons/Chicklets

In the past, whenever I wanted to add a badge (see the brightly colored boxes on the right side of this site), I would have to ask my DS#1 (he does have a name, and it is Dave) to do it for me.  I didn’t really understand why I couldn’t do it until I researched it the other day (I mean, it looked like it should just be a matter of copying and pasting some code in the proper spot).  Turns out, my old theme design on my blog didn’t have the capability of using “widgets”, and so it was quite cumbersome and more than a little frightening for a non-code-writing person like myself because that little patch of code had to have “something” done to it first, then go “somewhere” in a big bunch of other code.

I feel there’s probably no need to explain to you at this point that I’m not a computer programmer or techie in any way!  I turn the computer on/it works.

So that is what motivated me to update to a newer theme, and my #1 requirement for that new theme is that it accommodates widgets!  This new Choco theme is a whiz with widgets.  And that got me to thinking, I sure could use a badge/button for my give-away next week…I wonder how scary THAT would be???  Turns out, not scary at all.

Now, this isn’t a tutorial because I’m going to refer you to a site that walks you right through it.  I made one, and it worked on the first try!!!  Here is the link.  I will continue through the steps I took, just because I’m dying to tell somebody that I did this successfully.

First you need the “artwork”.  I went to my photo editor on my computer, selected a butterfly photo because there was an expanse of orange that would be a good background for text.  I cropped it, re-sized it to about 90 x 120 pixels, then increased the viewing percentage to 100% so I could see what I had.  Then I added the text.  It looked a little flat, so I tried for a beveled edge look by darkening the edges with the drawing tool with an opaque setting.  You can put as much or little effort into the artwork part as you want, and of course you could also use a drawing program instead of a photo.  I’m just more of a photo person!

Then I went to the Squidoo site and followed their directions.  Some things to know before you start.  You need a place to put this little picture on the internet.  I put it on Flikr (a free photo album site), but putting it in a blog post or any other on-line spot will do.  You will need to get the location of that photo, plus the location where you want the button to send people.  At this point you are just swapping out text, per the detailed instructions.  You can also replace mouseover words with a message that people will see when their mouse/cursor hovers over the button.

Then *poof* you have the code for the button.  In my (new theme) case, I could paste it into a widget and it was good to go!  You could also make a button and paste the code right into your blog post (under the HTML tab).  Anyway, I’m so proud of my new little baby:

Alternative Name


5 thoughts on “Creating Blog Badges/Buttons/Chicklets”

  1. OK I have to say I liked the yesterday’s version better ( the brown one ) but I love the butterfly button!!

Comments are closed.