|
CONSIDERAÇÕES INICIAIS |
Nesse tutorial, confira como adicionar um menu horizontal abaixo do cabeçalho
do blog. Dessa forma, é possível utilizar esse menu para disponibilizar alguns links
para as principais páginas publicadas no blog, além de uma caixa de pesquisa
para facilitar a busca por assuntos específicos.
Esse tutorial é indicado para os blogs que utilizam o tema Awesome Inc.
ou Espetacular Ltda na plataforma do Blogger. Para baixar um modelo no tema Awesome,
clique aqui.
Antes de realizar qualquer um dos procedimentos a seguir, primeiramente
faça um backup do seu blog. Se ocorrer algum problema durante o procedimento, o
blog poderá ser restaurado com o arquivo do backup realizado. Se tiver alguma
dúvida sobre o backup, clique aqui.
|
COMO ADICIONAR UM MENU ABAIXO DO CABEÇALHO? |
Confira como adicionar
um menu horizontal com uma caixa de pesquisa abaixo do cabeçalho do seu blog em
17 passos:
1º Passo: acesse a página inicial do Blogger.
2º Passo: selecione o nome do seu blog.
3º Passo: clique em Tema.
4º Passo: clique na seta ao lado do botão Personalizar
e escolha a opção Editar HTML.
5º Passo: clique em qualquer local dentro do HTML do blog.
6º Passo: no teclado, pressione as teclas CRTL
e F para abrir a caixa de pesquisa
do HTML.
7º Passo: pesquise pelo trecho: </header>
8º Passo: clique antes desse
trecho e pressione a tecla Enter para
inserir uma linha em branco acima dele.
9º Passo: copie o código abaixo e cole acima do trecho pesquisado.
O HTML do seu blog
era assim:
|
</script> </body> |
Depois que colar o
código, vai ficar assim:
|
</script> <div class='Menu-Cabecalho'><div
style='width: auto; text-align: center;'><div face='Arial, sans-serif'
style='font-size: 13pt; text-align: center; text-shadow: 0px 0px 5px #ffffff;
display: inline-block; width: auto;'><a class='LinkMenu-Cabecalho'
href='#'>Início</a>
| <a class='LinkMenu-Cabecalho' href='#'>Sobre</a> | <a
class='LinkMenu-Cabecalho' href='#'>Contato</a> |
<div style='font-size: 13pt; text-align: center; text-shadow:
0px 0px 5px #ffffff; display: inline-block; width: auto;'> <form action='/search' class='menu-search-box'
method='get'> <input autocomplete='off'
class='menubox-input' expr:value='data:view.isSearch ? data:view.search.query.escaped
: ""' name='q' size='10' title='Pesquisar'
type='text'/><input class='menubox-search-button'
expr:value='data:messages.search' title='Pesquisar' type='submit'/> </form> </div></div></div></div> </body> |
10º Passo: substitua os
trechos Início, Sobre e Contato pelos
nomes que serão exibidos em cada link.
Observação: esse menu possui um total de quatro links separados por barra.
11º Passo: substitua cada trecho # pelo
URL de cada link.
12º Passo: clique novamente na caixa de pesquisa do HTML.
13º Passo: pesquise pelo trecho: /* Content
14º Passo: clique antes desse
trecho e pressione a tecla Enter
para inserir uma linha em branco acima dele.
15º Passo: copie o código CSS abaixo e cole acima do trecho pesquisado.
Observação: o código CSS é responsável pela personalização do menu.
16º Passo: clique em visualizar para
conferir o resultado.
17º Passo: se o resultado for satisfatório, clique em Salvar para finalizar.
Para alterar as cores
do plano de fundo do menu, no código CSS deve alterar os códigos #b6bbc3 (cinza) e #ededed (prata) pelo código hexadecimal da cor desejada, como por
exemplo, #fff (branco), #000 (preto), #00a2ff (azul), #00ff7e (verde), #ff0000 (vermelho),
#ff7e00 (laranja), #fe60e6 (rosa), #ffde00 (amarelo), entre outras. Para obter
mais códigos hexadecimais de cores para o menu do seu blog, clique aqui.
Para adicionar uma
imagem no plano de fundo do menu, no código CSS substitua o trecho background: linear-gradient(to top,
#b6bbc3, #ededed); pelo trecho background:#ededed
url(URL_DA_IMAGEM) top center repeat; Em seguida, substitua o trecho URL_DA_IMAGEM pelo URL da imagem que
será exibida no plano de fundo do menu.
Dica: caso tenha dúvidas sobre como obter o URL de uma imagem salva no seu
computador, clique aqui e acesse o tutorial como alterar o plano de fundo das
postagens e dos widgets do blog. Os 15 primeiros passos desse tutorial mostram
detalhadamente como enviar uma imagem para o Blogger e obter a URL dessa imagem.
Para remover a
caixa de pesquisa, no código do menu deve ser removido o seguinte trecho: <form action='/search'
class='menu-search-box' method='get'> <input autocomplete='off'
class='menubox-input' expr:value='data:view.isSearch ?
data:view.search.query.escaped : ""' name='q' size='10'
title='Pesquisar' type='text'/><input class='menubox-search-button'
expr:value='data:messages.search' title='Pesquisar'
type='submit'/></form>
Para adicionar um
novo link, no código do menu, após o trecho <a class='LinkMenu-Cabecalho' href='#'>Contato</a> |,
deve ser adicionado o seguinte trecho: <a
class='LinkMenu-Cabecalho' href='URL_DO_LINK'>TEXTO_DO_LINK</a> |
|
MODELOS DE MENU PERSONALIZADO |
Para personalizar a barra de menu com cores e estilos diferentes do
modelo mostrado na imagem inicial desse tutorial, ao realizar o décimo quinto
passo, copie um dos códigos CSS abaixo.
|
CONSIDERAÇÕES FINAIS |
Portanto, esse tutorial visou compartilhar um pouco de nossos
conhecimentos acerca do uso de uma barra de menu horizontal de atalhos abaixo
do cabeçalho do blog.
|
Por: Santos.
Elaborado em: 08/03/2026. Publicado em: 08/03/2026. Atualizado em: 08/03/2026. Obrigado pela
sua atenção, qualquer dúvida, falha ou sugestão, deixe seu comentário ou
entre em contato conosco. |
Nenhum comentário:
Postar um comentário