|
CONSIDERAÇÕES INICIAIS |
Nesse tutorial, confira como adicionar um menu horizontal no topo da
tela do seu blog, disponibilizando alguns links para as principais páginas
publicadas, além de uma mensagem de boas-vindas e indicação de data e hora em
tempo real.
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 NO TOPO DO
BLOG? |
Confira como adicionar
um menu horizontal com uma caixa de pesquisa abaixo do cabeçalho do seu blog em
23 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: <body
Observação: a tag <body> pode
aparecer limpa ou com algumas definições internas, como no exemplo abaixo.
Exemplos:
<body>
<body expr:class='"loading" + data:blog.mobileClass'>
8º Passo: clique depois desse
trecho e pressione a tecla Enter para
inserir uma linha em branco abaixo dele.
9º Passo: clique aqui para copiar o código do menu e cole acima do trecho
pesquisado.
O HTML do seu blog
era assim:
|
</head> <body
expr:class='"loading" + data:blog.mobileClass'> <b:section
class='navbar' id='navbar' maxwidgets='1' name='Navbar'
showaddelement='no'> |
Depois que colar o
código, vai ficar assim:
|
</head> <body
expr:class='"loading" + data:blog.mobileClass'> <div class='Menu-Topo'><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-Topo' href='#'>Início</a>
| <a class='LinkMenu-Topo' href='#'>Sobre</a> | <a class='LinkMenu-Topo' href='#'>Contato</a>
| <div face='Arial, sans-serif' style='font-size: 13pt; text-align:
center; text-shadow: 0px 0px 5px #ffffff; display: inline-block; width: auto;
position:relative; top:5px; padding-right:10px; padding-left:10px;'>
<marquee> Olá, seja bem-vindo!
</marquee> </div> | <div id='relogio' style='font-size: 13pt;
text-align: center; text-shadow: 0px 0px 5px #ffffff; display: inline-block;
width: auto;'/> </div> </div> </div> <b:section
class='navbar' id='navbar' maxwidgets='1' name='Navbar'
showaddelement='no'> |
10º Passo: se for necessário, 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: retorne novamente
ao trecho <body
13º Passo: na tag <body>, antes do último sinal >, insira o trecho: onload='iniciarRelogio()'
Exemplos:
<body>
<body onload='iniciarRelogio()'>
<body
expr:class='"loading" + data:blog.mobileClass'>
<body
expr:class='"loading" + data:blog.mobileClass' onload='iniciarRelogio()'>
14º Passo: clique novamente na caixa de pesquisa do HTML.
15º Passo: pesquise pelo trecho: /* Content
16º Passo: clique antes desse
trecho e pressione a tecla Enter
para inserir uma linha em branco acima dele.
17º Passo: clique aqui para copiar o código CSS do menu e depois cole acima do
trecho pesquisado.
Observação: o código CSS é responsável pela personalização do menu.
18º Passo: clique novamente na caixa de pesquisa do HTML.
19º Passo: pesquise pelo trecho: </body>
20º Passo: clique depois desse
trecho e pressione a tecla Enter
para inserir uma linha em branco abaixo dele.
21º Passo: clique aqui para copiar o código Script do menu e depois cole abaixo do
trecho pesquisado.
O HTML do seu blog
era assim:
|
</script> </body> <macro:includable
id='sections' var='col'> |
Depois que colar o
código Script, vai ficar assim:
|
</script> </body> <script> function iniciarRelogio() { const
opcoes = { day: 'numeric', month: 'long',
year: 'numeric'}; const
agora = new Date(); const
hora = agora.toLocaleTimeString('pt-BR'); // Formata a hora const
data = agora.toLocaleDateString('pt-BR', opcoes); // Formata
a data
document.getElementById('relogio').innerHTML = data +
' - ' + hora; //
Atualiza a cada 1 segundo (1000 milissegundos)
setTimeout(iniciarRelogio, 1000); } </script> <macro:includable
id='sections' var='col'> |
22º Passo: clique em visualizar para
conferir o resultado.
23º 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 #ffffff (branco), #b2d1cf (verde prateado claro) e #88aeac (verde prateado escuro) pelo código hexadecimal da cor
desejada, como por exemplo, #000 (preto), #0090ff (azul), #00ffa8 (verde),
#ff0000 (vermelho), #ff8a00 (laranja), #fe60e6 (rosa), #ffe400 (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,
#ffffff, #b2d1cf, #88aeac); pelo trecho background:#b2d1cf 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 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> |
|
MENU NO TOPO DO BLOG COM CAMPO DE PESQUISA |
Para adicionar um menu no topo do blog com um campo de pesquisa ao
realizar o procedimento anterior, deve substituir o código do nono passo pelo
código abaixo.
|
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 sétimo
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 no topo
da tela do blog.
|
Por: Santos.
Elaborado em: 11/03/2026. Publicado em: 11/03/2026. Atualizado em: 11/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