10 How I Customized the MyBlogLog Recent Readers Widget to Match my Blogger Template March 08, 2008 /

The "Recent Readers" widget you see towards the bottom of the sidebar is powered by MyBlogLog. Here you will see the avatars of MyBlogLog members who have recently spent some time here reading the Blogger Buster blog.

The default MyBlogLog widgets didn't fit in too well with the style of my new template, so I decided to customize this using CSS to hide the parts I don't want to display.

In this article, I'll explain how I achieved this. It's quite a simple technique to try out if you'd like to use - and customize - your own MyBlogLog Recent Readers widget too.

For this tutorial, I'm going to assume that you're already a member of MyBlogLog. If you're not yet a member, you may well want to sign up to MyBlogLog and begin using this excellent (and free!) community based service to help build traffic and a community for your blog!

Once your a member and have registered your blog, you'll need to create the code for a Recent Readers widget, which you can use in your sidebar. To do this, visit you profile page, and click on the "widgets" link for your blog. In my own MyBlogLog dashboard, this link appears like this:

Now, MyBlogLog have recently introduced a shiny new widget, which has some great functionality. But this is not the widget we need to use for this tutorial! You need to use the "Crusty Old Widget" instead!

At first, the "crusty old widget" will look like this:

On this page, you'll need to make a few customizations to the appearance of your widget:

• Change all of the colors to match the background color of your sidebar.
• Change the width of the widget if you need to make this narrower or wider to fit neatly inside your sidebar.
• For the "Show Screen Names" option, check "No".

Once you've made this necessary changes, click the button which says "preview and get code".

Copy all of the code to your clipboard, then insert into an HTML/JavaScript widget in your blog.

At first, this widget will still look a little disorganized: we need to add a little code to the style section to finish things off.

So go to Template>Edit HTML in your Blogger dashboard, and search for the closing <b:skin> tag.

Immedietly before this tag, paste the following section of code:

table#MBL_COMM td.mbl_fo_hidden {

display:none;

}

table#MBL_COMM td.mbl_join_img {

background: url(http://bloggerbuster.com/images/blank.gif);

}

table#MBL_COMM td.mbl_join {

background: url(http://bloggerbuster.com/images/blank.gif);

}

table#MBL_COMM tr#tr0 {

background: url(http://bloggerbuster.com/images/blank.gif);

display: none;

}

table#MBL_COMM th.mbl_h {

display:none;

}

Now when you preview your template, you'll notice that all the unwanted parts of the widget are hidden; your widget should blend perfectly with your template featuring only the avatars of your recent blog readers.

If you would also like to add the links for "View Reader Community" and "Join This Community", you can add the following code inside your recent readers HTML/JavaScript widget, changing the values in red to match those of your MyBlogLog community profile:

<center><ul><li><a href="http://www.mybloglog.com/buzz/community/YourCommunityName/"
title="Visit the MyBlogLog Community">View the reader community</a></li>

<li><a href="http://www.mybloglog.com/buzz/yjoin/?ref_id=[your community ID#]&ref=w"
title="Do you want to be a part of this community?">Join this community</a></li></ul></center>

To find these values for your blog's community, go to the "Settings" page for your blog.

The URL Display Name is the value of YourCommunityName, while that long number at the end of the URL in your address bar is that of [your community ID#].

With this new feature in place, you'll be well on your way to creating a customized and wholly stylish look for your blog!

I hope you've enjoyed this tutorial. Feel free to post your comments and questions below.

If you'd like to learn about the other customizations I've made to the Blogger Buster template, be sure to subscribe to the feed to receive news of updates as they are posted.