29 fevereiro 2016

Menu Fixo no topo com caixa de busca

Menu Fixo no topo

Hoje eu preparei um tutorial bem rapinho, mas que é essencial em qualquer blog: Menu Fixo. Mas esse não é qualquer menu não minha gente, além de ser fixo no topo, ele rola com a página e ainda tem uma Caixa de BuscaQuer aprender esse tutu? Bora lá!



O Menu Fixo ficará assim: (clique na imagem para um melhor visualização)



Vá em MODELO > EDITAR HTML, 
clique na área de códigos e dê CTRL+F, aparecerá uma caixa de busca, dentro dela cole : .tabs-outer { você deverá apagar tudo que estiver entre /*tabs e /* Headings, assim:




Depois de apagar o que está selecionado, no lugar, cole o seguinte código:


#NavbarMenu {
background: #ffffff;
width: 100%;/*--TAMANHO DO MENU--*/
height: 40px;/*--ALTURA DO MENU--*/
font-size: 20px;/*--TAMANHO DA FONTE--*/
font-family: 'Arial';
color: #FA5882;*--COR DA FONTE--*/
font-weight: none;
margin: 0;
padding: 0;
text-transform: none;
position: fixed;
top: 0px;
left: 0px;
text-align: center;
border-left: 270px solid #ffffff; /* Tamanho e cor da borda - não retire pois ela centraliza o menu */
z-index: 999;
}
 #NavbarMenuleft {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
 }
#nav li a, #nav li a:link, #nav li a:visited {
color: #151515; /*--COR DA FONTE--*/
display: block;
font-size: 15px;/*--TAMANHO DA FONTE--*/
font-family: 'Arial';
font-weight: normal;
text-transform: none;
margin: 0;
padding: 9px 15px 8px;
font-weight: bold;
 }
#nav li a:hover, #nav li a:active {
background:#FD759B;/*--COR DE FUNDO AO PASSAR O MOUSE--*/
color: #ffffff; /*--COR DA FONTE AO PASSAR O MOUSE--*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
font-weight: bold;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 100px;
color: #FFFFFF;
font-size: 15px;
font-family: 'Arial';
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 9px 10px;
font-weight: bold;
background: #FD759B;
font-weight: bold;
}
#nav li li a:hover, #nav li li a:active {
background: ;
color: #FD759B;
padding: 7px 10px;
}
#nav li {float: left;padding: 0;
}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;
}
#nav li ul a {width: 140px;
}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;
}
Feito isso, visualize, se estiver tudo ok, SALVE.



Para o Menu funcionar, vá em: LAYOUT > ADICIONAR UM GADGET > HTML/JAVASCRIPT e dentro da caixa cole o seguinte código:



<div id="NavbarMenu">
<div id="NavbarMenuleft">
<ul id="nav">
<li><a href="#>INICIO</a>
<li><a href="#">SOBRE</a>
<li><a href="#">PARCERIAS</a>
<li><a href="#">BLOGROLL</a>
<li><a href="#">CONTATO</a>
</li>
<style></style>
<style>
#w2b-searchbox{
background:url(https://4.bp.blogspot.com/-NYz3TKeNReU/VtRy0c2YcYI/AAAAAAAANlc/7VTs7r3eZy0/s1600/BUSCA.png) no-repeat scroll center center transparent;
width:308px;
height:40px;
disaply:block;
float: left;
margin-left: 50px;
}
form#w2b-searchform{
display: block;
padding: 10px 12px;
margin:0;
margin-top: -10px;
height: 15px;
}
form#w2b-searchform #s{
padding: 6px;
margin:0;
width: 220px;
font-size:14px;
vertical-align: top;
border:none;
background:transparent;
color: #151515;
margin-top: 7px;
margin-left: -78px;
text-align: center;
}
form#w2b-searchform #sbutton{
margin:0;
padding:0;
height:10px;
width:10px;
vertical-align: top;
border:none;
background:transparent;
margin-top: 15px;
margin-right: -95px;
}
</style>
  <div id="w2b-searchbox">
  <form id="w2b-searchform" action="/search" method="get">
      <input type="text" id="s" name="q" value="Digite sua busca e dê enter!" onfocus='if (this.value == "Buscar...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Buscar...";}'/>     <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />  </form>
</div>
</li></li></li></li></ul></div>
</div>
<div style="clear: both;">
   </div>



Entendo melhor o código:

VERMELHO: nesse local você colocará o link referente a aba do menu, assim, quando seu leitor clicar, será redirecionado a página lincada.


AZUL: São os nomes das abas. Caso queira acrescentar mais páginas em seu menu, basta que você dê espaço na última aba, e coloque o seguinte código: 


<li><a href="#">NOME DA ABA</a>

ROXO: É a imagem da caixa de busca. Caso queira trocar, basta criar a sua própria caixa com o tamanho e a cor desejada. Para mudar, basta hospedar a imagem e copiar a URL da mesma. Eu sempre hospedo no próprio blogger.

ROSA: Width é a largura da imagem usada para a caixa de busca, e height é a altura. Lembrando que esses valores devem ser do mesmo tamanho da imagem usada.

Muitos não encontraram  a linha .tabs-outer {  então, procure por ]]></b:skin> e acima dele cole o código 

Viu como é super facinho? Quero ver todo mundo fazendo, e me conta como ficou. Um super beijo meus amores, e até a próxima 0/

Tutorial atualizado no dia 5 de Junho de 2016.

4 comentários:

  1. Dá pra mudar a cor do menu?

    ResponderExcluir
    Respostas
    1. Em #NavbarMenu { background: #ffffff; você pode mudar a cor do menu. Troque #ffffff pela cor que deseja.

      Excluir
  2. Oi Lorena, tiver que colocar só tabs para achar o ouner não apareceu no meu layout e deu um bug no topo mais depois tento arrumar. Beijos!

    ResponderExcluir
    Respostas
    1. Oi Regiane!Espero que consiga. Já tem um novo tutorial de menu fixo no topo. Depois corre lá pra conferir! Mil bjos :*

      Excluir