Menu fixo no topo do blog

Eu sempre adorei esse tipo de menu, facilita demais a vida do leitor.
É bem útil quando você está lá no final do blog e tá com preguiça de voltar atéee lá em cima para mudar de categoria.
Esse menu acompanha, conforme você for descendo no blog, ele vai rolando junto.
Eu inclusive coloquei aqui no Strawberry on Top.
O bom desse tutorial é que além de já incluir no blog as categorias, vem junto uma caixinha de busca super fofa, o que dá um up no blog de forma fácil.
Peguei ele lá no Place Style, mas os créditos, que eu saiba são do Cereja Black.
Vamos lá ao tuto? =]

Com CTRL + F, pesquise por  ]]></b:skin>

Agora, acima desse código que você acabou de achar, cole esse aqui:

#mymenuda {
background: #CD6090; /* Cor do background */

border-left: 200px solid #CD6090; /* Tamanho e cor da borda - não retire pois ela centraliza o menu */

width: 100%;
height: 34px;
position: fixed;
top: 0;
left: 0;
z-index: 9999; 
}
#mymenu {
background: #fff; /* Cor da fonte */
font-family: 'Arial', corsiva; /* Nome da fonte */
font-size: 16px; /* Tamanho da fonte */
text-transform: uppercase; 
}
#mymenu li {
list-style-type: none;
display: inline;
float: left; /* Posicionamento do menu */
padding: 0px;
}
#mymenu li a {
color: #fff;
text-decoration: none;
padding-right: 24px;
line-height: 37px;
}
#mymenu a:hover {
color: #EED5D2; /* Cor da fonte em hover */
}
#mymenu ul {
list-style: none;
margin: 0;
padding: 0; 
background: #fff;
margin-left: 40px;
}
#mymenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 120px;
padding-left: -40px;
}
#mymenu li ul a {
font-size: 12px;
line-height: 24px;
}
#mymenu li:hover ul ul, 
#mymenu li:hover ul ul ul, 
#mymenu li.sfhover ul ul, 
#mymenu li.sfhover ul ul ul {
left: -999em;
}
#mymenu li:hover ul, 
#mymenu li li:hover ul, 
#mymenu li li li:hover ul, 
#mymenu li.sfhover ul, 
#mymenu li li.sfhover ul, 
#mymenu li li li.sfhover ul {
left: auto;
}

#mymenuright {
float: right;
color: #fff;
}

/* BARRA DE PESQUISA */

.search{

float: left; /* Flutuando a esquerda */
font-family: Georgia, Tahoma; /* Nome da fonte */

}

.searchbar{

margin-top:7px;

height: 14px;

width: 240px;

color: #ccc; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo */L

}

.searchbut{

background: url('http://i43.tinypic.com/2evyidy.png'); /* Link da imagem do botão de pesquisar | tamanho: 20x20px */

width:20px;

height:20px;

border: 0;

padding:6px;

}

Salve. Não vai aparecer nada ainda.

Vá em Layout e crie um HTML/JavaScript.

Cole nele esse código:

<div id="mymenuda">
<div id="mymenu">
<li><a href=" Link ">Título</a></li>
<li><a href="Link ">Título</a></li>
<li><a href=" Link ">Título</a></li>
<li><a href=" Link ">Título</a></li>
<li><a href=" Link ">Título</a></li></div>
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
<div id='mymenuright'>
</div></div>

Pronto! Agora basta substituir onde está Link pelo link que a categoria redirecionará, e Título pelo nome da sua categoria. Eu sei que essa parte é meio chatinha, eu pensei a mesma coisa. rs

Essa parte do código dá para 5 categorias, se você quiser mais categorias que isso, basta copiar isto  <li><a href=" Link ">Título</a></li>  e colar lá, em baixo de alguma categoria, certinho.

Ah, se você quiser colocar Início ou Home, é só colocar numa categoria o link do seu blog e Início no título.