MyBlogLog Widget Colorer

When I started to use MyBlogLog days ago, I thought it should have another widget generator besides the current one (http://www.mybloglog.com/buzz/community/[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.

Features

  • 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 :)

Tags: , ,

8 Responses to “MyBlogLog Widget Colorer”

  1. Ian Kennedy Says:

    Great job and something I posted about it on the MyBlogLog blog as I’m sure the MBL community would love to play around with it

    http://mybloglogb.typepad.com/my_weblog/2008/01/color-me-widget.html

    Ian
    Product Manager, MyBlogLog

  2. thinlight Says:

    Ian, thank you very much.

  3. Freda Says:

    It is cool to be different and find an excellent easy way of doing it, Thank you Ian, Have a good day!

  4. Thin & Light » Blog Archive » MyBlogLog Widget Colorer Got a Widget of Its Own Says:

    [...] I’d like to thank Ian for mentioning my widget colorer tool on the MyBlogLog Blog. It’s great encouragement for me. [...]

  5. mare Says:

    TX

  6. Widget Ad Generator. | 7Wins.eu Says:

    [...] Expansion Tutorial – The SEMpai SEM BlogHow to get web widgets on Vista Sidebar | Alfred’s Tech BlogThin & Light

  7. Thin & Light » Blog Archive » MyBlogLog Changed its Widget Theme Says:

    [...] Half a year ago I wrote a small tool for customizing MyBlogLog widget. And, since then I didn’t notice the changes MyBlogLog has done. [...]

  8. Positively Nigeria Says:

    Thanks for the widget customizer.

    One question though…what does it look like if you haven’t got any visitors yet?
    Mine doesn’t show any images or spaces for images (i.e. no rows are visible) – it only shows the header and the links that go at the bottom.

    Please let me know if this is correct.

    Thanks,

    PN

Leave a Reply

Please copy the string iLSKed to the field below:


× 1 = five