First, you will need to get your own website that you can host your files on. If you do not have one, I would recommend the following hosting site. It's cheap, and simple to use.

Next, you will need to get my table template file, and the javascript file needed to display the popups. Once completed, these files will need to be hosted on your website in order for them to be able to be displayed on your home page.

Table_Template.html - This is the template for the table. Please right click, and "Save Link As"

badgeTooltip.js - This is neccessary for displaying the pop-up for each badge. Again, just right click and "Save Link As". It is the same one that IMVU uses, just slightly modified to change the URL pointers from your webpage to IMVU's. All I did was add in www.imvu.com in front of the image and link locations.

Please locate the "Table_Template.html" file that you just downloaded, and right click on it and open it in notepad or wordpad.

You will need to change the script line near the top to what your webpage is. It is the first line that I added a comment to. Change the "YOURWEBSITE" to your website's name, and then the "FOLDERNAME" to the folder that you will upload the "badgeTooltip.js" file to. This need to be exact, as the address in this line is case sensitive. I.E.: "C" cannot replace "c"

Now, you will need to edit the "Table_Template.html" to add in the badges that you want, and in the order that you want. It is a manual copy, paste, and reformat procedure that takes some time to get right.

Ok... Now we need to get the badge image information, and the pop-up information. Please log onto your IMVU home page and go to your "Account settings" page. In the menu of your web browser, click on "View", then "Page Source". This will bring up a window with all the HTML code used to display the page you are on. We need to scroll down to the badges section to get some information. It will start with a DIV line that has "Badge Directions in it, just like the following image.

You will need just the information required to display the badges. So... There is a line that says "Available badges" and "your badges" in it. We are going to highlight that and copy it into the end of the Table_Template file so we can use it.

Now, each one of those lines is a seperate badge. They will need to be formatted so that we can use them in the table that we are creating. I'll use my badge as an example here. The code for my badge in my "Account Settings" source looks like:
<div id='badge-22828128-1-holder' class='badge-holder' style='width: 20px; height: 20px'><div onclick="IMVU.badgeTooltip.show('badge-22828128-1')" id='badge-22828128-1' title='CP Badge' class='avwidget-badge' style='width: 20px; height: 20px;'><img src='http://userimages02.imvu.com/userdata/22828128/badge_4c9bd08878bfc3f49888f6d6d5f89477.gif' alt='CP Badge' width='20' height='20'></img></div><script type='text/javascript'>IMVU.badgeTooltip.setDesc('badge-22828128-1',"<a href=\"http:\/\/www.imvu.com\/catalog\/web_mypage.php?user=22828128\"><img src=\"http:\/\/i268.photobucket.com\/albums\/jj20\/MrTeebes\/banner2.jpg\" border=\"0\" alt=\"Cannibal Productions Banner\" \/><\/a>")</script><script type='text/javascript'>addBadgeDD('badge-22828128-1');</script></div>

We will need to reformat it to look like this:
<img onclick="IMVU.badgeTooltip.show('badge-22828128-1')" class='badgeimg' src='http://userimages02.imvu.com/userdata/22828128/badge_4c9bd08878bfc3f49888f6d6d5f89477.gif' title='CP Badge' alt='CP Badge'/><script type='text/javascript' defer='defer'>IMVU.badgeTooltip.setDesc('badge-22828128-1', "<a href=\"http:\/\/www.imvu.com\/catalog\/web_mypage.php?user=22828128\"><img src=\"http:\/\/i268.photobucket.com\/albums\/jj20\/MrTeebes\/banner2.jpg\" border=\"0\" alt=\"Cannibal Productions Banner\" \/><\/a>");</script>

This is done by deleting the first div bracket area, and changing the second div to img. Class changes from "badge-holder" to "badgeimg". And, finally, remove the script statement from the ending area.

Now that you have your stripped down image to use, we can move it into the table. This part is tricky, and will require lots of patience to get the images in the table how you like them. It's difficult because there are different sized badges, and requires some manipulation to get them as one block. You can put multiple badges in each box, and create a single table box with as many badges as you want, or put each badge in a seperate box. It's really up to you how you would like them organized.

Once you have your table created how you like it, save the file as another name. Use any name you want, just make sure that you can remember it.

Upload the file you just created, and the "badgeTooltip.js" to your website in a folder. Now, we just need to display it wherever you want on your home page. This is the easy part. Use this code to put it into the custom CSS/HTML of one of your boxes.
<style> #offline_panel{position: relative; top: -470; left: -200;} </style><iframe valign="top" width=120 height=200 border="0px" scrolling="no" src="http://YOURWEBSITE/YOURFOLDER/YOURFILENAME.html"></iframe>

Use the position line to control where you want the table. This default how I set it would place it at the top left of the page, if the panel you placed it in was at the top on the left column. Please use the width and height functions to size the frame around your table. Each small badge is a value of 20, so if you had four of those across, the width would be 80. Four down would create a height of 80. Just adjust according to your table size.

I hope you enjoyed my first tutorial, and that it works for you. Enjoy!