Menu Fixo no topo + caixa de busca

29 fevereiro 2016


Olá pessoal, Tudo bom vocês? 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 Busca.
Quer 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.

Nenhum comentário:

Postar um comentário