Badge | the pixel boutique | blog, web & print design

I make a lot of blog buttons (or badges). A. Lot. I think its a blog prerequisite to have one. Just kidding. But it is a nice companion to your blog.

What exactly is a button, a new blogger may ask? Well, its a small square image, usually 125×125 pixels, that coordinates with your blog design, that represents your blog. It can have your blog name, an image and even a short blurb…just giving a snapshot. You can add it on your blog, along with the code for people to copy and paste onto their blog. And if you’d like to know how to add that code, here’s how.

So today I’m going to show you how to create a very simple but classy button using Photoshop Elements. Its quite simply really. Here are a few videos (about 12 minutes in all) to get you started…

One thing I forgot to say in the video is after you are done with your button, you’ll want to save it as a .jpg, by going to File>Save For Web. That will put it in the format you need for web use.

Hope that was helpful! If you create a button using this tutorial, I’d love to see it!

As a new blogger, I was overwhelmed by all the lingo; RSS, widgets, badges, blogroll, etc. and so on. Admit it, bloggers. We have our own language. (Note to Self: write a post entitled “Bloggy Definitions” very soon).

Anywho, if you’ve been scurrying around the blogosphere at all, you’ve come across blogs that display the code for their blog button, or badge. This is sometimes called a “link to me” or “grab my button” badge or button. Here, the code to add the button is displayed so people can copy it into their own sidebar. And adding this feature to your blog couldn’t be easier.

Here’s what you’ll do:

Hopefully you have a 125×125 pixel button created for your blog. This is the standard size that fits nicely in most sidebars. First, upload your button to your blog or photo hosting account (such as PhotoBucket). Take note of the photo URL (the address where your button “lives”. It will look something like this: http://www.yourblogname.com/2009/07/yourbuttonname.jpg). Here’s mine:
In your blog dashboard, be it TypePad, WordPress or BlogSpot, create a new text sidebar widget/gadget. You will be adding your own HTML code here.
Now, insert the following code in the text widget, inserting your information in place of the red text:Link to me:
<br /><br />
<img src=”http://www.yourblogorservername.com/2009/07/
yourbuttonname.jpg” />
<br /><br />
<textarea rows=”3″ cols=”20″>
<br>
<a href=”http://www.yourblogname.com“>
<img src=”http://www.yourblogorservername.com/2009/07/
yourbuttonname.jpg” />
</a>
<br>
</textarea>
And that’s it! Click save and view your handiwork. The one thing you may want to fiddle with is the “rows” and “cols” numbers. They are just what they sound like…the number of rows and columns of text in the code. So, if you want more horizontal rows, or lines, bump that number up. If your text/code area is expanding beyond the width of your sidebar, change the “cols” number to something less than 20 until it fits.

I hope this was helpful…and simple. Check back in the next couple of weeks for a tutorial on creating that blog button, if you dont already have one (or you can always contact me to create one for you!).