Making MyBlogLog Pretty: How To Style The Recent Readers Widget
Posted on Tuesday, March 6th, 2007
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
aora:hoverto 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.
If you enjoyed this post, why not subscribe to Unintentionally Blank
1March 6th, 2007 at 1:08 pm
Derek Anderson Says:MyBlogLog is only a Table format if you can’t use the Java version.
The Java version is somewhat editable as well. You can change the colors, drop the names, add/remove rows or columns etc…
I do agree that it is somewhat ugly to begin with.
I’m glad that you wrote up a “How-to” about modifying it.
Pingback by Widgets Lab » Unintentionally Blank explains how to modify MyBlogLog widget
March 6th, 2007 at 1:15 pm
2March 6th, 2007 at 2:50 pm
Phil Says:Hi Derek, thanks for dropping by.
I believe it’s actually the non javascript version for wordpress.com blogs that isn’t in table format (see engtech’s advice on this). The version I am using is the javascript one and those are the CSS classes I need to style it.
Thanks for the link though! I hope you’ll be back to see what some of the possibilities of styling the widget are!
3March 6th, 2007 at 2:59 pm
Derek Anderson Says:I think I was confusing the code you had displayed with the one that MyBlogLog provides for MySpace.
If you do a “How To Customize MyBlogLog widget for MySpace” it would become a very popular post.
I tried messing with that code…trying to change certain things and had little luck. Maybe I was trying to apply what I learned by editing the Java…whatever it was…it did not work .
4March 6th, 2007 at 4:17 pm
Phil Says:I haven’t seen the code for the MySpace MyBlogLog widget. If you could send me an example to my email phil [at] this domain I’ll have a go at that. I might be able to stretch a series of posts out of this idea!
5March 7th, 2007 at 4:34 pm
Paul Walsh Says:Love the way you changed the MyBlogLog look ‘n feel - didn’t realise you could do that. After reading your post, I’ve asked one of my developers to edit ours :)
Thanks, Paul
p.s. liked your comment on ReadWrite/Web re Accessibility - that’s how I landed on your site
6March 7th, 2007 at 7:44 pm
Phil Says:Hi Paul, thanks for stopping by. Glad I made an impact! I look forward to seeing the results of your improved widget.
I’m amazed that you would stop by on the power of my comment, I was almost knocked over by what you guys at Segala are trying to do. I really feel accessibiltiy is important on the web, but from what I read on R/WW, you guys are taking it to the next level. I will certainly be stopping by your site to learn more and can I say good luck with it all.
7March 8th, 2007 at 1:45 am
Eric Marcoullier Says:Ping me when you finish this series. I’d love to blog it on the corporate blog.
Cheers!
Eric
8March 8th, 2007 at 3:31 am
Derek Anderson Says:I’ve always wondered…how do you “ping” someone?
Is it the same as email me?
9March 8th, 2007 at 2:18 pm
Hans Says:yeah too great…the long awaited post on the ultimate style for mybloglog. thanks buddy for sharing :)
10March 8th, 2007 at 2:45 pm
Paul Walsh Says:Thanks Phil! Glad you like what we’re doing. We’ll soon push the promotion on the partner programme - check that out to see if it’s relevant to you or anyone you know. Thanks again, Paul
p.s. if you subscribe to our blog you’ll get updates on the whole initiative :)
11March 12th, 2007 at 8:01 pm
Phil Says:Eric: Thanks! I certainly will. It seems that the rest of my life is obstructing my finishing of part 2, but I’ll let you know as soon as it’s out.
Derek: It’s a shame people don’t have the same ping/trackback ability as blogs. Wouldn’t it be nice to know when someone blogs about you… until then I guess we’ll have to stick with email!
Hans: There’s more to come!
Paul: I’m already subscribed ;-) Do you have any recommendations for other sites on accessibility that you keep up with? I need to learn more!
Pingback by I Used To Say I Would Never Blog :: Unintentionally Blank
March 13th, 2007 at 1:10 am
12March 13th, 2007 at 4:53 pm
Paul Walsh Says:Phil - why not use http://www.w3.org/WAI/ My team should start to talk more about accessibility on our blog shortly - they’re so tied up in work and w3c stuff at present…
If you’re trying to break into development why don’t you join the partner programme - then you’ll have full access to the team! The first site certified by a partner was a freelance developer who setup her own agency!
http://segala.com/partner-programme/
Sorry about the long url!
13March 14th, 2007 at 1:21 am
Phil Says:Thanks Paul, I can’t believe I didn’t think of the WAI. I look forward to hearing more of your team’s views on accessibility and hopefully putting a few of mine forward too in the near future. I’ll have a look into the partner programme too, thanks!
14March 25th, 2007 at 9:30 pm
Homemom3 Says:Wow, I hadn’t even realized you could change the look of your bloglog page. Thanks, I’ll be trying to do this a bit later.
15March 25th, 2007 at 11:50 pm
Phil Says:Hi Homemom, this isn’t to change the look of the MBL page, rather the widget that you can see in my sidebar. I’ll be releasing another post soon with some examples that will hopefully help out and give you some inspiration.
Let me know when you do change yours, I’d love to see what others can do too.
Pingback by MyBlogLog: Auto Join Returns, But Doesn’t Work! :: Unintentionally Blank
April 18th, 2007 at 8:19 am
Pingback by Customizzare il widget di Mybloglog da Stefano Mainardi
October 18th, 2007 at 8:12 pm
16November 4th, 2007 at 1:59 pm
fistofpeanuts Says:Very good information … I needed that because I was looking for it ..
I am left with one thing though…. Sometimes I see the avatars of the MBL widget shown NEXT to each other and not UNDER each other …
Does anyone know how I can do this ? Cause I have no idea …
-FOP-
Pingback by Bookmarks | TemplatePanic.com
May 19th, 2008 at 3:39 am
17May 25th, 2008 at 1:53 am
Marco Says:habrá que testearlo
18June 26th, 2008 at 4:24 am
dan Says:I was looking for something exactly like this however after testing it unfortunately it does not work with the new widget style because the css has changed labels and such. in order for this to work you have to change your javascript code from http://pub.mybloglog.com/comm3.php to http://pub.mybloglog.com/comm2.php … change the comm3.php to comm2.php
I was hoping someone could point me to a site that has something similar for the new widget? they are so damn ugly
19June 26th, 2008 at 11:10 pm
Phil Says:Hi Dan, you are right, this doesn’t help with the new version of the widget, I’ve been so pleased with how I integrated the widget into my site that I never upgraded it! That and it’s not the best looking (but then neither was the first one).
I might look into the new MyBlogLog widget to see what can be done with it, since the extra functionality is probably worthwhile.
20June 26th, 2008 at 11:26 pm
dan Says:Hi Phill,
I implemeneted your idea using the older widget as it still looks nice and integrates well with my site but the functionality of the new widget seems pretty cool .. im just not flexible enough with css to redo it myself.
im satisfied with this one anway, fits nicely. thanks again