Passo a Passo Completo e Atualizado – Adicionar Gadget HTML/JavaScript no Blogger
Pré-requisitos importantes antes de começar
Certifique-se de estar logado na conta Google que administra o blog.
Tenha o código HTML + JavaScript já preparado e testado (de preferência em um editor como CodePen, JSFiddle ou Bloco de Notas).
Saiba onde você quer posicionar o gadget: barra lateral, rodapé, abaixo do cabeçalho, entre postagens, etc.
Faça backup do layout (opcional, mas recomendado): Layout → clique na seta para baixo no canto superior direito → "Fazer backup / restaurar" → "Baixar tema".
Passo 1 – Acesse o painel do Blogger
Entre em https://www.blogger.com
No topo à esquerda, clique na seta ao lado do nome do blog atual (se você administra mais de um blog)
Selecione o blog desejado
Passo 2 – Vá para a seção Layout (Design)
No menu lateral esquerdo, clique em Layout (em inglês aparece como "Layout" – continua sendo o mesmo nome em 2026)
Passo 3 – Escolha a área onde o gadget será exibido
Na tela de Layout você verá várias seções retangulares (exemplos comuns):
Header / Cabeçalho
Cross-Column (abaixo do cabeçalho, acima das postagens)
Main (área principal de postagens – cuidado aqui)
Sidebar direita / esquerda
Footer / Rodapé (pode ter várias colunas)
Clique no link azul + Adicionar um gadget (ou "+ Add a Gadget") na seção desejada
Uma janela pop-up com duas abas aparece: Básico e Mais gadgets
Passo 4 – Selecione o gadget HTML/JavaScript
Na aba Básico (geralmente já abre nessa aba), role a lista até encontrar HTML/JavaScript
(às vezes aparece como "HTML/JavaScript" ou "Gadget HTML/JavaScript")
Clique nessa opção
Passo 5 – Configure o gadget
Uma nova janela menor será aberta com dois campos principais:
Título (opcional)
Coloque um título descritivo se quiser que apareça acima do gadget (ex: "Últimos Tweets", "Newsletter", "Contador de Visitas").
Deixe em branco se for um widget sem título visível (muito comum em códigos modernos).
Conteúdo (o campo mais importante)
Cole todo o código que você deseja adicionar (HTML + CSS + JavaScript).
Dicas importantes de segurança e compatibilidade:
Muitos códigos modernos usam <script async src="..."> ou <script defer> → mantenha assim.
Se o código tiver <style> → cole normalmente.
Evite códigos que usem document.write() (muitos são bloqueados ou quebram o layout mobile).
Se o código for muito longo, verifique se não ultrapassa ~65.000 caracteres (limite aproximado do Blogger).
Passo 6 – Salve o gadget
Clique no botão laranja Salvar (ou "Save") no canto inferior da janela do gadget.
A janela pop-up fecha e o novo gadget aparece na seção escolhida (geralmente com o nome "HTML/JavaScript" ou o título que você colocou).
Passo 7 – Ajuste a posição (arraste e solte)
Clique e segure o gadget recém-criado
Arraste para cima, para baixo ou para outra seção compatível
Solte na posição desejada
Repita quantas vezes precisar reorganizar
Passo 8 – Salve o layout inteiro
Após posicionar tudo corretamente, clique no botão laranja grande Salvar arranjo (ou "Save arrangement")
localizado no canto superior direito ou inferior da tela de Layout
Passo 9 – Teste e visualize
Clique em Visualizar (olho no topo) → veja como fica no desktop
Abra em uma aba anônima no celular ou use o modo desenvolvedor (F12 → toggle device toolbar) para testar responsividade
Verifique o console (F12 → Console) atrás de erros JavaScript comuns:
"Refused to execute inline script" (CSP do Blogger bloqueando)
"Blocked by Content Security Policy"
Erros 404 em recursos externos
Pronto! Agora o guia está mais limpo, arejado e fácil de ler em telas de qualquer tamanho.
CÓDIGO:
<div class="social-links">
<a href="https://www.facebook.com/seuperfil" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://www.instagram.com/seuperfil" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.tiktok.com/@seuperfil" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
<i class="fab fa-tiktok"></i>
</a>
<a href="https://www.youtube.com/channel/seucanal" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
<i class="fab fa-youtube"></i>
</a>
<a href="https://t.me/seucanal" target="_blank" rel="noopener noreferrer" aria-label="Telegram">
<i class="fab fa-telegram-plane"></i>
</a>
</div>
<style>
/* Tudo-em-um: Ícones sociais coloridos oficiais - Blogger 2026 */
.social-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px 0;
margin: 25px auto;
max-width: 100%;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
font-size: 24px;
color: #ffffff; /* ícone sempre branco para contraste máximo */
text-decoration: none;
border-radius: 50%;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 4px 15px rgba(0,0,0,0.12);
position: relative;
overflow: hidden;
}
/* Cores oficiais das marcas (atualizadas e fiéis aos logos em 2026) */
.social-links a[href*="facebook"] { background: #1877F2; } /* Azul clássico Facebook/Meta */
.social-links a[href*="youtube"] { background: #FF0000; } /* Vermelho puro YouTube */
.social-links a[href*="t.me"] { background: #229ED9; } /* Azul oficial Telegram */
.social-links a[href*="tiktok"] { background: #000000; } /* Preto dominante do logo TikTok (fiel ao ícone atual) */
/* Instagram com gradiente oficial (o mais reconhecível do logo) */
.social-links a[href*="instagram"] {
background: linear-gradient(135deg, #FEDA75 0%, #FA7E1E 15%, #D62976 30%, #962FBF 50%, #4F5BD5 70%, #405DE6 100%);
}
/* Efeito hover: elevação + brilho + sombra maior (sensação premium) */
.social-links a:hover,
.social-links a:focus {
transform: translateY(-6px) scale(1.12);
box-shadow: 0 12px 35px rgba(0,0,0,0.22);
filter: brightness(1.12) saturate(1.15);
}
/* Acessibilidade: foco visível com cor da própria marca */
.social-links a:focus {
outline: 4px solid currentColor;
outline-offset: 4px;
}
/* Ajustes para telas pequenas (mobile-first) */
@media (max-width: 480px) {
.social-links {
gap: 16px;
padding: 15px 0;
}
.social-links a {
width: 46px;
height: 46px;
font-size: 22px;
}
}
/* Opcional: se quiser TikTok com vermelho/rosa vibrante (muito usado em ícones alternativos) */
/* Descomente abaixo e comente o background #000000 do TikTok se preferir */
/*
.social-links a[href*="tiktok"] {
background: #EE1D52; /* Rosa/vermelho energético do TikTok */
}
*/
</style>
Dicas avançadas e soluções de problemas comuns (2025–2026)
- Gadget não aparece? → Verifique se salvou o arranjo → Veja se o código está dentro de <b:section> permitida (alguns temas limitam áreas) → Teste com um código simples: <div style="background:yellow; padding:20px;">TESTE</div>
- Quebra no mobile? → Adicione media queries no próprio gadget → Ou use <style>@media screen and (max-width:680px){ ... }</style>
- JavaScript não executa? → Muitos códigos precisam ser carregados com async ou defer → Alguns exigem que você adicione o script no <head> (via Tema → Editar HTML)
- Quer o gadget em todas as páginas (inclusive páginas estáticas)? → Coloque em Header, Footer ou Cross-Column
- Quer o gadget só em postagens?
→ Use Conditional Tags no próprio código HTML/JavaScript
Exemplo:HTML
<b:if cond='data:view.isSingleItem'> <!-- código só aparece em postagens --> </b:if> - Backup sempre Antes de colar códigos grandes ou de fontes desconhecidas → faça backup do tema.
Seguindo esses passos com atenção, o processo fica muito mais seguro, previsível e profissional. Boa sorte com a customização do seu blog! 🚀