If you are already using the Blog Window widget, you can easily switch to this new version using the AffiliateBrand dashboard:

• If you are a member of AffiliateBrand, log in to your dashboard, click "Configure" and then on "Customize" to see the new "No Borders" option available for your widget.
• If you are not a member (or choose not to be), simply visit AffiliateBrand.com, click on Create/Edit in the left sidebar and input your blog's URL in the box provided. When you submit your URL, you will be presented with the options to customize your widget, and can obtain the Javascript needed from the Javascript link.

Once you have chosen the no-borders option for your widget, you can customize the overall look of your widget using a custom stylesheet. The default stylesheet for the widget looks like this:

The four main elements of the CSS template control the appearance of the following elements in your widget:

• Title: Configure the font style, font-color and background of the title
• Anchor (links): This section controls the look and feel of the post titles which link to your most popular posts in the widget window.
• RowBackground: This alters the background color and style behind the links in the main window.
• RowCount: This controls the appearance of the numbers which order the popularity of your posts (eg: 1,2,3,4...)

You can control each of these elements using CSS styling as you would for your blog. In the case of the widget used here at Blogger Buster, I have configured my stylesheet to match the other elements in my sidebar, as you can see in the example below:

Once you have created a new stylesheet to match the theme of your blog, you should upload it somewhere online and then input the link to the CSS template in the "configure" section of your AffiliateBrand dashboard. Your Javascript will automatically be updated with this new information, and your widget will begin to look the way you like it! For more information about the Blog Window stylesheet, take a look here.

You can also change the number of posts shown, over how many days the posts are rated, the width and height of the widget, and the title from your AffiliateBrand dashboard.

Once you have customized the appearance of your widget, you should then add the javascript code to an HTML/Javascript element in the sidebar of your blog. If you would like to customize the appearance of the widget even more, you can do so here by wrapping it in <div> tags and specifying the style of the element, as in this example:

<div style="background: #ff0000; border: 1px dotted #ffffff;>script src="http://AffiliateBrand.com/img/559140890-265v2.js" type="text/javascript"></script>

Once you've installed the javascript in your sidebar, it may take a few minutes for the changes to come into effect. If you have just installed the widget for the first time, try clicking on a few of your posts in order for AffiliateBrand to gather data about them. If you're updating the widget to the "no-borders" version, wait a few minutes and then refresh the page to let the alterations come into effect.

This solution is much better than the manual customization method I discussed in this post. As Gene Kavner (the author of the AffiliateBrand widget and website) highlighted in his comments, the Javascript can be updated easily with changes to the CSS template, height and width etc of your widget whereas the manual customization must instead be changed each time by hand (and it is a rather complicated process!). Also, updates to the operation of the widget cannot be duplicated so easily unless the Javascript version is used. Personally, I prefer this anyway: there is much less code involved, and the widget is ready to be used as it is, which is only good news for busy Bloggers!

Thank you Gene Kavner for producing such a useful widget for us Bloggers, especially as this new version was completed so soon after your initial suggestion!

Technorati Tags: widget | popular+posts | affiliatebrand | blog+window | sidebar | template