Skip Site Navigation «

Linking Instructions

info«linking

If you enjoy loadaverageZero and would like to show your support by linking to it, here are instructions for text links, buttons and banners. You can download the images if you wish, and save them to your own Web server. Otherwise, I am happy to host them as long as you’re using them to link to this Web site.

I am not a graphic designer! But I try, so if there is enough interest I will continue to create more buttons and banners as time goes by. If you are a designer, and find mine pathetic, you’re welcome to take a crack it and show me the results. If I like your work, I will go out of my way to place them here, give you full credit, provide blushing reviews of your work, and so on. Contact Me for details.

Fonts

For the masthead at the top of every page, and the banners for loadaverageZero below, I used the Agency FB Bold font. For drx, the main font is Broadway, and the italic secondary font is Forte.

To create a text link to the home page of this site, use the following code:

<a href="http://loadaveragezero.com/" title=" the design is in the Code ">loadaverageZero</a>

Resulting in a link like this: loadaverageZero. I sometimes use a radical (or “check mark”) and the URI to the site in the title instead. You can do the same if you wish like this:

<a href="http://loadaveragezero.com/" title=" &#8730; http://loadaveragezero.com/ "> loadaverageZero</a>

Resulting in this: loadaverageZero.

To create a 80x15 pixel button which weighs in at a whopping 774 bytes in 64 colors, and looks like this: loadaverageZero, use this XHTML markup:

<a href="http://loadaveragezero.com/" title=" the design is in the Code "> <img src="http://loadaveragezero.com/img/laz/laz-button.gif" alt="loadaverageZero" /></a>

Here are two more 80x15 buttons, courtesy of Jamey at graphicsguru.com:

<a href="http://loadaveragezero.com/" title=" the design is in the Code "> <img src="http://loadaveragezero.com/img/laz-gg.gif" alt="loadaverageZero" /></a>

<a href="http://loadaveragezero.com/" title=" the design is in the Code "> <img src="http://loadaveragezero.com/img/laz-gga.gif" alt="loadaverageZero" /></a>

Although there are no RSS police, the most common size for a feed image is 88x31 pixels. I just happen to have a rather unusual one you can use if you‘d like, and it looks like this:

To use this banner or button, or whatever you want to call it, use this code:

<a href="http://loadaveragezero.com/" title=" the design is in the Code "> <img src="http://loadaveragezero.com/img/laz/laz-RSS.gif" alt="loadaverageZero" /></a>

I was never very fond of that one, here are a few more you might like better:

<a href="http://loadaveragezero.com/" title=" the design is in the Code "> <img src="http://loadaveragezero.com/img/laz/laz-newlg.gif" alt="loadaverageZero" /></a>

<a href="http://loadaveragezero.com/" title=" the design is in the Code "> <img src="http://loadaveragezero.com/img/laz/laz-newmd.gif" alt="loadaverageZero" /></a>

<a href="http://loadaveragezero.com/" title=" the design is in the Code "> <img src="http://loadaveragezero.com/img/laz/laz-newsm.gif" alt="loadaverageZero" /></a>

<a href="http://loadaveragezero.com/" title=" the design is in the Code "> <img src="http://loadaveragezero.com/img/laz/laz-newln.gif" alt="loadaverageZero" /></a>

drx is very popular. If you‘d like to refer your visitors to a place they can find tons of resources for Web developers, consider linking to it. The heading above, although it may look like an image, is actually created with a CSS rule like this:

h2.drx { font-family: Broadway, Arial, Helvetica, sans-serif; font-size: 200%; font-weight: bold; color: #100; width: 1.8em; padding: 3px 6px 2px; border: 2px solid #000; background-color: #ff6; }

And markup like this:

<h2 class="drx">drx</h2>

Although this approach saves you the hassle of dealing with an image, and in general reduces bandwidth, it has the problem that it leaves you as a page designer at the mercy of your visitors having the preferred Broadway font installed on their system. At any rate, by combining a heading like this with an anchor tag, you can create fairly effective links without an image.

To create a normal, inline text link like this: drx, use the following markup:

<a href="http://loadaveragezero.com/app/drx" title=" drx: Web Developer Resource Index ">drx</a>

Or this bad-boy button, a wire-melting 8 colors and 276 bytes: drx

<a href="http://loadaveragezero.com/app/drx" title=" drx: Web Developer Resource Index "> <img src="http://loadaveragezero.com/img/laz/drx-button.gif" alt="drx" /></a>

And here are some small banners. I don’t think anyone is going to be interested in larger ones, but if so, shout out and I will design some more.

<a href="http://loadaveragezero.com/app/drx" title=" drx: Web Developer Reource Index "> <img src="http://loadaveragezero.com/img/laz/drx-index.gif" alt="drx" /></a>

<a href="http://loadaveragezero.com/app/drx" title=" drx: Web Developer Reource Index "> <img src="http://loadaveragezero.com/img/laz/drx-developer.gif" alt="drx" /></a>

<a href="http://loadaveragezero.com/app/drx" title=" drx: Web Developer Reource Index "> <img src="http://loadaveragezero.com/img/laz/drx-opensource.gif" alt="drx" /></a>

<a href="http://loadaveragezero.com/app/drx" title=" drx: Web Developer Reource Index "> <img src="http://loadaveragezero.com/img/laz/drx-chicklet.gif" alt="drx" /></a>

Thanks for your support!

—Douglas Clifton

Last updated: Thursday, September 25th, 2008 @ 12:53 PM EDT [2008-09-25T16:53:10Z]   home

(c) 2008-2010, Douglas W. Clifton, loadaveragezero.com, all rights reserved.