21 julho 2014

#DicasdaTati: Menu acima do cabeçalho!

Hello girl! Vim ensinar como colocar a barra de menu, acima do cabeçalho! Vamos lá:

Entre no painel do blogger >> mais opções >> modelo >> editar html;
Acima da tag ]]></b:skin>  cole o seguinte código:


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



Agora vá em layout, add gadget, HTML/ JAVASCRIPT  cole o código abaixo trocando o " # " pelo link da página e "PAG" pelo nome da página.

<div id="mymenuda">
<div id="mymenu">
<li><a href=" # ">PAG</a></li>
<li><a href="# ">PAG</a></li>
<li><a href=" # ">PAG</a></li>
<li><a href=" # ">PAG</a></li>
<li><a href=" # ">PAG</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>


Agora é só salvar e visualizar. Espero que tenham gostado! Eu adorei ensinar as coisinhas que aprendi, a medida que eu for aprendendo mais coisas, vou ensinando! Amores, vai ter novidades! Em breve conto!
Um suuuper beijo, ate amanhã!

Um comentário:

Oi!♥
Comente sempre! Seja um membro ativo!
Amo responder comentários!