HTML-only badge

N.Gifford wrote up his thoughts on NetworthIQ last month and in the comments he asked about an HTML-only badge to use on Wordpress.com. We can get really close with the HTML below. The net worth has to updated manually, but the chart will work automatically. I’ll add to the list getting the net worth automatic by generating an image.

<!-- Begin NetworthIQ Badge -->
<style>
.badge {border-top: 1px solid #DDD; border-left: 1px solid #DDD; border-right: 2px solid #999; border-bottom: 2px solid #999; background: #FFF; padding: 4px;}
.nwiqNetWorth {font: .9em sans-serif; color: black; text-align: center; font-weight: bold; margin-top: .25em; margin-bottom: .25em;}
.nwiqPowered {font: 0.75em sans-serif; color: black; text-align: center}
.nwiqPowered A {color: #6A7C66}
.nwiqPowered A:hover {color: #F6B348}
</style>
<div class="badge" style="width: 160px;" align="center">
<a href="http://www.networthiq.com/people/[username]"><strong>[username]</strong></a><br/>
<a href="http://www.networthiq.com/people/[username]">
<img src="http://www.networthiq.com/charts/chart.ashx?u=[username]&h=150&w=160&c=FFFFFF" border="0">
</a>
<br/>
<div class="nwiqNetWorth">Net Worth $[net worth]</div>
<a href="http://www.networthiq.com/"><img src="http://www.networthiq.com/images/poweredBy.gif" alt="Powered By NetworthIQ" border="0"></a>
</div>
<!-- End NetworthIQ Badge -->

2 Responses to “HTML-only badge”

  1. NGifford Says:

    Wordpress strips out all of the style information, but the plain HTML graphics and text work fine…

    Thanks.

  2. Ryan Says:

    Bummer, I’ll have to play around more with Wordpress. Maybe just putting the styles inline will do the trick. Thanks for trying it out and glad it’s working in the current form.

Leave a Reply