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/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.
Substitua URL_DA_IMAGEM pela URL da sua imagem e URL_DE_REDIRECIONAMENTO pelo link para onde a imagem deve redirecionar.
CÓDIGO MENU CARROSSEL GADGET:
<!-- Martins King Programas -->
<!doctype html>
<style>
.gadget-container {
width: 300px;
margin: 20px auto;
background-color: #fff;
padding: 10px;
text-align: center;
}
.gadget-container a {
display: block;
margin-bottom: 10px;
color: #000;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 16px;
}
.gadget-container a:hover {
color: #39FF14; /* Verde fluorescente */
}
.gadget-container img {
width: 100%;
height: auto;
border: 2px solid #39FF14; /* Moldura verde fluorescente */
transition: transform 0.3s, box-shadow 0.3s;
}
.gadget-container img:hover {
transform: scale(1.05); /* Leve aumento no tamanho da imagem */
box-shadow: 0 0 10px #39FF14; /* Efeito de brilho ao redor da imagem */
}
</style>
<div class="gadget-container">
<a href="URL_DE_REDIRECIONAMENTO" target="_blank">
<img src="URL_DA_IMAGEM" alt="Descrição da imagem" />
</a>
</div>
</html>