Menu com botões costumizáveis

Fiz alguns botões em cores diferentes para que você tenha seu menu horizontal combinando com as cores de seu blog. Veja o exemplo.




Bem simples basta que você salve a imagem escolhida em seu pc e depois a hospede( se não sabe hospedar aprenda AQUI ). Para instalar o menu em seu blog, coloque os códgos nos locais indicados e depois cole o endereço dos botões no local indicado no menu.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

Vá até o HTML do seu Blogger e procure pelo código:
]]></b:skin>

• Azul--endereço da imagem
• Verde--cor das letras
• Vermelho--cor do fundo ao passar o mouse

Agora acima do código, ]]></b:skin> cole o código abaixo

ul#menu
{
width: 100%;
height: 60px;
background: url("AQUI O ENDEREÇO DE SUA IMAGEM") top left repeat-x;
font-size: 0.8em;
font-family: "Lucida Grande", Verdana, sans-serif;
font-weight: bold;
list-style-type: none;
margin: 0; padding: 0;
}
ul#menu li
{
display: block;
float: left;
margin: 0 0 0 5px;
}
ul#menu li a
{
height: 40px;
color: #000000;
text-decoration: none;
display: block;
float: left;
line-height: 200%;
padding: 8px 15px 0;
}
ul#menu li a:hover
{
color: #FFFFFF;
background: #000000;
}
ul#menu li a.current
{
color: #FFF;
padding: 5px 15px 0;
}

Agora se quer que o seu menu fique acima da imagem principal do blog procure pelo código:



<div id='navcontainer'>





se quer que o seu menu fique abaixo da imagem principal do blog procure pelo código:





<div id='content-wrapper'>



E cole o código abaixo.
Faça as alterações colocando os links desejados e salve.

<!-- TROQUE ABAIXO O ENDEREÇO PARA O SEUS LINKS DO MENU HORIZONTAL -->
<ul id='menu'>
<li><a class='current' href='http://AQUI O ENDEREÇO DO SEU LINK 1'>LINK 1</a></li>
<li><a href='http://AQUI O ENDEREÇO DO SEU LINK 2'>LINK 2</a></li>
<li><a href='http://AQUI O ENDEREÇO DO SEU LINK 3'>LINK 3</a></li>
<li><a href='http://AQUI O ENDEREÇO DO SEU LINK 4'>LINK 4</a></li>
<li><a href='http://AQUI O ENDEREÇO DO SEU LINK 5'>LINK 5</a></li>
<li><a href='http://AQUI O ENDEREÇO DO SEU LINK 6'>LINK 6</a></li>
</ul>