Tutorial | Como colocar menu fixo no topo do blog

  Olá pessoal tudo bom?

    Hoje vim encinar como colocar menu fixo no topo do blog, super simples e fácil de fazer para você que tem dificuldade no HTML do blog :D

• Vá no Painel do Blogger > Modelo e cole acima da tag ]]></b:skin>:

#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 */

}

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

}

--------------------->TABELA DE CORES AQUI (PEGA O CÓDIGO HTML) <------------------------

OBS: O menu (exceto as cores), está com as mesmas configurações que eu uso, então se você não entende muito de HTML recomendo que não altere nada além do que está indicado.

• Vá em Layout > Adicionar um Gadget > HTML/JavaScript e cole:

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

Faça as alterações necessárias (coloque o link da página e o título) e salve.

OBS: Se você quiser colocar mais uma página é só copiar e colar a linha de <li> até </li> e colar antes de </div>. Para retirar, é só apagar uma das linhas.

Xauzinho :D

                                                   FACEBOOK | TWITTER | INSTAGRAM