Oiêe.... vc deve ter reparado que no big cabeçalho do blog, que não é um cabeçalho mas sim um background, há a atualização de imagem cada vez que as páginas recarregam, certo? (Se não, atualize aí para ver, vai estar mais ou menos assim:
Isso porque, como toda boa libriana, amei todas as imagens chibis que coloquei nesses backgrounds/wallpapers e não sabia qual deles escolher; na indecisão, usei todos! Para fazer essa transição de imagens, vou compartilhar o código, que é bem simples...
1. Primeiro, escolha as imagens que irá usar, sendo mais de 1 para funcionar. Não tem limite, podem ser 2, 3, 4... recomendo até 4 para não pesar na velocidade de carregamento do seu site. Depois disso, identifique a tag no html onde irá colocar essas imagens que irão atualizar. Eu escolhi o cabeçalho ou background. Geralmente essas tags vem com nome de ".header {" ou, no caso do plano de fundo, dentro de "body {"
2. Agora vamos ao HTML do blogger; clique em Tema - na seta ao lado de Personalizar - Editar HTML.
Clique nas teclas ctrl+f em seu teclado para abrir a barra de busca de códigos no html do template. No meu caso, pesquisei por .header
.header {
position: relative;
z-index: 300; /* Talvez seja necessário remover esse trecho, dependendo de como quer que fique */
margin: 51px auto 0px;
padding: 40px 0;
text-align: center;
max-width: 1366px;
width: 100%;
height: 700px;/* mude de acordo com a largura da sua imagem */
background: no-repeat top center;
background-size: cover;
transition: background-image 0.5s ease-in-out; /* suaviza a transição de imagens */
}
Note que em z-index: 300; coloquei uma observação; isso porque no meu template a imagem sobrepôs um widget, O problema foi relacionado ao z-index, fique atento também ao position ou ao tamanho da .header, que pode estar cobrindo elementos que vêm depois (como widgets, menus etc). Pode ser resolvido assim:
No CSS temos:
.header {
position: relative;
z-index: 300;
...
}
Esse z-index: 300 faz com que a .header fique acima de quase tudo. Isso só é necessário se a header tiver algo que precise sobrepor outro conteúdo, como menus flutuantes.
🛠 Solução:
Troque o z-index: 300 por z-index: 1 ou simplesmente remova ele, a não ser que você precise MESMO sobrepor algo:
.header {
position: relative;
/* z-index: 300; */ /* Removeu*/
...
}
Caso não dê certo, certifique-se de que a .header não está com position: absolute ou fixed. O position: relative é ok. Mas evite absolute ou fixed sem necessidade, porque isso tira o elemento do fluxo da página e pode causar sobreposição com os widgets. Se o widget estiver DENTRO da .header e estiver sendo coberto pela imagem de fundo, você pode corrigir isso com um background overlay com opacidade ou com background-position, padding, ou até reorganizando o HTML.
Exemplo: Garantindo que o conteúdo apareça por cima da imagem
.header {
position: relative;
background: no-repeat center center;
background-size: cover;
}
.header * {
position: relative;
z-index: 2;
}
E se quiser um efeito suave, pode usar uma sobreposição (fundo semi-transparente por cima da imagem) com um ::before:
.header::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255, 255, 255, 0.5); /* ou um rosa claro */
z-index: 1;
}
.header * {
position: relative;
z-index: 2;
}
Mas esses códigos de correção acima só serão necessários se houver itens sobrepostos.
4. Antes de </body> vamos colar o código:
<script>document.addEventListener("DOMContentLoaded", function () {const images = ["https://link-da-imagem-1.png","https://link-da-imagem-2.png","https://link-da-imagem-3.png"];const randomIndex = Math.floor(Math.random() * images.length);const selectedImage = images[randomIndex];const header = document.querySelector(".header");if (header) {header.style.backgroundImage = `url(${selectedImage})`;}});</script>
Depois, clique em atualizar a visualização para ver se a imagem muda.
Dica Extra: Mudar Imagem Automaticamente (sem atualizar a página)
Se você quer que a imagem de fundo da .header mude automaticamente após alguns segundos (como um slideshow), a gente pode combinar as duas funções: mostrar uma imagem aleatória ao carregar a página; e trocar automaticamente a cada X segundos (por exemplo, a cada 5 segundos para testar). Para isso:
1. Adicione isso antes da tag </body> no seu Blogger:
<script>document.addEventListener("DOMContentLoaded", function () {const images = ["https://link-da-imagem-1.png","https://link-da-imagem-2.png","https://link-da-imagem-3.png"];const header = document.querySelector(".header");let currentIndex = Math.floor(Math.random() * images.length);function changeBackground() {if (header) {header.style.backgroundImage = `url(${images[currentIndex]})`;currentIndex = (currentIndex + 1) % images.length;}}// Mostra uma imagem inicialchangeBackground();// Troca a cada 5 segundos (5000 milissegundos)setInterval(changeBackground, 5000);});</script>
Em que vc pode substituir o número 5000 por quantos segundos quiser que ocorra a transição, como 15 segundos, 15000, 30 segundos 30000, 1 minuto, 60000....
Com esses truques simples, você consegue deixar seu blog mais animado e surpreender os visitantes com imagens que mudam a cada visita! Use com criatividade para banners, cabeçalhos, logos ou onde quiser. 🍓✨
0 Comments
Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.
Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.
Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.
Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart