InformáticaCSI: Menu fixo com caixa de pesquisa no Blogger

Aprenda como configurar um menu fixo, tipo drop-down, responsivo e com caixa do pesquisa na plataforma Blogger.
Você que está tentando colocar no seu blog um menu destacado e adaptável a qualquer tela, deve ter tentado várias soluções sem sucesso, como eu já tentei.

O que vou compartilhar aqui é a solução que funcionou. Encontrei no blog da Elaine Gaspareto, de onde transcrevo os códigos e fiz uma pequena modificação para fazer com que o menu fique fixo quando rolar a página.

Esta dica funciona para você que usa o modelo/template Simples do blogger. Já o Soho, Contempo, Notável, Empório e Visualizações Dinâmicas não funciona, como a Elaine informa no final da publicação dela.

Código de variáveis

O primeiro código é o de variáveis, responsável pela cor de fundo do menu, cor da fonte e outros ajustes.

Vá na opção Tema do Painel do Blogger e clique no botão Editar HTML.

Você pode antes salvar o tema atual, clicando no botão Fazer backup/Restaurar que fica no topo à direita:

Clique na área onde estão os códigos, pressione Ctrl e F no seu teclado para abrir o campo de busca. Digite variable definitions e pressione Enter:

Selecione (Ctrl + A) e Copie (Ctrl + C) o código na caixa de texto abaixo:

Cole (Ctrl + V) abaixo da linha /* Variable Definitions ===, como na seleção da imagem abaixo:

Lembre-se de clicar depois em Salvar tema.

Escolha a cor de fundo do menu

E aqui já aproveito para dar outra dica: você pode mudar a cor de fundo do menu na linha onde está menu.background.color e o value="#222222", que é a cor preta (eu alterei no meu blog para #1a53ff, que é a cor azul, por exemplo).

Veja neste link uma paleta de cores para escolher e o código de cada uma delas.

Código de estilos CSS

Agora é hora de copiar outro código, que arruma a aparência do menu, disposição, tamanho, incluindo a caixa de pesquisa com o ícone da lupa.

/* MENU RESPONSIVO COM CAIXA DE PESQUISA- by elainegaspareto.com e complementado por crissantosinfo.com.br
----------------------------------------------- */
.conteudo-menu { background: $(menu.background.color); font: $(menu.font); }
.menu-fixo { z-index: 9999; position: fixed; top: 0; width: 100%; height: 50px;}
#menu {
    background: $(menu.background.color); /* COR DE FUNDO DO MENU */
    color: $(menu.font); /* COR DA FONTE DO MENU */
    height: 50px; /* ALTURA DO MENU */
    width: 100%;
    position: relative;
    z-index: 999;
}

#menu-left {
    float: left;
    width: 100%;
    max-width: 700px;/* ÁREA ÚTIL DO MENU, AUMENTE OU REDUZA PARA CENTRALIZAR */
}

#menu-right {
    float: right;
    width: 100%;
    max-width: 300px;
    text-align: right;
}

#menu ul, #menu li {
font: $(menu.font); /* TIPO FONTE DO MENU */
    text-transform: uppercase;  /* Todas as fontes maiúsculas, se não quiser, apague esta linha */
    margin: 0 auto;
    padding: 0 0;
    list-style: none;
}

#menu ul {
    width: 100%;
}

#menu li {
    float: left;
    display: inline;
    position: relative;
    font-weight: 700;
}

#menu a {
    display: block;
    line-height: 50px;
    padding: 0 14px; /* DISTÂNCIA ENTRE AS CASAS */
    text-decoration: none;
    color: $(menu.text.color); /* COR DA FONTE DO MENU */
}

#menu li a:hover {
    color: $(menu.selected.text.color);  /* COR DO TEXTO AO PASSAR O CURSOR */
    background: $(menu.selected.background.color);  /* COR DE FUNDO DO MENU HOVER */
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

#menu-left input {
    display: none;
    margin: 0 0;
    padding: 0 0;
    width: 80px;
    height: 50px;
    opacity: 0;
    cursor: pointer;
}

#menu label {
    background: url("http://i.imgur.com/Cx8HQMd.png") center no-repeat;
    -moz-background-size: auto 50%;
    -webkit-background-size: auto 50%;
    background-size: auto 50%;
    display: none;
    width: 50px;
    height: 50px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

#menu ul.menus {
    padding-top: 5px;
    height: auto;
    overflow: hidden;
    width: 200px;
    background: rgba(255,255,255,0.95);
    position: absolute;
    z-index: 99;
    display: none;
    box-shadow: 0 0 1px rgba(0,0,0,0.2);
}
#menu ul.menus li {
    display: block;
    width: 100%;
    text-transform: none;
    text-shadow: none;
}
#menu ul.menus a {
    color: $(submenu.text.color);
    line-height: 35px;
}
#menu li:hover ul.menus {display: block;}
#menu ul.menus a:hover {
    background: $(submenu.selected.background.color);  /* COR DE FUNDO DAS SUB ABAS HOVER */
    color: $(submenu.selected.text.color);  /* COR DO TEXTO DAS SUB ABAS HOVER */
    padding-left: 20px;
}
#search {
    margin-top: 0px;
    color: $(menu.text.color) !important;
}
#search input[type="text"] {
    background: url("http://i.imgur.com/WsHNC7P.png") no-repeat 20px 15px;
    border: none;
    color: #fff !important;
    font-size: 13px;
    width: 0px;
    height: 38px;
    padding: 6px 5px 6px 50px;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    cursor: pointer;
}

#search input[type="text"]:focus {
    color: #fff !important;
    width: 245px;
    background: url("http://i.imgur.com/WsHNC7P.png") no-repeat  20px 15px rgba(0,0,0,0.2);
    outline: none;
    cursor: text;
}
centro {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
}
/* MEDIA QUERIES DO MENU (DEFINE A RESPONSIVIDADE)
----------------------------------------------- */
@media screen and (max-width: 1024px){
.menunope { display: none;}
#menu { position: relative;
}
#menu ul {
    background: rgba(0,0,0,0.9);
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 3;
    height: 1000px;
    display: none
}
#menu ul.menus {
    width: 100%;
    position: static;
    padding-left: 20px;
}
#menu li {
    display: block;
    float: none;
    width: auto;
     background: #666; /* COR DE FUNDO DO MENU RESPONSIVO */
}
#menu-left input, #menu label {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}
#menu-left input { z-index:4;}
#menu-left input:checked + label {
    background: url("http://i.imgur.com/yNRYwBD.png") no-repeat center;
    -moz-background-size: auto 50%;
    -webkit-background-size: auto 50%;
    background-size: auto 50%;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
#menu-left input:checked ~ ul { display:block;}
#menu ul.menus {
    width: 100%;
    background: $(menu.background.color); /* COR DE FUNDO DO MENU RESPONSIVO */
    z-index: 99;
    display: none;
    box-shadow: 0 0 1px rgba(0,0,0,0.2);
    margin-top: -5px;
    margin-left: -20px;
    padding-top: 0;
    border:none;
}
#menu ul.menus li {
    display: block;
    width: 100%;
    font-weight: 100;
    text-shadow: none;
    background: rgba(0,0,0,0.5);
}
#menu ul.menus a {
    color: #ccc; /* COR DA FONTE DO MENU RESPONSIVO */
    line-height: 35px;
}
#menu li:hover ul.menus { display: block;}
#menu ul.menus a:hover {
    background: $(submenu.selected.background.color);  /* COR DE FUNDO DO SUBMENU */
    color: $(submenu.selected.text.color);  /* COR DO TEXTO DO SUBMENU HOVER */
    padding-left: 20px;
}
}

Da mesma forma que você fez com o código de variáveis, pressione Ctrl + F, digite agora ]]></b:skin> no campo de busca e Enter. Desta vez, cole o código acima da linha onde está ]]></b:skin>.

Código Javascript

Este é o código do "efeito especial" do menu fixo. Novamente, copie na caixa de texto abaixo e cole acima de </head> (digitando no campo de pesquisa - Ctrl + F e Enter).

O último código: HTML

Para terminar, o código famoso das páginas de internet.

Este deve ser copiado abaixo de <body> ou

<body expr:class='"loading" + data:blog.mobileClass'>,

para ficar no topo do seu blog,

Se você quiser que o menu apareça abaixo do cabeçalho, cole abaixo de </head>.

<div class='conteudo-menu'>
<nav id='menu'>
<centro>
<div id='menu-left'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='/'>Início</a></li>
<li><a href='LINK AQUI'>Aba simples</a></li>
<li><a>Aba com submenu</a>
  <ul class='menus'>
<li><a href='LINK AQUI'>Sub aba 1</a></li>
<li><a href='LINK AQUI'>Sub aba 2</a></li>
<li><a href='LINK AQUI'>Sub aba 3</a></li>
<li><a href='LINK AQUI'>Sub aba 4</a></li>
</ul>
</li>
<li><a href='LINK AQUI'>Aba simples</a></li>
<li><a>Aba com submenu</a>
  <ul class='menus'>
<li><a href='LINK AQUI'>Sub aba 1</a></li>
<li><a href='LINK AQUI'>Sub aba 2</a></li>
<li><a href='LINK AQUI'>Sub aba 3</a></li>
<li><a href='LINK AQUI'>Sub aba 4</a></li>
<li><a href='LINK AQUI'>Sub aba 5</a></li>
</ul>
</li>
<li><a href='LINK AQUI'>Aba simples</a></li>
</ul>
</div>
<div id='menu-right'>
<form action='/search' id='search' method='get'>
<input autocomplete='off' name='q' placeholder='Digite sua busca e tecle Enter' type='text'/>
</form>
</div>
</centro>
  </nav></div>

Aqui que vem o detalhe para que o menu fique fixo quando você rolar a página: na primeira linha deste código HTML, onde está conteudo-menu, altere para menu-fixo (apenas o nome, mantendo as haspas - div class= 'menu-fixo').

Compare com o código que vimos antes, o CSS. As duas primeiras linhas ali começam assim:

.conteudo-menu...
.menu-fixo..

Deixando conteudo-menu neste último código que estamos vendo, quem abrir o seu blog só verá o menu quando rolar até o topo da página, ou voltar depois de ler o conteúdo.

Você escolhe o que você achar melhor.

Nomes e links do menu

Esta é a parte mais "enjoada" do negócio: personalizar com os nomes e links do seu blog.

Você deve pegar os links das suas páginas e de assuntos ou categorias, como por exemplo página de Contato, Sobre, Privacidade; categorias como Dicas, Notícias, Jogos, etc.

Neste último código, você deve substituir onde está Início, Aba simples, Aba com sub-menu e Sub aba 1, 2, 3, etc., com o nome da página ou categoria de menu que você quer colocar.

Link das páginas

Pegar os links das páginas é mais simples:

Clique na opção Páginas no Painel do blogger;
Clique com o botão direito do mouse em Visualizar, de cada página que você criou;
Copie o link em Copiar endereço do link;
Cole onde está LINK AQUI, na mesma linha onde está o nome da página ou categoria correspondente;

Por exemplo:

Onde está
<li><a href='LINK AQUI'>Aba simples</a></li>
Substitua por
<li><a href='https://www.seublog.com.br/p/jogos.html'>Jogos</a></li>

Links de categorias

Os links por assunto ou categoria são os marcadores que você colocou nas suas publicações. O padrão de link é:

https://www.seublog.com.br/search/label/NomeMarcador

Este NomeMarcador é o nome do marcador que você colocou na sua publicação. Para nomes sem caracteres especiais como ç ou acentuação, você pode pegar este link padrão, mudando só depois de ...label/ com o nome que da categoria do seu blog.

Este link você pega abrindo uma publicação e, ao final, clicando com o botão direito nas opções da linha Marcadores que você criou e Copiar endereço do link.

Para ficar mais fácil de entender, veja o menu aqui acima, deste blog. A sequência INICIAR, SOBRE O BLOG, TUTORIAIS, DICAS e PRIVACIDADE são nomes que digitei no lugar de Início, Aba simples e Aba com submenu.

Exemplo de Aba com submenu você vê quando passa o mouse, ou toca na tela do seu celular em DICAS, desce o sub-menu - o drop-down - listando Celular, Configuração e Kindle. Estes nomes são as Sub aba 1, 2, 3.

Código original:

<li><a>Aba com submenu</a>
<ul class='menus'>
<li><a href='LINK AQUI'>Sub aba 1</a></li>
<li><a href='LINK AQUI'>Sub aba 2</a></li>
<li><a href='LINK AQUI'>Sub aba 3</a></li>

<li><a href='LINK AQUI'>Sub aba 4</a></li>
</ul>
</li>

Substituído:

<li><a>Dicas</a>
<ul class='menus'>
<li><a href='https://www.crissantosinfo.com.br/search/label/Telefonia'>Celular</a></li>
<li><a href='https://www.crissantosinfo.com.br/search/label/Configura%C3%A7%C3%A3o'>Configuração</a></li>
<li><a href='https://www.crissantosinfo.com.br/search/label/Kindle'>Kindle</a></li>
</ul>

</li>

Se você quiser colocar ou tirar uma sub aba, basta copiar e colar abaixo de uma linha <li><a href='LINK AQUI'>Sub aba 1</a></li> ou apagar, deixando por exemplo até a 3:

<li><a>Aba com submenu</a>
<ul class='menus'>
<li><a href='LINK AQUI'>Sub aba 1</a></li>
<li><a href='LINK AQUI'>Sub aba 2</a></li>
<li><a href='LINK AQUI'>Sub aba 3</a></li>
</ul>
</li>

Salve as alterações e visualize o resultado.

1 de jul. de 2019

Menu fixo com caixa de pesquisa no Blogger