WordPress

Doing this in WordPress is dead simple. Just open up wp-includes/bookmark-template.php and make the following changes. I prefer to download the files here and make edits with jEdit :)

// Line 6
'show_images' => 1, 'before' => '<li>',

// Change to
'show_images' => 1, 'before' => '<li class="vcard">',

// Line 48 or something similar ;)
$output .= '<a href="' . $the_link . '"' . $rel . $title . $target. '>';

// Change to
$output .= '<a class="fn url" href="' . $the_link . '"' . $rel . $title . $target. '>';

You could use the WP Microformatted Blogroll plugin for WordPress, but I like this much better because it looks like it can’t be used by a dynamic sidebar and maybe I just like to code ok?

Blogger

For Blogger you are going to need to edit your template HTML, and make sure you check the Expand Widget Templates checkbox. About 4/5ths of the way down you should see a code block like this:

<b:widget id='LinkList1' locked='false' title='Blogroll' type='LinkList'>
  <b:includable id='main'>
    <b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
      <ul>
        <b:loop values='data:links' var='link'>
          <li><a expr:href='data:link.target'><data:link.name/></a></li>
        </b:loop>
      </ul>
    <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

You just need to edit the list items in the loop to add <li class=’vcard’ and <a class=’fn url’ like so:

<ul>
  <b:loop values='data:links' var='link'>
    <li class='vcard'><a class='fn url' expr:href='data:link.target'><data:link.name/></a></li>
  </b:loop>
</ul>

However, to add XFN as well you will have to remove the loop and create the <li> tags yourself. You can find out more about XFN here.

<ul>
  <li class="vcard">
    <a class="fn url" href="http://davidwalsh.name" rel="friend">David Walsh</a>
  </li>
  <li class="vcard">
    <a class="fn url" href="http://casedogdesigns.com" rel="friend colleague met">Casey Watson</a>
  </li>
</ul>

That’s all! Easy, right? What other ways have you incorporated microformats into your website or blog? Stay tuned for more simple ways you can jazz up your blog with microformats!

Related posts:

1. Javascript: Measure those “em”s for your layout
2. Create a Color Palette Using CSS and MooTools 1.2
3. Use the table-layout CSS property to speed up table rendering