Menus horizontais coloridos

Coloque um menu horizontal colorido em seu blog. Faça download das imagens dos menus clicando aqui. Tem 4 cores: Azul, Verde, Roxo e Vermelho. Abra o zip e descompacte a pasta images para um local de seu preferência em seu computador.

Faça sempre o backup de seu template antes de mecher nele! Não sabe fazer backup? Clique aqui!

Cada cor dos menus possui duas imagens, se escolheu a cor azul, vai ter a primeira imagem: blueslate_background e a segunda imagem: blueslate_backgroundOVER. Hospede as duas imagens em um site de hospedagens de imagens, como o Tinypic.

Agora copie o código abaixo emcima do tag ]]></b:skin>:

.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 acima, só apenas você vai colocar o link direto da imagem 1 hospedada no lugar de aqui o link da primeira imagem. E o da segunda imagem hospedada, você coloca o link direto no lugar de aqui o link da segunda imagem.

Copie este código abaixo:

<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>

Agora 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>

A parte em negrito acima, pode ser que tenha ou não tenha em seu html. Mas o resto conserteza vai ter. É só procurar (Ctrl+F) e digitar <div id='header-wrapper'> que você acha!