💻 Tutorial: Como Usar o Gerador de Banner HTML
Esta ferramenta foi criada para simplificar a geração de banners de publicidade ou afiliados para o seu blog. Ela gera um código HTML completo e portátil que pode ser copiado e colado em qualquer gadget de HTML/JavaScript ou em posts do Blogger.
Passo 1: Defina o Link e o Tamanho
Antes de tudo, decida onde o banner irá direcionar e qual será o formato dele.
Link de Destino (URL): Insira a URL completa para onde o usuário será levado ao clicar no banner (ex:
https://seusite.com/oferta-especial).Tamanho do Banner:
- Tamanhos Padrão (Pixels fixos): Escolha um dos formatos mais populares, como 300x250 (Retângulo Médio) ou 728x90 (Leaderboard). Recomendado para anúncios fixos.
- Responsivo (100% x Auto): Escolha esta opção se você quiser que o banner se ajuste automaticamente à largura do local onde for colado, mantendo a proporção da imagem. Recomendado para banners em posts e áreas fluidas.
- Tamanho Personalizado: Se necessário, selecione esta opção e insira a Largura e Altura em pixels (px).
Passo 2: Escolha a Fonte da Imagem
Você tem duas opções para carregar a imagem do banner:
Opção 1: Upload do Computador (Base64)
- Melhor para: Imagens pequenas e portabilidade máxima.
- Clique em "Upload do Computador" e selecione sua imagem (JPG/PNG).
- Vantagem: A imagem é codificada diretamente no código HTML. Você não precisa hospedá-la em um servidor.
Nota: Se a imagem for muito grande, o código gerado será extremamente longo.
Opção 2: URL de Imagem Hospedada
- Melhor para: Imagens grandes ou quando a imagem já está no seu servidor (ex: Google Drive, Imgur, seu próprio blog).
- Cole o link direto da imagem neste campo (ex:
https://meusite.com/imagens/banner-novo.jpg). - Vantagem: O código HTML gerado é muito mais limpo e pequeno, pois apenas faz referência à imagem.
Nota: A imagem precisa estar sempre disponível na URL fornecida.
Passo 3: Gerar e Copiar o Código
Com o link e a imagem definidos, é hora de gerar o banner.
- Clique no botão Gerar Banner e Código.
- O Pré-Visualização do Banner será atualizado imediatamente para mostrar o resultado final nas dimensões escolhidas.
Copiando o Código
O código HTML final aparecerá na caixa "Código HTML Gerado".
- Para selecionar: Apenas mova o mouse sobre a caixa de texto. O código será selecionado automaticamente.
- Para copiar: Clique no botão Copiar Código logo abaixo da caixa.
Passo 4: Adicionar o Banner ao seu Blog
O código que você copiou já está pronto para uso.
No painel do Blogger (ou outro CMS):
- Para um gadget na lateral ou rodapé, adicione um novo gadget do tipo HTML/JavaScript.
- Para um post, mude o editor para o modo HTML (não o modo de Composição).Cole o código do banner copiado na área de conteúdo.
Salve o gadget ou a postagem.
Pronto! Seu novo banner estará online e funcionando com o link e as dimensões que você escolheu.
