Tutorial

Tutorial do menu fixo com caixa de pesquisa

18:14:00


Olá gente !
Este é o meu primeiro layout free que crio para disponibilizar ,espero que gostem,bom sem mais delongas ,a muito tempo que queria aprender a fazer um menu fixo no topo ,e aprendi,mas agora com a caixinha de pequisa ,não é difícil e requer somente atenção,vamos lá.

  • Vá no Painel do Blogger > Modelo e procure po ]]></b:skin>
  • Quando encontrar, cole acima dessa Tag:
Cole esse código ,personalizando somente as cores ao seu gosto ,como quiser.
Mas quando for mudar as cores ,mude essas duas primeiras para que não dê erro como deu no meu que ficou com duas cores ,mas mudando essas duas pelo mesmo código dá tudo certo.
Essas aqui > #CD6090;/*Cor do background
#CD6090;/*Tamanho e cor da borda
Se mudar uma deve mudar a outra pelo mesma cor.

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

}

Depois de ter salvo havendo poto já o código,vá em layout e coloque este código num dos 


  • Feito isso, salve o modelo.
  • Agora vá em " Layout"
  • Adicionar um Gadget
  • HTML/JavaScript
E cole 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>

  • Feito isso, salve o modelo.
  • Agora vá em " Layout"
  • Adicionar um Gadget
  • HTML/JavaScript
E cole 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>

Vou mostrar código pronto com links:

<div id="mymenuda">

<div id="mymenu">

<li><a href=" http://malaguetamexicana.blogspot.com.br/ ">Início</a></li>

<li><a href="http://malaguetamexicana.blogspot.com.br/p/contato.html">Contato</a></li> 

<li><a href=" http://malaguetamexicana.blogspot.com.br/p/sorteios.html ">Sorteios</a></li>
<li>
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />

<div id='mymenuright'>
</div></li></div></div>


Se quiserem tirar alguma linha de link,faça assim ,tire essa :
<li><a href="Link ">Título</a></li>
Ou se quiser mais links ,acrescente .

Salve e esta prontinho .

Qualquer dúvida só chamar !!






You Might Also Like

0 comentários

Obrigado pelo seu comentário,volte sempre e aproveite o blog.

Like us on Facebook

Eu Sou do CBBlogers