How to restyle your Most Popular Posts widget - Part 3 - the code

UPDATE 23/02/08: I've decided to remove the Most Popular Posts from my blog for the moment - due to the ridiculous amount of time my pages were taking to load. If AffiliateBrand gets their overloaded server issues sorted out, I'll be happy to put it back up - it was a cool widget - but not when you have to wait 5 minutes to view the page...

This is part 3 of a 3-part series on how to restyle your Most Popular Posts widget. You'll need to follow the instructions in Part 1 and Part 2 before you do this bit.

CODE UPDATED 01 JULY 2007 due to changes in the AffiliateBrand coding

At this point you should have your AffiliateBrand widget up and running on your blog, and you will have created your own stylesheet with which to style the inner part of the widget, where your list of most popular posts is displayed. You will also have designed a new look for your widget that matches your blog, and you will have cut up and saved the graphics for this.

Now we'll do the coding.

Step 1 - Take a copy of the HTML for my restyled widget.
Here's the HTML in its simplest form for a single box:

<div class="widget-wrapper-top"></div>
<div class="widget-wrapper-mid">Everything goes inside this div</div>
<div class="widget-wrapper-bottom"></div>

And here's the HTML for my complete restyled widget:

<div id="widget-wrapper-top" style="width: 218px; height:7px; background: url(http://www.webweaver.co.nz/gifs/blog/most-popular/bg-widget-wrapper-top.gif) no-repeat 0 0;"></div>
<!-- end widget-wrapper-top -->
<div id="widget-wrapper-mid" style="width: 200px; background: url(http://www.webweaver.co.nz/gifs/blog/most-popular/bg-widget-wrapper-mid.gif) repeat-y 0 0; padding: 7px 9px 2px 9px; font-family: 'Trebuchet MS'; font-size: 1.0em; font-weight: bold; color: #446666; line-height: 13px; text-align: center;"><p style="padding: 0 15px; margin: 0;">Most popular pages on my blog over the last 7 days</p>
<div style="width: 200px; height:7px; background: url(http://www.webweaver.co.nz/gifs/blog/most-popular/bg-widget-top.gif) no-repeat 0 0; margin: 9px 0 0 0;" class="widget-top"></div>
<!-- end widget-top -->
<div style="width: 182px; background: url(http://www.webweaver.co.nz/gifs/blog/most-popular/bg-widget-mid.gif) repeat-y 0 0; padding: 9px;" class="widget-mid">
<iframe scrolling="auto" width="182px" frameborder="0" src="http://AffiliateBrand.com/BlogWindow/WidgetBlank.aspx?r=725438470-497&w=182&style=http://www.webweaver.co.nz/css/popular-widget.css" marginheight="0" height="420px" marginwidth="0"></iframe>
<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>
<!-- end widget-mid -->
<div style="width: 200px; height:7px; background: url(http://www.webweaver.co.nz/gifs/blog/most-popular/bg-widget-bottom.gif) no-repeat 0 0;" class="widget-bottom"></div>
<!-- end widget-bottom -->
<div style="width: 200px; height:7px; background: url(http://www.webweaver.co.nz/gifs/blog/most-popular/bg-widget-top.gif) no-repeat 0 0; margin: 9px 0 0 0;" class="widget-top"></div>
<!-- end widget-top -->
<div style="width: 200px; background: url(http://www.webweaver.co.nz/gifs/blog/most-popular/bg-widget-mid.gif) repeat-y 0 0; padding: 0;" class="widget-mid">
<iframe scrolling="no" width="178" frameborder="0" style="margin-top:5px" src="http://AffiliateBrand.com/BlogWindow/PoweredByV2.aspx?r=725438470-497&w=173" height="40"></iframe>
<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>
<!-- end widget-mid -->
<div style="width: 200px; height:7px; background: url(http://www.webweaver.co.nz/gifs/blog/most-popular/bg-widget-bottom.gif) no-repeat 0 0;" class="widget-bottom"></div>
<!-- end widget-bottom -->
<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>
<!-- end widget-wrapper-mid -->
<div id="widget-wrapper-bottom" style="width: 218px; height:7px; background: url(http://www.webweaver.co.nz/gifs/blog/most-popular/bg-widget-wrapper-bottom.gif) no-repeat 0 0;"></div>
<!-- end widget-wrapper-bottom -->

Copy this code and save it somewhere. A Notepad file will do, or Word, or TextEdit if you're on a Mac. Better still would be to save it in a web editing tool such as Dreamweaver, but this isn't essential.

Step 2 - View your piece of AffiliateBrand JavaScript in a browser and replace my iFrame code with your own
The piece of JavaScript you got from AfilliateBrand contains a URL. Mine is http://AffiliateBrand.com/img/725438470-497.js. Open up this URL in your browser, and copy the code that appears in your browser window.

Save it in another Notepad, Word, TextEdit or Dreamweaver file.

In amongst all the code you have just saved you will find two iFrame tags. Each looks something like this:

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

Copy the first iFrame tag from your JavaScript file and paste it into my HTML, replacing my iFrame tag. Make sure you copy the whole thing, from the opening <iframe to the closing </iframe> - don't miss anything out or include anything extra! Do the same for the second iFrame tag from your code.

iFrames are like mini web pages that can be displayed inside other web pages. The first iFrame tag will display your Most Popular Posts stats from AffiliateBrand inside your newly-styled widget. The second one contains the link back to AffiliateBrand from your widget.

You can close the file that contains your JavaScript from AffiliateBrand now. You won't need it again. Save my HTML (containing your newly replaced iFrame tags).

Step 3 - Replace the links to my graphics in my HTML with links to your graphics
Look through my HTML and find all the links to images. There are 9 altogether. Each looks something like this:

http://www.webweaver.co.nz/gifs/blog/most-popular/bg-widget-bottom.gif

For each of these graphics, you need to replace the full URL that links to my graphic, with the full URL to your equivalent graphic. If you've used Blogger to host your graphics, look in the code for each of the images you put into the draft page in step 4 of Part 2. There are two URLs for each Blogger image. The one you want is the one with /s1600-h/ in the URL, not the one with /s400/.

Once you have replaced all 9 of my images with your own, save the HTML file again. This is your widget.

Step 4 - Replace the JavaScript in your Page Element with the new HTML
Click the Template tag on your dashboard and select Page Elements. Click the Edit link for your Most Popular Posts page element.

A popup window will open, containing the original JavaScript from AfilliateBrand which you created in step 2. Copy this JavaScript and save it somewhere in case it all goes pear-shaped and you want to go back to the original styling!

Copy all of my HTML which you have just modified in steps 1-3, and paste it into the popup window, REPLACING the JavaScript which you have just copied and saved somewhere else.

Step 5 - Save and view your restyled widget on your blog!
Click Save Changes - the popup window will close once they have been saved.

Preview (or, if you're feeling brave, View) your blog.

If you've followed all the steps exactly, you should now be looking at your newly-styled widget, sitting where your original one was.

And if you get stuck, or something hasn't worked as expected, ask me for help by posting a comment. I'm always happy to help!

Note for JavaScript gurus:
I'm most definitely not a JavaScript guru myself, and maybe that's why my first attempt at doing this didn't work. Instead of putting all the HTML into the Page Element, I put it into a JavaScript file, saved it on my website and then linked to it in exactly the same way as the original JavaScript file was linked. And nothing happened. You can see it on my website if you'd care to take a look and tell me where I went wrong. Thanks!

Technorati tags: Blogger beta, hacks, widget, most popular posts, restyle, restyling, 2.0, JavaScript, HTML, coding, iFrame, AffiliateBrand, Blog Window Widget, Gene Kavner, web development, WebWeaver's World, webweaver.