AU Interactive
« Obligatory Blog Tag Post
Top 5 Must-Have Add-Ons for Your Blog in 2007 »

How to Make your Readers Look Good: Change your MyBlogLog style

Recently I’ve added a MyBlogLog widget (top right) to my blog and I’ve seen many other bloggers do the same.

I’ve had it running for a few weeks now and I think it’s one of the best widgets out there. It’s unique because it gives you a glimpse into who your regular readers are. It helps you build a community of readers effortlessly.

However, I don’t particularly like the default CSS styles of the My Blog Log widget, so I’ve taken the liberty of creating two different MyBlogLog CSS styles - one for dark backgrounds, one for light backgrounds - that you can use as you wish:

lightdark

The easiest way to style your own MyBlogLog widget, add this code just above your tag (all on one line):

Light theme:

<link href="http://www.auinteractive.com/mybloglog/light.css" rel="StyleSheet"
type="text/css" media="screen" />

Dark theme:

<link href="http://www.auinteractive.com/mybloglog/dark.css" rel="StyleSheet"
type="text/css" media="screen" />

Source code for the MyBlogLog widget styles:
Light Theme CSS
Dark Theme CSS

You can use these or modify them any way you like. You’re also welcome to add a comment with links to your own styles for MyBlogLog widgets. It would be cool to see someone using the sliding doors CSS technique for variable widths (or even sliding doors with CSS sprites technique).

The CSS code could probably be cleaned up a little too - I’m sure there are some extraneous class definitions in my versions. I’ve also only tested these in FF 2.0 and IE 6 so I’m not sure how they look in Safari and others.

What do you think?

December 28, 2006 · Filed under social networks, web 2.0

jf.sellsius said,

December 28, 2006 @ 6:22 pm

I think it looks great. Thanks.

Toby said,

December 29, 2006 @ 8:54 am

I love this! A wonderful adaptation, however, I’m not sure where I need to add the code in WordPress. Can you help?

Thanks so much!
Toby

Top 5 Must-Have Add-Ons for Your Blog in 2007 said,

December 29, 2006 @ 9:10 am

[…] MyBlogLog - Not to be confused with Bob Loblaw, the MyBlogLog widget is a community in-a-box type of widget that lets you connect with your readers and their blogs. I hope in 2007 they make the widget more attractive or add some stylized skins. […]

Markus said,

December 29, 2006 @ 11:27 am

To add it to Wordpress:
1. Log in
2. Click on the “Presentation” tab, then “Theme Editor” subtab
3. Click on “Header” on the right side of the page under your theme’s files
4. Find the </head> tag (the one with the slash, not the opening <head> tag)
5. Copy the theme code above (that starts with </LINK… and ends with screen”>) and paste it right before the head tag.
6. Click the “Update File” button.

tk said,

January 3, 2007 @ 11:45 pm

This is great. Thank you for sharing the CSS. I wonder if it is also possible to style the link tracking widget.

CarlenLea said,

January 5, 2007 @ 4:11 pm

Okay that’s seriously hot! Thank you for posting this!

Internet Strategy Blog said,

January 6, 2007 @ 11:43 pm

Dugg, thanks: http://digg.com/software/Elegant_CSS_for_your_MyBlogLog_widget

Any idea how to remove the ‘View Reader Community’ and ‘(provided by MyBlogLog)’ links at the bottom of the widget?

Scott Rafer said,

January 6, 2007 @ 11:50 pm

Hey, thanks! We appreciate it.

Markus said,

January 7, 2007 @ 10:57 am

You could remove the ‘View Reader Community’ and ‘(provided by MyBlogLog)’ links at the bottom by adding this to your CSS:

table#MBL_COMM td.mbl_fo_hidden {display:none;}

HOWEVER, I would not recommend doing that for 2 reasons:
1. Those links help you build your community.
2. It helps MyBlogLog grow. They have created this helpful tool so I like to at least link to them.

Internet Strategy Blog said,

January 7, 2007 @ 3:01 pm

Thanks for your help, Markus.

MyBlogLog Tricks - Andy Beard said,

January 10, 2007 @ 2:54 am

[…] Also you can change how the MyBlogLog widget displays on your blog with some more attractive CSS. […]

Personalizzare il widget di MyBlogLog » Sapientone said,

January 10, 2007 @ 5:44 am

[…] Su AU interactive è invece possibile scaricare due stili css alternativi. […]

Bar Bar A said,

January 17, 2007 @ 1:20 am

This is totally cool! I’d love to try it but how do I add it to Typepad?

Thanks!!

Markus said,

January 17, 2007 @ 8:16 am

I’ve never used Typepad, so I’m not sure, Bar Bar A. Maybe someone else can chime in.

Veron said,

January 24, 2007 @ 9:09 am

That’s pretty sweet! But I’ve stopped displaying the MyBlogLog widget altogether because it keeps failing the XHTML verification check. Is there a way to make it comply to 1.0 Transitional?

Kristof Michiels said,

January 28, 2007 @ 6:03 pm

As an answer to Veron’s question: to pass the XHTML verification check, just change the ampersands (&) in the code to &. You could also encode the whole script in //. But i find the first solution cleaner.

Sex Sells More than Gadgets said,

January 29, 2007 @ 12:42 pm

[…] (Jeremy) threw up a challenge to Marketing Pilgrim (Andy Beal) by claiming that he could get more MyBlogLog community members by putting a picture of an attractive woman in his avatar rather than “Win […]

MyBlogLog: Take Control of Your Blog’s Audience at Baron VC said,

January 29, 2007 @ 6:35 pm

[…] That and the hassle of getting it set up on my blog. Now that I’ve found a way to make the sidebar widget not suck on WordPress, everything’s […]

dodong flores said,

February 12, 2007 @ 4:36 pm

I used your Mybloglog CSS style now in my site and it works great! Thanx for sharing this…

kc said,

February 13, 2007 @ 1:15 pm

Thanks for the sharing! it looks great!
any idea how to open a new window when click the user icon?

Markus said,

February 13, 2007 @ 1:24 pm

Glad you like it. I don’t believe you can change it to open in a new window since the code comes from MyBlogLog via javascript.

Jehzeel Laurente said,

February 13, 2007 @ 4:24 pm

wow so nice! i’ve used this in my blog… thanks again ^__^

kenshiz said,

February 17, 2007 @ 3:33 pm

Hows to add it on Blogspot? (Blogger)

Markus said,

February 17, 2007 @ 4:18 pm

To add it to Blogger / Blogspot:
1. Log in and go to your Dashboard
2. Click on Manage: “Template”
3. Find the tag (the one with the slash, not the opening tag)
5. Copy the theme code above (that starts with ) and paste it right before the tag.
6. Click the “Save Template Changes” button.

My new favorite social networking tool at Randa Clay Design said,

February 18, 2007 @ 3:10 pm

[…] widget prettier - I think the basic one leaves a lot to be desired - and then I ran across this site that saved me all the work. I really appreciated it. It looks MUCH better in the sidebar than the original. Share and Enjoy: […]

Big Problems Facing MyBlogLog said,

February 19, 2007 @ 11:00 am

[…] a pretty big fan of Mybloglog and I really like using it, but I see some significant problems that may end up […]

Ganesh KB said,

February 23, 2007 @ 7:08 am

This link is very useful and chances of making friends are much easier. Even i have a good use of this Widget.

Thanks for sharing…….

Take care
Ganesh.KB

dedmond29 said,

February 25, 2007 @ 9:53 pm

Thanks for writing this post, It’s very helpful and appreciated.

Cape Cod SEO » Learn SEO Through Video and Other Interesting Tools said,

February 25, 2007 @ 10:35 pm

[…] How to Make your Readers Look Good: Change your MyBlogLog style - I just created a first run for my blog and will probably make some adjustments soon - but I’ve been looking for this type of tutorial in recent weeks. […]

Levysoft » MyBlogLog: pregi, difetti e trucchi di visualizzazione said,

March 12, 2007 @ 3:01 am

[…] soddisfa e volete dare un tocco più professionale, vi consiglio di provare il foglio di stile di AU Interactive (testato per FF 2.0 and IE 6). Per i più geek, è possibile anche rimuovere i link in fondo al […]

Paul Enderson said,

May 3, 2007 @ 5:17 am

Just out of curiosity, why is is that placing the following just before the close of the head tag works:

But, if I place the call to the file with the other CSS file calls, and make use of a WordPress PHP variable, then it doesn’t work? Like this:

/dir/dark.css” />

Any idea? Is it because placing it before the head tag puts it after every other CSS file, thus over-riding any previously defined styles?

Cheers!

Paul

Paul Enderson said,

May 3, 2007 @ 5:18 am

Coment form killed my code… ;)

Does it make sense from the above description of the problem, or would you like me to mail you instead?

How To: Alter Your MyBlogLog Widget said,

May 3, 2007 @ 6:01 am

[…] it looks like you can get MyBlogLog skins to change the style of your widget. In order to do this, simply paste the following code just […]

Widgets Lab » Cool mods for MyBlogLog widgets said,

May 3, 2007 @ 7:03 am

[…] people over at AU interactive.com have created a couple of really slick modifications to the MBL recent readers widget. Each […]

Markus said,

May 3, 2007 @ 9:11 am

Hey Paul, if I understand what’s going on (without seeing the code you sent), that’s probably what’s going on - later CSS styles overriding the previous ones.

How to Customize MyBlogLog Widget said,

May 6, 2007 @ 2:56 am

[…] it… even this blog has it. The plain old MyBlogLog widget isn’t attractive anymore. Solution: AU Interactive has come up with two shiny MyBlogLog styles. You can easily add the style to your blog by including […]

Pallab said,

May 28, 2007 @ 5:03 am

Excellent stuff.

May Ong said,

May 28, 2007 @ 11:37 pm

Hi there

I have lost my MyBlogLog Widget codes.

Where can I find the Default code version, please? Thks

Markus said,

June 3, 2007 @ 9:08 am

@May: you have to login to Mybloglog and copy the code from there.

Jay said,

June 7, 2007 @ 7:56 pm

This is great! I was looking for a way to get that MyBlogLog widget to look a little more stylish and this certainly did the job.

Vishal said,

July 4, 2007 @ 9:14 am

Where do i add the code in Blogger(new version)? Help!

Nice styles, btw.

Markus said,

July 4, 2007 @ 4:51 pm

Right before the closing head tag in your template (see comments above)

Nospheratt said,

July 6, 2007 @ 2:23 pm

Forgive me if my English is not perfect, I’m a Brazilian girl. :)

Marcus, as it is the code doesn’t work in the new blogger . But I’ve figured it out! :D I’m so happy! I’ve seen many people wanting to use your styles in blogger, because they are so great, and I’ve discovered how to make it work!! :D

Here’s the code:

Stylesheet must be between ” ” and you have to add a / at the end, before the closing >. So simple, and so hard to spot!!! I hope this helps. :D

Thank you for these great styles, they are simply wonderful!

Nospheratt said,

July 6, 2007 @ 2:28 pm

Hum, the code didn’t show up. This is what you have to change:

LINK REL=StyleSheet to LINK REL=”StyleSheet”

MEDIA=”screen”> to MEDIA=”screen”/>

Markus said,

July 6, 2007 @ 4:19 pm

Thank you for catching that, Nospheratt! I fixed the code above.

Eduardo said,

July 29, 2007 @ 11:54 am

I couldn’t post this at blogger beta…

Where and how must I paste that code??

Always appears that:

- The element type “link” must be terminated by the matching end-tag “”. -

Lukaszeq said,

July 29, 2007 @ 12:02 pm

Well done! Great job! Standard themes look poor.

Srikanth Eswaran said,

August 3, 2007 @ 9:09 am

if you see the blog on my site, although i have put in the code before the /head tag, and included the CSS as well, it still doesnt show up properly, but only defaults to the normal side bar mode for mybloglog. am i doing something obviously wrong??

Markus said,

August 3, 2007 @ 5:18 pm

I had a problem displaying the code above due to Wordpress mangling it, but hopefully it should work now. I don’t have a blogger blog so I can’t help you out - maybe someone else can offer a suggestion if you’re still having problems.

jmicaux said,

September 5, 2007 @ 4:00 am

Good job ! @++

Toki said,

September 9, 2007 @ 6:52 pm

Thank you very much for the awesome widget. I had no problems installing this on my site. Looks nice and clean.

Regs,

Toki

Luce nella Rete said,

September 18, 2007 @ 10:12 am

Nice look!

Thank you

Toronto wedding photographer said,

October 14, 2007 @ 6:17 pm

Is there a reason why I’d have a problem with that code. I tried it,but it doesn’t work properly

cozuni said,

October 16, 2007 @ 10:53 am

i have hard time to figure out where am i suppose to put the code..

Complete Online Marketer | Widgets - MyBlogLog said,

October 26, 2007 @ 12:51 pm

[…] gravy code for the color tweak is from the folks over at AUinteractive. They created two different CSS styles for the widget - light and dark. I liked the […]

xianfeng said,

November 9, 2007 @ 2:17 am

thanks, that was an extreme makeover of the widget. i would like to ask if you have any ideas why my readers aren’t showing? i’m new to mybloglog and i’ve just added the widget.

Markus said,

November 9, 2007 @ 10:35 am

I don’t see the mybloglog script in the code on your page - did you add it to your website’s template?

Serverdome redesign - now with more nutrients and more rounded corners | Serverdome said,

November 28, 2007 @ 9:59 am

[…] it but couldn’t bring myself to go through the mess that is the MBL code. This article on styling the MyBlogLog widget was a huge help in figuring out where every little piece of css […]

liveweb said,

December 13, 2007 @ 8:37 pm

Very Cool! I started using it on my website. Thanks!

sondan said,

December 25, 2007 @ 1:15 am

I love the design and tried pasting the code a few places in my widget, but it just did not work. I am not sure what the “Header” is you refer to, but I tried the code right before “RECENT READERS” and at the very beginning of the widget and no luck. Could you give us the “DUMMIES” version on exactly where to place the code by showing it in black and white.
Thank you and Happy Holidays to all.

Markus said,

December 25, 2007 @ 2:13 pm

The code needs to be put into your template between the HEAD tags in your HTML. You should be able to google some information about it.

Jan said,

December 30, 2007 @ 2:16 am

I like the change - nice design - I’m new at Mybloglog so it’s just showing up with no readers just now but thank you for the clear instructions because it made it easy for me to install even though I’m new to widgets too!

Markus said,

December 30, 2007 @ 11:28 am

Thanks, Jan - glad you like it.

Todd said,

January 3, 2008 @ 5:48 pm

Awesome, thanks so much and Happy New Year!

Jake said,

January 8, 2008 @ 2:10 pm

Great resource, thanks! Will include it in my upcoming bloglog traffic guide :)

marti garaughty said,

February 23, 2008 @ 3:24 pm

Hi guys, one word… elegant. Actually 2 words, very cool. Looking forward to seeing more of these. Excellent work…

johnette said,

March 14, 2008 @ 12:43 pm

i know this is an old post on this mybloglog widget, but its impossible to find widget help on their site. im a new blogger with a hosted wordpress site (2.3.3). I already have textbox widgets ready for code, but dont understand how to paste the code above. Can anyone help? Need explanation in novice language.

elyong2008 said,

March 27, 2008 @ 3:56 pm

I like the light one but i just don’t know how to place it on my blog… it’s not working for me.

Leave a Comment