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

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!).

Here’s a great question from Sarah from Mom Balance:

“How do I add a Twitter badge/link to my sidebar”.

Its not hard, Sarah…here are the steps:

1. Depending on what platform you are on (Blogger, WordPress, TypePad), you’ll need to create a new sidebar item or widget (or “gadget” in Blogger; “TypeList” in TypePad).

2. Find a graphic you’d like to use as your link badge. There are a whole bunch if you Google “Twitter bird” or “Twitter badge”. Here are a few…

(Also, you can just use a simple “follow me on Twitter” phrase.)

3. If you decide to use a badge, you will need to follow the same process to upload it to your server as you would any other graphic, so we can point to it in the next step. If you use a service like PhotoBucket to upload images to your blog, do that now, and take note of the URL (location) of the image.

4. Now, in your new sidebar widget/gadget/typelist, insert this code, replacing the text in red with your information:

<center>
<a href=”http://www.twitter.com/yourtwittername“>
<img src=”http://www.yourimagelocation“>
<br>
follow me on Twitter
</a>
</center>

5. Close and save the widget and it should show up looking something like this:

follow me on twitter

6. There is also a way to add a feed widget directly from Twitter that displays your most recent tweets. To add that to a sidebar, follow the directions here.

Not so hard, was it? Any questions?