Como Adicionar uma Tela de Carregamento (Preloader) no Seu Blog — Rápido e Personalizável

Sabe aquele toque profissional que dá quando um site abre com uma tela de carregamento elegante? Então, é disso que a gente vai falar hoje. Um preloader é aquele efeito que aparece antes do conteúdo ser exibido — ótimo pra melhorar a experiência do visitante e deixar o blog mais bonito e organizado.

O melhor de tudo: dá pra fazer isso com um código simples que você cola no Blogger, e ainda pode personalizar com a sua logo ou qualquer GIF do Google.

✨ Exemplo de Preloader Padrão

Esse é o modelo padrão com o estilo do Blogueiros United. Depois do código, eu te explico onde editar pra deixar com a sua cara 👇

 <!-- PRELOADER BLOGUEIROS UNITED --> 
<style> 
/* Fundo do preloader */ 
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0b0b0b; display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.4s ease, visibility 0.4s; } 

/* Logo ou GIF */ 
#preloader img { width: 120px; height: 120px; animation: girar 2s linear infinite; filter: drop-shadow(0 0 10px #ff0077); } 

/* Animação simples */ 
@keyframes girar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 
</style> 


<!-- Estrutura HTML do preloader --> 
<div id="preloader"> <img src="https://media.tenor.com/tga0EoNOH-8AAAAM/loading-load.gif" alt="Carregando..." /> </div> 

<script> window.addEventListener("load", function(){ const preloader = document.getElementById("preloader"); preloader.style.opacity = "0"; preloader.style.visibility = "hidden"; }); </script>

🧩 Como Personalizar

Logo ou GIF: troque o link da imagem no código (src="...") por qualquer GIF que quiser — pode ser da sua logo, ou um spinner que você achar no Google.
Cor de fundo: mude a cor #0b0b0b para a cor do seu blog (exemplo: branco #fff ou azul #0047ff).
Tamanho: altere width e height da imagem (exemplo: 200px para logos maiores).
Efeito: se não quiser que a imagem gire, apague a linha animation: girar... no CSS.

🚀 Onde colocar o código

Vá em Tema → Editar HTML no painel do Blogger. Cole todo o código logo acima da tag </body>.

Se quiser aplicar em páginas específicas (por exemplo, só na inicial), use um <b:if cond='data:blog.pageType == "index"'> envolvendo o código.

💡 Dica extra

Quer deixar o carregamento ainda mais leve? Use uma imagem pequena e comprimida, e evite GIFs pesados. Você pode até usar o BUnit.in pra hospedar uma imagem ou redirecionar um link pro preloader de forma inteligente — tipo abrir uma página especial antes do conteúdo principal.

🎨 Visual alternativo (modo claro)

Se quiser um preloader em modo claro, basta trocar o fundo por #fff e a cor do efeito por #007bff. Dessa forma, combina com blogs mais limpos e minimalistas.

✅ Resultado final

O visitante entra, vê a logo girando ou o GIF carregando, e logo em seguida o blog aparece suave. É aquele toque profissional que mostra cuidado com a experiência do usuário — e que o Google valoriza!

🚀 Conclusão

Esse tipo de detalhe faz diferença. O preloader não é só enfeite — é experiência de marca. Então escolha uma logo leve, adicione o código e veja seu blog ganhando outro nível de profissionalismo.