Blogger – Add Ask Ubuntu Flair HTML Code

This is an HTML feature. You can either use the <acronym> tag, or a <span> element. If it's not an acronym, I'd recommend using <span> with a custom class attribute. The trick is to place the text you want to appear in the hint as the title attribute.

Here's an example of the HTML:

Can I get this <span class="myclass" title="as soon as possible">ASAP</span>?

Now to get it formatted with an underline, you need to add this style anywhere in your HTML, preferably only once in your template:

<style type="text/css">
  .myclass {
    border-bottom-width: 1px;
    border-bottom-style​: dashed;
  }​
</style>

This should work in all of the major browsers.

I'm not sure why you want to keep this content separately from the rest of the blog. Blogger has been supporting non-blog pages for several years now. If you want your content to be displayed on every page, you can add a widget with that content.

If you, after all, still want the content to be hosted externally, Blogger supports <iframe /> tag at least on non-blog pages. Here's tag reference from W3Schools.org.