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:



Dark theme:



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?

{ 55 comments… read them below or add one }

jf.sellsius December 28, 2006 at 6:22 pm

I think it looks great. Thanks.

Reply

Toby December 29, 2006 at 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

Reply

Markus December 29, 2006 at 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.

Reply

tk January 3, 2007 at 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.

Reply

CarlenLea January 5, 2007 at 4:11 pm

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

Reply

Internet Strategy Blog January 6, 2007 at 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?

Reply

Scott Rafer January 6, 2007 at 11:50 pm

Hey, thanks! We appreciate it.

Reply

Markus January 7, 2007 at 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.

Reply

Internet Strategy Blog January 7, 2007 at 3:01 pm

Thanks for your help, Markus.

Reply

Bar Bar A January 17, 2007 at 1:20 am

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

Thanks!!

Reply

Markus January 17, 2007 at 8:16 am

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

Reply

Veron January 24, 2007 at 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?

Reply

Kristof Michiels January 28, 2007 at 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.

Reply

dodong flores February 12, 2007 at 4:36 pm

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

Reply

kc February 13, 2007 at 1:15 pm

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

Reply

Markus February 13, 2007 at 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.

Reply

Jehzeel Laurente February 13, 2007 at 4:24 pm

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

Reply

kenshiz February 17, 2007 at 3:33 pm

Hows to add it on Blogspot? (Blogger)

Reply

Markus February 17, 2007 at 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.

Reply

Ganesh KB February 23, 2007 at 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

Reply

dedmond29 February 25, 2007 at 9:53 pm

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

Reply

Paul Enderson May 3, 2007 at 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

Reply

Paul Enderson May 3, 2007 at 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?

Reply

Markus May 3, 2007 at 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.

Reply

Pallab May 28, 2007 at 5:03 am

Excellent stuff.

Reply

May Ong May 28, 2007 at 11:37 pm

Hi there

I have lost my MyBlogLog Widget codes.

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

Reply

Markus June 3, 2007 at 9:08 am

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

Reply

Jay June 7, 2007 at 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.

Reply

Vishal July 4, 2007 at 9:14 am

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

Nice styles, btw.

Reply

Markus July 4, 2007 at 4:51 pm

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

Reply

Nospheratt July 6, 2007 at 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!

Reply

Nospheratt July 6, 2007 at 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”/>

Reply

Markus July 6, 2007 at 4:19 pm

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

Reply

Eduardo July 29, 2007 at 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 “”. -

Reply

Lukaszeq July 29, 2007 at 12:02 pm

Well done! Great job! Standard themes look poor.

Reply

Srikanth Eswaran August 3, 2007 at 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??

Reply

Markus August 3, 2007 at 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.

Reply

jmicaux September 5, 2007 at 4:00 am

Good job ! @++

Reply

Toki September 9, 2007 at 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

Reply

Luce nella Rete September 18, 2007 at 10:12 am

Nice look!

Thank you

Reply

Toronto wedding photographer October 14, 2007 at 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

Reply

cozuni October 16, 2007 at 10:53 am

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

Reply

xianfeng November 9, 2007 at 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.

Reply

Markus November 9, 2007 at 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?

Reply

liveweb December 13, 2007 at 8:37 pm

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

Reply

sondan December 25, 2007 at 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.

Reply

Markus December 25, 2007 at 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.

Reply

Jan December 30, 2007 at 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!

Reply

Markus December 30, 2007 at 11:28 am

Thanks, Jan – glad you like it.

Reply

Todd January 3, 2008 at 5:48 pm

Awesome, thanks so much and Happy New Year!

Reply

Jake January 8, 2008 at 2:10 pm

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

Reply

marti garaughty February 23, 2008 at 3:24 pm

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

Reply

johnette March 14, 2008 at 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.

Reply

elyong2008 March 27, 2008 at 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.

Reply

Bill December 31, 2008 at 7:51 am

Hi Marcus,

Been trying to follow your instructions as explained to Toby on December 29, 2006 @ 11:27 am, but cannot get the alteration to work. I’m running a wordpress blog with 2 sidebars and the widget is functioning in the right hand bar. Does this alter where the code needs to be placed ?

Many thanks,

Bill

Reply

Leave a Comment

{ 14 trackbacks }