This is a follow up on Easy Styling MyBlogLog Recent Readers Widget. I promised you to post BlogCatalog CSS and the HTML that I used to make them both look like one widget. I’m very sorry to have delayed this web trick to combine MyBloglog and BlogCatalog to make it looks like one widget.

Please take note that this styling is for half size and not showing the screen name of visitors.

BlogCatalog Widget XHTML Codes

The basic structure of of BlogCatalog is very similar to MyBlogLog’s table structure. Here’s the XHTML code:

<table cellspacing="0" cellpadding="0" id="bc_widget">

<tr><th colspan="2" class="bc_head"></th></tr>

<tr><td id="mem_av_1" class="bc_avatar"><a href="#"><img /></a></td>

<td id="mem_un_1" class="bc_user"><a href="#"></a><span /></td>

</tr>

<tr>

<td id="mem_av_2" class="bc_avatar"><a href="#"><img /></a></td>

<td id="mem_un_2" class="bc_user"><a href="#"></a><span /></td>

</tr>

<tr>

<td id="mem_av_3" class="bc_avatar"><a href="#"><img /></a></td>

<td id="mem_un_3" class="bc_user"><a href="#"></a><span /></td>

</tr>

<tr>

<td id="mem_av_4" class="bc_avatar"><a href="#"><img /></a></td>

<td id="mem_un_4" class="bc_user"><a href="#"></a><span /></td>

</tr>

<tr><th colspan="2" class="bc_foot"><a href="#"></a></th></tr>

</table>

Both of BlogCatalog and MyBlogLog XHTML is similar. You can see it MyBlogLog XHTML here.

BlogCatalog Widget CSS

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

body table#bc_widget th.bc_head
The header row, containing Recent Readers or whatever you chose.

body table#bc_widget td.bc_avatar
The cell containing the BlogCatalog avatar.

body table#bc_widget td.bc_user
The cell containing the BlogCatalog member’s link, you can style extra hard by adding a or a:hover to the end of the line.

body table#bc_widget th.bc_foot
The footer row displays the “Powered by BlogCatalog”.

To be honest, I didn’t manage to combine both the MyBloglog and BlogCatalog’s widget purely using CSS. I couldn’t style BlogCatalog’s widget properly. However I was able to style MyBloglog’s widget the way I wanted and got rid of the header and footer of the widget.

Hence, this is just a work around using CSS to adjust the position of both widget to make it looks like one.

Styling MyBloglog’s Widget

First of all, you have to style your MyBloglog widget at the setting page. As you can see, I’ve set my widget size to 160px - the size of my sidebar. You can set it any size you want. For Crispnetworks.com, I choose to display 6 rows.

You can also use the CSS of MyBloglog to style the widget if CSS was your preference. Here’s the CSS code:

body .widget_mybloglog { width: 160px; }
body table#MBL_COMM {border: none; background-color: #FFFFFF;}
body table#MBL_COMM td.mbl_img {background:#FFFFFF; border:none}
body table#MBL_COMM img {border-color: #000000;}
body table#MBL_COMM td.mbl_fo_hidden{display:none;}
body table#MBL_COMM th.mbl_h {display:none;}
body table#MBL_COMM td.mbl_join_img { }
body table#MBL_COMM td.mbl_join { }

As you can see, both the header and footer of MyBloglog widget was hidden using the display:none properties.

Styling BlogCatalog Widget

Secondly, styling the BlogCatalog widget from the website is required. You have to set the background color, border color and heading color to white. Next type in the width and number of rows of the widget you want. Then turn off the Usernames and choose small for the Avatars.

Lining MyBloglog and BlogCatalog widgets

Now you have to put both of the widgets’ javascript codes together.

Here’s how you line them up:

I prefer to put MyBloglog’s widget first because when a big avatar asking readers who are not logged into MyBloglog or non MyBloglog’s member to join the community.

As a result (the screenshot on the left), you’ll see the gaps between the widget and the header of the next item. The reason for the gaps you see there are actually the header (Recent Readers) and footer (Powered by BlogCatalog).

Closing the gap between both widget

So how do you close the gap? All we need to do is to use a DIV tag around the BlogCatalog’s widget. Then use the margin property of CSS to style the margin of the four sides of the widget, i.e top, left, bottom and right.

Below is the CSS codes to style the DIV tag for BlogCatalog:

#recent_readers_blogcatalog {
margin: -20px 0px -30px 0px;
}

The negative margin is to hide both the header under MyBloglog’s widget and the footer behind the header of “Crisp Affiliation”. Viola, there you go it’ll look like one widget after all these are done. Take a look at my “Crisp Reader” widget - MyBloglog and BlogCatalog combined.

Do you have any other way to do this? Please share your idea with me in the comment.

blogcatalog, CSS, mybloglog, web tricks, widget