Are you users of MyBlogLog Recent Readers widget? For myself, I’ve been using MyBlogLog widget to display the recent readers that come to my CrispNetworks. Do you want to style the widget using external CSS and have better control. If yes, how to style MyBlogLog widget? Let us explore the codes:

MyBloglog Widget XHTML Codes

MyBlogLog widget is in a table structure, not a list structure many would have expected. Here’s an example of Mybloglog widget XHTML code:

<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>

 <tr id='tr2'>

  <td id='tdd12' class='mbl_img'><img /></td>

  <td id='tdd22' class='mbl_mem'><a href='#'></a></td>

</tr>

 <tr id='tr3'>

  <td id='tdd13' class='mbl_img'><img /></td>

  <td id='tdd23' class='mbl_mem'><a href='#'></a></td>

</tr>

 <tr id='tr4'>

  <td id='tdd14' class='mbl_img'><img /></td>

  <td id='tdd24' class='mbl_mem'><a href='#'></a></td>

<tr id='tr5'>

  <td id='tdd15' class='mbl_img'><img /></td>

  <td id='tdd25' class='mbl_mem'><a href='#'></a></td>

</tr>

</table>

Looking at the XHTML code itself, you can see that there’s a header row where the Recent Reader title is located at the top. Every row has an image which is the avatar in the first column and the n

ame of the avatar on the 2nd column. Below is the codes you can put into your style.css file to alter Mybloglog widget’s appearance.

MyBlogLog Widget CSS

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.

Crisp MyBlogLog

Look at the MyBlogLog widget that I’ve style. The header and footer is gone. I’ve also made the background to white to suits my blog’s background color.

Coming Soon

Currently, I’m trying to style both MyBlogLog and BlogCatalog Recent Readers widget in order to make both of them looks like one widget. I’ll be sharing that in my next posting about styling these widget. Stay tune.