How to modify the Popular Posts widget to suit your blog's style

In this previous post, I explained how to use the Affiliatebrand Popular Posts widget. As you can probably tell, I've modified this widget in my own blog so that it matches the overall look of my template. My method is far from being perfect, but as my original post has attracted many readers, I've decided to share this method with you in order for you to customize your own widgets.

The widget code provided by AffiliateBrand links to a javascript file which is unique to your blog, and contains all the code nescessary for constructing the widget style. The default widget is made up of images and "iframes" in order to give it a "Web 2.0" style.

Unfortunately the appearance of this widget is not something that suits the style of all blog templates!

So, in order to be able to style the look of the widget, we need to strip the javascript of all image-related code, and feature only the useful elements instead.

But before you do this, be sure to make a backup of the original widget code as you will need to use this later!

To create a modified "Popular posts" widget, you will need to edit the javascript file which your original widget code is linked to. The best way to do this is to highlight the URL to the javascript file, paste this into your browser, and save the javascript file to your computer so you can edit it with Notepad. Here is an example of what the original widget code will look like; the URL of the javascript file is highlighted in red:

<div style="display:none"><script src="http://AffiliateBrand.com/img/559140890-265v2.js" type="text/javascript"></script></div>

However, you must be sure to use the file url of your own widget as this is unique to your blog!

Now, once you have the Javascript file and have opened it in Notepad (or a different simple text editor), you will need to locate and copy two of the three "iframes" within the code. The easiest way to do this is to press CTRL+F and search for "iframe". The iframe lines should look something like this:

<iframe src="http://AffiliateBrand.com/BlogWindow/Title2.aspx?w=195&style=http://kunoichi.info/bloggerbuster_templates/bb_popular_posts.css&t='+escape('Most Popular Posts') + '" width="195px" height=35px"275px" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>


<iframe src="http://AffiliateBrand.com/BlogWindow/WidgetBlank.aspx?r=559140890-265&style=http://kunoichi.info/bloggerbuster_templates/bb_popular_posts.css" width="200px" height="275px" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>


<iframe src="http://AffiliateBrand.com/BlogWindow/PoweredByV2.aspx?r=559140890-265&w=190" height="40" width="195" scrolling="no" frameborder="0" style="margin-top:5px" ></iframe>

The first iframe in the script (highlighted in blue) is unnecessary since it only refers to the title of your widget, which you can easily configure using the title of your newly configured widget later on. The second iframe is the most important, since this is where your most popular posts are highlighted. The third iframe provides authorship details of the widget and a link back to AffiliateBrand. You really should include this in your modified widget as I will explain later.

Once you have copied the necessary iframe lines to Notepad, you can then begin to create your modified "Popular posts" widget!

To do this, create a new HTML/Javascript element in your blog sidebar, and name it "Popular Posts" or something similar. Next you need to create boundaries for the iframes in order to style the way they are displayed. My own Popular Posts widget is styled using DIV tags like this:

<div style="width: 230px; background:#ffffff; padding: 9px;" class="widget-mid">

insert iframe 2 here...

<div style="clear: both; height: 1px; font-size: 0.1px; border: none; margin: -1px 0 0 0; padding: 0; background: transparent;" class="clear"></div>

<div style="width: 200px; background: #ffffff; padding: 0;" class="widget-mid">

insert iframe 3 here...

<div style="clear: both; height: 1px; font-size: 0.1px; border: none; margin: -1px 0 0 0; padding: 0; background: transparent;" class="clear"></div>

</div>

<div style="width: 200px; height:7px; background: #ffffff;" class="widget-bottom"></div>

<div style="clear: both; height: 1px; font-size: 0.1px; border: none; margin: -1px 0 0 0; padding: 0; background: transparent;" class="clear"></div>

</div>

You can use this as a template for your own widget if you like, making sure that you include the iframe code where specified. The background color can be altered to suit your own blog colors. If you have a good grasp of HTML code, you can easily enclose the iframes in a different style, or even in a table.

Once you've configured your customised widget, save the element and take a look at your blog's sidebar: the "Popular posts" widget you created should now be visible in the template!

However, there is one more thing you should do in order to ensure your widget works correctly. Remember how I said earlier that you'd need the original widget code later on? You need to use this now. Create another HTML/Javascript element in your sidebar, but don't give this one a name. Paste the original code into the element, but wrap it in styled <div> tags, like this:

<div style="display:none"><script src="http://AffiliateBrand.com/img/559140890-265v2.js" type="text/javascript"></script></div>

The part "display:none" ensures that the widget is not actually displayed in your blog. But you still need the extra widget present in order for your new customized widget to work properly! For some reason, the modified version of the widget doesn't update AffiliateBrand with the data of your most popular posts. After looking through the original javascript, I am yet unable to tell which line is used to gather this data, so by including the "non-viewable" second widget, we can still ensure that the customized widget is updated.

I must warn you before that AffiliateBrand does state that you should not modify the contents of the javascript file, and should implement the widget code in your blog as it is provided to you. The most likely reason for this is to stop people from deleting the link back to AffiliateBrand. Personally, I would consider deletion of this iframe unfair since AffiliateBrand do provide the widget free of charge, without the need to sign up as a member! This is in fact the reason that I think you should retain the third iframe code for use in your customized widget. If you do decide to delete the link back from your own widget, do so at your own risk! This could result in the javascript relating to your blog's popular post widget being deleted from the server, in which case your widget will cease to work!

In using the method I have described here (retaining the link back and including a second, non-viewable customized widget), you can be more sure that the necessary components are still in place.

Technorati Tags: widget | popular+posts | affiliate+brand | customize