I like MyBlogLog, it's come under some stress recently, which I'm not going to bring up, but I like it. I particularly like the recent readers widget, I installed mine as soon as I could after signing up. There is only one thing I don't like about it, the default widget is ugly. That's why I spent a bit of time with the CSS and made mine fit in with the rest of my sidebar. This is the first part of two on how to make your widget better looking.

The Structure

The MyBlogLog widget is a table, not the way I would do it (sounds like an ordered list of your recent readers to me), but it's what we have to deal with. Here is a sample of the code, taken from the widget page:

<table cellspacing='0' cellpadding='0' id='MBL_COMM'>
 <tr><td colspan='2' class='mbl_h'>Recent Readers</td></tr>
  <tr id='tr1'>
   <td id='tdd11' class='mbl_img'><img /></td>
   <td id='tdd21' class='mbl_mem'><a href='#></a></td>
  </tr>
</table>

Within the table there is a header row with your title in, then each row has one cell for the avatar and one for the link. Having experimented a bit with the table, the bottom two rows are dedicated to the link to your community and the link to MyBlogLog. There is also a class for the row that appears to non-members of MyBlogLog, if you want to style that any differently.

The CSS

In the next installment, I will give an example of the CSS you can use to style this widget. Right now I am going to give you all the information you need to have a go yourself. Listed below are all the classes you will need in order to style your very own MyBlogLog widget. I know the classes also incorporate the rest of the HTML document, but in my experience you need it all in order to style the widget.

body .widget_mybloglog

This is the widget as a whole, normally used for the width of the widget.

body table#MBL_COMM

The main table for the widget, here you can set the width and the outside border.

body table#MBL_COMM th.mbl_h

The header row, containing "Recent Readers" or whatever you chose.

body table#MBL_COMM td.mbl_img

The cell containing the MyBlogLog avatar.

body table#MBL_COMM td.mbl_mem

The cell containing the MyBlogLog member's link, you can style extra hard by adding a or a:hover to the end of the line.

body table#MBL_COMM td.mbl_join_img

The cell containing the image that appears when non-members of MyBlogLog visit your site.

body table#MBL_COMM td.mbl_join

The text that appears for non-members of MyBlogLog, again, you can reference links as above.

body table#MBL_COMM td.mbl_fo_hidden

The last two rows of the table that display the text "View reader community" and "(provided by MyBlogLog)". You can style the links in these rows too.

Coming Soon

Now I have displayed all the CSS codes you need to style your widget, I would love to see what you can do. Tomorrow I will show you a couple of ideas I came up with, but everybody's blog and everybody's design is different. I hope to show you what you can achieve with the tools available, but would love to see what you can do too.