Como Adicionar Imagens de Fundo Aleatórias nas Postagens do Blogger

Como Adicionar Imagens de Fundo Aleatórias nas Postagens do Blogger
Imagem: Reprodução

Ter um blog atraente e personalizado é fundamental para atrair e manter os leitores interessados. Uma maneira criativa de tornar seu blog único é adicionar imagens de fundo aleatórias que mudam cada vez que alguém visita sua página. Neste tutorial, mostrarei como adicionar facilmente imagens de fundo aleatórias no Blogger para dar um toque especial ao seu blog.

Passo 1: Faça backup do seu modelo

Antes de fazer qualquer alteração em seu blog, é fundamental fazer um backup do seu modelo atual para garantir que você possa restaurá-lo caso algo dê errado. Para fazer isso, vá para o painel do Blogger e clique em “Modelo”. Em seguida, clique no botão “Fazer backup/Restaurar” no canto superior direito e selecione “Fazer backup do modelo completo”.

Passo 2: Faça o upload das imagens de fundo

O primeiro passo é preparar as imagens de fundo que você deseja usar em seu blog. Recomendo criar uma pasta no Blogger chamada “backgrounds” (ou qualquer outro nome que você preferir) e fazer o upload das imagens nessa pasta. Certifique-se de que as imagens tenham tamanhos e resoluções adequados para melhorar a aparência do seu blog.

Passo 3: Adicione o código CSS

Para aplicar uma imagem de fundo atraente e aleatória ao seu blog, você precisará adicionar um código CSS personalizado. Acesse a sua postagem do Blogger e alterne para “Viusalização em HTML” e cole o seguinte código CSS:

<style>
body {
background: url('URL_DA_IMAGEM') no-repeat center center fixed;
background-size: cover;
}
</style>

Certifique-se de substituir ‘URL_DA_IMAGEM’ pela URL completa da primeira imagem de fundo que você deseja usar. O CSS acima define a imagem de fundo para ocupar todo o corpo do blog, se ajustando automaticamente ao tamanho da tela do usuário.

Passo 4: Adicione o código JavaScript

Para tornar a imagem de fundo aleatória, é necessário usar JavaScript para selecionar aleatoriamente uma imagem da lista que você fez o upload. Logo abaixo do código CSS que você acabou de adicionar, cole o seguinte código JavaScript:


 

Lembre-se de substituir ‘URL_DA_IMAGEM_1’, ‘URL_DA_IMAGEM_2’, etc., pelas URLs completas das imagens de fundo que você fez o upload anteriormente. Esse código JavaScript seleciona uma imagem aleatória da lista e a aplica como a imagem de fundo do seu blog sempre que a página for carregada.

Passo 5: Salve as alterações

Após adicionar o código CSS e JavaScript, clique em “Salvar” para salvar as alterações feitas no modelo do Blogger.

Faça o Download abaixo

Conclusão

Parabéns! Agora você instalou com sucesso imagens de fundo aleatórias em seu blog do Blogger. Sempre que alguém visitar sua página, uma nova imagem de fundo será exibida, tornando sua experiência de blog única e atraente. Lembre-se de que você pode adicionar mais URLs de imagens à lista para aumentar a variedade de imagens de fundo exibidas. Divirta-se personalizando seu blog e tornando-o um lugar único para seus leitores.

5/5 - (11 votes)