MyBlogLog Widget Colorer Got a Widget of Its Own

First I’d like to thank Ian for mentioning my widget colorer tool on the MyBlogLog Blog. It’s great encouragement for me. And thanks to the great guys who stumbled it.

As I discovered, hundreds of visitors came according to Google Analytics, but only less than 15 had a try. A failure? I think so. There is some problem with user experience or the tool itself is not very useful.

However I’m not too frustrated (Thanks again to the great people mentioned above). Today I added a widget to track the visitors, so finally the widget colorer got a recent readers widget of its own. It’s at the bottom of the page. Go now for a position on the widget :)

Of course it’s generated by the widget colorer itself. I used the handy Firefox extension called ColorZilla (highly recommended) to pick colors of the site for perfect match.

Still I want your feedbacks or suggestions to improve the poor user conversion rate. I’m ready for criticisms.

MyBlogLog Widget Colorer

When I started to use MyBlogLog days ago, I thought it should have another widget generator besides the current one ([community name]/widgets/). The current widget customizer first give you a preview of color scheme but no layouts. When you’re satisfied with the colors, click the button and you’ll see the actual layout with the colors.

The problem is that a color scheme good for the default layout is not necessarily good for customized layouts. When you realized this and want to tweak the colors, you just can’t do this based on previous customization. Even you hit ‘Go back’ button of your browser, the color scheme is lost.

It’s more natural for users to choose a layout first and customize the colors based on the “real” layout.

Widget is critical for MyBlogLog. It won’t go far without providing the widgets for bloggers to put on their sidebars.

So I created the tool – MyBlogLog Widget Colorer.


  • Live preview of colors on real widget. You’ll get the *real* effect whenever you change a color (click to enlarge):

    live preview

  • Unrestricted colors. With the color picker you can choose any color available and there’s an input for hex color code, so you can make it exactly match your site theme. (I did this by editing the code by hand before :) )
  • Quick adoption of user submitted themes. If you like a color theme listed in the right panel, use it with just one click. Also you can share your beautiful theme with others by clicking the show off button.

    quick adoption

How to use

  1. Go to MyBlogLog Widget Colorer.
  2. Enter the mblID. It’s a 16-digit number assigned to your community by MyBlogLog. You can see it in the code provided by MyBlogLog:

    MyBlogLog widget code sample

  3. Change the layout settings.
  4. Click the “Customize Colors” to go to the next step. Here you can tweak the colors or directly use a color theme listed on the right. When you’re done, copy the code to use in your site. Don’t forget to show off your beautiful theme!

Beneath the scene

Thanks for mooRainbow – the great JavaScript color picker from w00fz. If you’re feeling great joy when selecting a color, thank him :) . This color picker is made with mootools JavaScript Framework. I had no experience with mootools before, but since it adopts the similar way with Prototype, it’s not too hard for me to use.

If this tool become popular, I may enhance it with more features like customization history, etc. Sadly there is still no API from MyBlogLog, though expected by many people.

Please leave a comment here if you have questions or suggestions :)