Menu Fixo com Caixa de Pesquisa e Redes Sociais


Olá! Hoje trouxe um tutorial de como fazer um menu que nem esse que uso no template atual, abaixo do cabeçalho, que, quando você 'desliza' pelo blog, ele se mantém fixo no topo, com acesso a links e caixa de pesquisa. Foi um pedido de alguns leitores, esse daqui do blog já veio no template, então fui pesquisar porque sempre tive curiosidade de saber como fazer menus nesse estilo, porém ficava em dúvidas quando lia os tutoriais, a maioria em inglês ;___; Finalmente consegui entendê-lo, graças ao site LearnWebCode, e usar no Blogger. Claro, eu não sou profissional, então minha versão ficou bem simples e sem muitas edições do original, mas acho que vão gostar. O menu do tutorial de hoje vai ficar fixo na tela, tem área para caixa de pesquisa, links e redes sociais com efeito grayscale. Vamos começar.

Em Modelo - Editar HTML - cole o seguinte código antes de </b:skin>:

nav {
 z-index: 500;
    background-color: rgba(255, 255, 255, 0.62); /*cor da barra*/
}

.nav-placeholder {
 margin: 0 0 40px 0;
}

.fixed {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
    background-color: rgba(255, 255, 255, 0.62); /*cor da barra ao deslizar*/
}

.fixed .nav-inner {
 padding: 0 20px;
}

.fixed .nav-inner-most {
    max-width: 1100px;/*largura maxima ao deslizar*/
 margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.62);
}

nav ul {
 margin: 0;
 padding: 0;
}

nav ul li {
 list-style: none;
 float: left;
}

nav ul li a:link,
nav ul li a:visited {
 display: block;
 text-decoration: none;
 padding: 10px 25px;
 background-color: #transparent;
 color: #AAAAAA;
 font-size: 90%;
 font-weight: bold;
}

nav ul li a:hover {
 color: pink;
}

nav ul li:last-child a:link,
nav ul li:last-child a:visited {
 border-right: none;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.container {
    max-width: 1100px; /*essa largura tem que ter valor igual ou proximo da largura total do seu blog*/
 margin: 0 auto;
 padding: 0 20px;
 position: relative;
}
#search {
width: 228px; /* largura caixa de pesquisa */
height: 22px;/* altura caixa de pesquisa */
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
}
#search-box {
margin-top: 3px;
border:0px;
background: #fff;
text-align:center;
color:#AAAAAA;
}
.gray, a gray { /*deixa os icones cinza*/
-webkit-filter:grayscale(100%)
}
.gray:hover, a:hover gray {
-webkit-transition-duration: 0.5s;
-webkit-filter:grayscale(1%)
}

O que é esse código? Bom, é o CSS, nele você define a aparência do menu e da caixa de pesquisa. No nosso caso, definimos um background branco, quase transparente, escolhemos cores de textos e links; uma coisa que vocês devem atentar é para com a largura com número 1100; ela se refere a largura total do blog ou aproximada e você pode definí-la pelo Designer do Blogger, em Ajustar Larguras. Geralmente blogs tem acima de 980px de largura, aí você muda de acordo com o seu; isso fará o menu ocupar toda a tela em forma de barra. E aplicamos o efeito grayscale ao contrário nos ícones de redes sociais.
***
Agora a gente vai adicionar 2 scripts: jQuery (se você já tiver alguma versão dele no seu HTML não precisa colocar de novo) e um script que define como o menu age, o qual não alterei, está idêntico ao do autor e devidamente creditado no arquivo JavaScript.
Procure por </head> e cole acima dessa tag os scripts:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='https://kawaiiicode.github.io/sticky.js' type='text/javascript'/>
***
Vamos definir que o menu apareça na tela da forma que editamos no CSS e no script. Primeiro, para dar certo em todo o blog, vamos colar a class do container depois de <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>:

<div class='container'>

Temos que fechá-la né. Procure por </body> e cole isso antes dele:

</div>

Por último, vamos adicionar o menu abaixo do cabeçalho. Encontre </header> e cole isso abaixo dele:
<nav>
   <ul class='clearfix'>
                <li><form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Search...&quot;;' onfocus='if (this.value == &quot;Search...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Search...'/></form></li>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>F.A.Q</a></li>
                <li><a href='#'>Música</a></li>
    <li><a href='#'>Tutoriais</a></li>
              <li><a href='#'><img class="gray" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDsNuCMxB-SXai_-p-d_FVVriq4P5nP_mhzlswTd1_sstWwSMfL-eQKaS0msgmkpG-6RA5WFsNFvqe_uoMGf6RYZmMFEqJ2AsBPSyQpLznTZPCswgRrPkw3ctJqeWdKTupdLuTxsr6ymg/s1600/facebook.png" title='Curtiu?'/></a></li>
              <li><a href='#'><img class="gray" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit6jBZgOxOmObgDmJuxonGVEAXX_rLUvPTJzrQjrMDIYSiW2DySTWuNd9ZH5onN3Mq2hwmOcZcLkIeUbTmk3eqHZP1loMC8flI38LQ4cw9SGXOhKi2su-1JKxjJ17XVc0gmpeisxltCuQ/s1600/twitter.png" title='Follow'/></a></li>
              <li><a href='#'><img class="gray" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoINEJRMNEMBA4xroBECClAZk_2MooPjOMANM5i6_H-mwC5w7KWzfrIZcr5nZehsdtI4rtgsMKs6Ubxyr2sGARzuvjaiXs3xoy1FXUVQX4U-4io2kkm6DJBvjObfKZT9yPp7JJIeQuj0g/s1600/deviantart.png" title='+Watch'/></a></li>
              <li><a href='#'><img class="gray" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimoqBPDkzWB_ZpAQ6H8SpHWIyswLUaxrT34IwqoWvjbd_v3so9jpdssOauwIDAtnzr5oPy1jem9Dt8hOL4iy8WEVdfAnlw68YnnvRDOzG22LKtf12AlB609ivC-Qu4fIYTWqFyXfntFx4/s1600/heart.png" title='Love'/></a></li>
              <li><a href='#'><img class="gray" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzfjvOAaV9YVSrof2A3XzJF-Cb6SWURdWPThoe3YDVpCaLzGYAyCcN_GujB5OrAnIuFC5eJUMDhqdiSOv-g-3fuE8yV2ZRmrS3wZ6YGgtQmNeeexFLNtm1fje2g1RpxnCMaY66RFvOtYo/s1600/email.png" title='Contato'/></a></li>
   </ul>
  </nav>

Basta substituir "#" por links, os nomes Home, About...por títulos; o que estiver em title='...' você muda para o texto que quer que apareça ao passar o mouse pelos ícones de redes sociais; estes ícones foram encontrados aqui: HushStarberry.
E está pronto mah-ôe! kkk...Espero que gostem ;3






Postar um comentário

20 Comentários

  1. Que saudades de vir aqui ^^
    Amei o tutorial, menu super gracioso abor :3 ainda mais com essa barra de pesquisa diva

    A.N ~

    ResponderExcluir
  2. Olá Roberta! Adoro seu blog, parabéns pelo design e por disponibilizar tantas dicas legais e uteis. Quando tiver um tempinho faz uns modelos para area de postagem.
    bjsssss

    ResponderExcluir
  3. Não consegui, sei lá.. Parece que você está falando grego para mim hehe.. Mas amei o o tuto você explicou bem, só que eu não consegui entender... Vou procurar mais tutoriais aqui no seu blog para por no meu. Lhe admiro muito!!

    ResponderExcluir
    Respostas
    1. Obrigada :3 Tenta de novo, você vai ver que não é muito complicado ;D
      Bju

      Excluir
  4. O meu não fica abaixo do cabeçalho, fica fixo no topo, fiz exatamente como no tutorial mas não deu certo.

    ResponderExcluir
    Respostas
    1. Bom, essa foi a forma que deu certo aqui quando testei em um modelo Simple padrão do Blogger. Quando você adiciona o último código abaixo de /header, ele aparece abaixo do cabeçalho.
      Talvez se você o posicionar dê certo; coloque o último código entre div e /div, como mostrei nesse tutorial aqui: Posicionar Elementos com HTML

      Excluir
  5. como vc colocou a logo?

    ResponderExcluir
    Respostas
    1. Nesse template que uso já veio assim, com o avatar ali no cantinho; mas é só inserir a imagem antes do código da caixa de pesquisa desse modelo que disponibilizei nesse post, como as das redes sociais.

      Excluir
  6. Obrigada linda ajudou muito beijos.

    ResponderExcluir
  7. Onde tem cor da barra, você pode mudar o plano de fundo; talvez precise acrescentar um background em nav ul {; para mudar a cor dos links, troque #AAAAAA por outra cor.

    ResponderExcluir
  8. Querida,eu não achei esse tal de body e header que tem ali o q faço?

    ResponderExcluir
    Respostas
    1. No html do seu modelo, aperte Ctrl+F. Na caixinha de pesquisa que aparecer, digite body ou /body ou head ou /head... Logo eles serão destacados ^^

      Excluir
  9. Olá, ótimo tutorial. Eu gostaria de saber como fazer o menu fixo que vc usa no seu blog, ele é perfeito. GRata <3

    ResponderExcluir
    Respostas
    1. Obrigada ^^ Esse já veio no template que estou usando. Vou tentar fazer um nesse estilo e posto aqui ok :3

      Excluir
  10. Olá, Roberta! Esse script não está mais funcionando. Teria algum outro para que eu possa substituir? Obrigada! Bjs!

    ResponderExcluir
    Respostas
    1. Alguns scripts que hospedei no dropbox precisam ter os links atualizados devido às mudanças do site e do blogger. Em breve atualizo ok :)

      Excluir
    2. Ok, vou aguardar! Obrigada! Bjs!

      Excluir
    3. Deu certo agora! Obrigada! Bjs!

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up