Passo a Passo para Adicionar um Gadget HTML/JavaScript no Blogger
1. Vá para a Seção de Layout:
No painel do seu blog, procure pela opção "Layout" ou "Design".
Clique nela para acessar as configurações de aparência do seu blog.
2. Adicione um Novo Gadget:
Na seção de layout, você verá uma lista de gadgets disponíveis.
Procure pela opção "Adicionar um Gadget" ou algo similar.
Clique no botão "+" ou "Adicionar gadget".
3. Selecione o Gadget HTML/JavaScript:
Uma janela com diversas opções de gadgets se abrirá.
Role a lista até encontrar a opção "HTML/JavaScript" e clique nela.
4. Cole o Seu Código:
Uma caixa de texto será exibida.
Cole o código HTML e JavaScript que você deseja adicionar ao seu blog dentro dessa caixa.
Importante: Certifique-se de que o código esteja correto e completo para que o gadget funcione como esperado.
5. Salve as Alterações:
Após configurar o gadget, clique no botão "Salvar" ou "Aplicar" para salvar as alterações.
6. Posicione o Gadget:
Arraste e solte o gadget recém-adicionado para a posição desejada na sua página. Você pode colocá-lo na barra lateral, cabeçalho ou rodapé.
7. Visualize o Resultado:
Clique no botão "Visualizar blog" para ver como o gadget ficou no seu blog.
Se tudo estiver funcionando corretamente, você verá o gadget exibindo o conteúdo esperado.
Personalize o menu da seguinte forma:
Onde você encontrar #, insira o link completo para a página ou recurso que deseja indicar (ex: https://www.google.com).
Substitua "BLOCO_X" pelo nome específico do menu que você criou no Blogger (ex: "Sobre mim", "Contato"). Ao fazer isso, o texto se tornará um link que direciona para a seção correspondente do seu blog.
CÓDIGO:
<!-- Fabiano Martins King -->
<!doctype html>
<style>
.menu {
width: 100%;
max-width: 700px; /* Largura máxima ajustada */
margin: 20px auto; /* Centraliza o menu horizontalmente */
display: flex;
flex-wrap: wrap;
gap: 10px; /* Espaço entre os blocos */
justify-content: center;
box-sizing: border-box;
}
.menu a {
display: block;
width: calc(50% - 10px); /* Ajusta a largura dos blocos para 2 por linha */
height: 100px; /* Altura ajustada */
max-width: 335px; /* Largura máxima ajustada */
text-align: center;
padding: 10px; /* Adiciona padding para centralizar melhor o texto */
color: white;
text-decoration: none;
font-size: 24px; /* Tamanho da fonte ajustado */
transition: background-color 0.3s, transform 0.3s, color 0.3s;
border-radius: 5px;
line-height: 1.2; /* Ajusta a altura da linha para permitir múltiplas linhas */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
word-wrap: break-word; /* Quebra a linha quando o texto atinge a borda */
font-family: 'Alfa Slab One', sans-serif; /* Fonte padrão */
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* Adiciona contorno preto ao texto */
}
.menu a:hover {
background-color: black;
color: yellow; /* Cor das letras no hover */
transform: scale(1.05);
}
.block-1 { background-color: #4CAF50; }
.block-2 { background-color: #FF5722; }
.block-3 { background-color: #2196F3; }
.block-4 { background-color: #FFC107; }
.block-5 { background-color: #9C27B0; }
.block-6 { background-color: #3F51B5; }
.block-7 { background-color: #009688; }
.block-8 { background-color: #E91E63; }
.block-9 { background-color: #CDDC39; }
.block-10 { background-color: #FF9800; }
.block-11 { background-color: #8BC34A; }
.block-12 { background-color: #03A9F4; }
/* Media Query para ajustar o layout em telas menores */
@media (max-width: 650px) {
.menu a {
width: calc(100% / 2 - 10px); /* Ajusta a largura dos blocos em telas menores */
height: calc((100vw - 20px) / 2); /* Mantém a proporção em telas menores */
max-width: 100px; /* Largura máxima em telas menores */
max-height: 75px; /* Altura máxima em telas menores */
font-size: 14px; /* Reduz o tamanho da fonte em telas menores */
}
}
</style>
<div class="menu" id="special-menu">
<a href="#" class="block-1">BLOCO_01</a>
<a href="#" class="block-2">BLOCO_02</a>
<a href="#" class="block-3">BLOCO_03</a>
<a href="#" class="block-4">BLOCO_04</a>
<a href="#" class="block-5">BLOCO_05</a>
<a href="#" class="block-6">BLOCO_06</a>
<a href="#" class="block-7">BLOCO_07</a>
<a href="#" class="block-8">BLOCO_08</a>
<a href="#" class="block-9">BLOCO_09</a>
<a href="#" class="block-10">BLOCO_10</a>
<a href="#" class="block-11">BLOCO_11</a>
<a href="#" class="block-12">BLOCO_12</a>
</div></!doctype>