Mais menus horizontais

Hoje o Carlinhos me perguntou no Twitter como colocar no blog os menus que aparecem nesta página. Como é impossível explicar em 140 caracteres, vou responder aqui no blog:

Primeiro faça o download do pacote que contém as imagens e códigos para os 4 menus: download.
Copie o código CSS (ver abaixo) para o menu escolhido: Blue, Green, Red ou Purple e cole em qualquer lugar antes de ]]></b:skin>

Hospede as duas imagens que são pedidas para cada menu. Por exemplo, se você escolheu o Red, hospede redslate_background e redslate_backgroundOVER e coloque assim no código:

.red #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(aqui o link da primeira imagem/code/slate/images/redslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.red #slatenav ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(aqui o link da segunda imagem/code/slate/images/redslate_backgroundOVER.gif) no-repeat top center;}

Não mude nada entre os parenteses, apenas acrescente o link das imagens, como indicado.

Agora copie o trecho do HTML do código do menu :

<div class='red'>
<div id='slatenav'>
<ul>
<li><a class='current' href='http://seu link aqui' title=''>Home</a></li>
<li><a href='http://seu link aqui' title=''>About Us</a></li>
<li><a href='http://seu link aqui' title=''>Services</a></li>
<li><a href='http://seu link aqui' title=''>Our Work</a></li>
<li><a href='http://seu link aqui' title=''>Contact Us</a></li>
</ul>
</div>
</div>

e cole abaixo ou acima de:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Cabeçalho)' type='Header'/>
</b:section>
</div>

O meu ficou assim.

Espero ter ajudado.