Como colocar o menu antes do cabeçalho no Blogger

Quer receber as melhores dicas para blogs? Registre-se no CBBlogers e receba todas as novidades e informações em primeira mão!

O design do seu blog é a roupa do site, afinal, será através dele que os seus leitores irão navegar e se encantar pelo espaço. Por isso é de extrema importância que o layout seja de fácil navegação e limpo para facilitar o acesso dos visitantes.

Um dos itens mais importantes é o menu, que auxilia na navegação entre uma página e outra. E para ajudar ainda vocês, nós trouxemos um tutorial completo ensinando como instalar um menu fixo como esse na imagem abaixo, do blog da Raquel Correa.

Passo 1 – Acesse o painel de controle do seu blog e vá à opção Modelo, clique em Editar HTML. Clique em algum lugar no meio do código e pressione as teclas Ctrl+F na janela Search que irá aparecer, procure pela tag: ]]></b:skin>

Passo 2 – Logo acima da tag pesquisada no primeiro passo cole o código a seguir:

#mymenuda {
background: #CD6090; /* defina a cor do background */
border-left: 200px solid #CD6090; /* tamanho da borda e cor- não retire pq ela centraliza o menu */
width: 100%;
height: 42px;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
#mymenu {
background: #fff; /* cor da fonte */
font-family: ‘Arial’, corsiva; /* nome da fonte */
font-size: 20px; /* titulo 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: 42px;
}
#mymenu a:hover {
color: #EED5D2; /* cor do link 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, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Georgia, Tahoma; /* Fonte da letra que será escrita quando procurarmos por algo */
}
.searchbar{
margin-top:7px;
height: 20px;
width: 240px;
color: #ccc; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url(‘http://cdn1.iconfinder.com/data/icons/Snow/Snow/snow/Search.png’); /* Link/Url da imagem do botão de pesquisar | tamanho: 30 x 30px */
width:30px;
height:30px;
border: 0;
padding:7px;
}

Para alterar o seu menu verifique as dicas a seguir:

Os itens que podem ser alterados estão em negrito e com as explicações logo na frente, apenas atente-se ao detalhe do fundo do menu que é a parte Background.

Background: Onde você irá definir o fundo do seu menu, que pode ser uma imagem ou uma cor.

Se você quiser colocar uma imagem é só colocar depois de dos pontos a frase background url(“Link da imagem”), onde está link da imagem você irá colocar o endereço da imagem escolhida, que deve ser hospedada em um servidor online.

Se for utilizar apenas cor de fundo, coloque o código HTML da cor, por exemplo #000000 que é Preto.

No item border-left: tem o código #CD6090 que é a mesma cor do menu, se você alterar a cor do menu precisa alterar essa cor.

Como adicionar o Gadget na página para finalizar o tutorial

Passo 3 –  Clique na opção Layout, onde está escrito “crosscol” ou “Cross- Column” do layout do seu blog você irá clicar em adicionar um Gadget e escolha o modelo HTML/ JavaScript.

Passo 4 – Feito isso, coloque o código abaixo dentro do Gadgets:

<div id=”mymenuda”>
<div id=”mymenu”>
<li><a href=” LINK “>PÁGINA</a></li>
<li><a href=” LINK “>PÁGINA</a></li>
<li><a href=” LINK “>PÁGINA</a></li>
<li><a href=” LINK “>PÁGINA</a></li>
<li><a href=” LINK “>PÁGINA</a></li>
<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>

Nesse código você irá alterar a palavra “LINK” pelo URL da página que deseja, e onde está escrito “Página” será o título do desse link. Pode ser: Home, Sobre o Blog, Contato, entre outros.

Depois do menu configurado e personalizado o seu blog está pronto com menu novo. E agora queremos saber o que vocês acharam desse tutorial. Não se esqueçam de comentar e compartilhar essa dica em suas redes sociais. Beijos e até logo!

CBBlogers by Grazi Forti

E pra quem quiser conhecer um pouco mais sobre a Grazi, acessem o blog Falando de Feminices  para encontrar várias dicas, e também não esqueça de segui-la aqui na nossa Comunidade!

Facebook / Twitter / Pinterest / Instagram

Imagens via: Raquel Correa