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:
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?
This site runs on Thesis. Yours should too
Are you a blogger that doesn't understand a lot of PHP? Are you looking for a theme with Flexibility, Easy Customizations, Rock Solid SEO, and Outstanding Support?
If so Thesis is for you. Using Thesis you will have more control over layout and design than you ever thought possible. Simply point and click.
For more advanced users Thesis has an intelligent customization system that uses hooks. Using hooks you can use Thesis across all of your sites and never tell it was the same theme. Watch the Thesis Video Tour.
{ 14 trackbacks }
{ 55 comments… read them below or add one }
I think it looks great. Thanks.
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
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.
This is great. Thank you for sharing the CSS. I wonder if it is also possible to style the link tracking widget.
Okay that’s seriously hot! Thank you for posting this!
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?
Hey, thanks! We appreciate it.
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.
Thanks for your help, Markus.
This is totally cool! I’d love to try it but how do I add it to Typepad?
Thanks!!
I’ve never used Typepad, so I’m not sure, Bar Bar A. Maybe someone else can chime in.
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?
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.
I used your Mybloglog CSS style now in my site and it works great! Thanx for sharing this…
Thanks for the sharing! it looks great!
any idea how to open a new window when click the user icon?
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.
wow so nice! i’ve used this in my blog… thanks again ^__^
Hows to add it on Blogspot? (Blogger)
To add it to Blogger / Blogspot:
tag)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
5. Copy the theme code above (that starts with ) and paste it right before the tag.
6. Click the “Save Template Changes” button.
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
Thanks for writing this post, It’s very helpful and appreciated.
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
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?
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.
Excellent stuff.
Hi there
I have lost my MyBlogLog Widget codes.
Where can I find the Default code version, please? Thks
@May: you have to login to Mybloglog and copy the code from there.
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.
Where do i add the code in Blogger(new version)? Help!
Nice styles, btw.
Right before the closing head tag in your template (see comments above)
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!
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”/>
Thank you for catching that, Nospheratt! I fixed the code above.
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 “”. -
Well done! Great job! Standard themes look poor.
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??
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.
Good job ! @++
Thank you very much for the awesome widget. I had no problems installing this on my site. Looks nice and clean.
Regs,
Toki
Nice look!
Thank you
Is there a reason why I’d have a problem with that code. I tried it,but it doesn’t work properly
i have hard time to figure out where am i suppose to put the code..
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.
I don’t see the mybloglog script in the code on your page – did you add it to your website’s template?
Very Cool! I started using it on my website. Thanks!
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.
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.
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!
Thanks, Jan – glad you like it.
Awesome, thanks so much and Happy New Year!
Great resource, thanks! Will include it in my upcoming bloglog traffic guide :)
Hi guys, one word… elegant. Actually 2 words, very cool. Looking forward to seeing more of these. Excellent work…
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.
I like the light one but i just don’t know how to place it on my blog… it’s not working for me.
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