Plano de fundo aleatório para o Blogger

Tem blogueiro que vive trocando de template, não aguenta ver o blog com a mesma cara por muito tempo. Fazer a troca de template é um processo um pouco chato, toma tempo, alguns gadgets precisam ser salvos manualmente, etc. Ter um fundo aleatório no blog seria uma boa opção para quem quer ver o blog sempre de um jeito diferente.

O fundo aleatório funciona da seguinte forma: a cada atualização ou mudança de página o fundo é trocado automaticamente. Isso acontece após termos instalado um código indicando as imagens que devem aparecer no fundo e com o comando aleatório. Confira a seguir um passo-a-passo ensinando como instalar esse código.

Vá na aba Design > Editar HTML e encontre o seletor body. Adicione um fundo  para ser o fundo padrão, pode ser uma imagem ou uma cor. Exemplos:

Cor

Imagem

body {
background: #000000;
}
body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVBCkBQ5pzVOXQteAGinPDa8ek1FUedPNmV_g6T90yZ7XYEOEXWIld9p4QY8WveRtAc4qZAWyqcdrQiT_FrNrRGGe_Adl-exnRMp-PugkUJf69jiVs9X7OgO-zCplwBcQz8FaJLW3qaUA/s1600/glitter_background_02.gif);
}

 

Para a imagem ir se repetindo por todo o fundo do blog adicione o comando repeat. Para a imagem não se repetir, ou seja, aparecer uma vez só, adicione o comando no-repeat acompanhado da posição. Exemplos:

Se repetir

Não repetir

body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVBCkBQ5pzVOXQteAGinPDa8ek1FUedPNmV_g6T90yZ7XYEOEXWIld9p4QY8WveRtAc4qZAWyqcdrQiT_FrNrRGGe_Adl-exnRMp-PugkUJf69jiVs9X7OgO-zCplwBcQz8FaJLW3qaUA/s1600/glitter_background_02.gif) repeat;
}

body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVBCkBQ5pzVOXQteAGinPDa8ek1FUedPNmV_g6T90yZ7XYEOEXWIld9p4QY8WveRtAc4qZAWyqcdrQiT_FrNrRGGe_Adl-exnRMp-PugkUJf69jiVs9X7OgO-zCplwBcQz8FaJLW3qaUA/s1600/glitter_background_02.gif) no-repeat top center;
}

 

Você também pode querer que a imagem se repita apenas na horizontal, para isso use o comando repeat-x. Porém se desejar que a imagem se repita na vertical use repeat-y.

Salve o modelo e vá na aba Design > Elementos da página. Clique em Adicionar um gadget e escolha o elemento HTML/JavaScript. Não coloque nenhum título. Em Conteúdo cole o seguinte código:

<script type="text/javascript">
var banner= new Array()
banner[0]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[1]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[2]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[3]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[4]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[5]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[6]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[7]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[8]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[9]="AQUI O ENDEREÇO DE SUA IMAGEM"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") repeat center center;');
document.write(" }");
document.write("</style>");
</script>

 

Você pode inserir até 10 fundos diferentes para serem trocados de forma aleatória. Insira os endereços das imagens em seus devidos lugares. A parte destacada de vermelho é a posição que as imagens ficarão no fundo, elas irão se repetir centralizado tanto na vertical, quanto na horizontal.

Salve o gadget e visualize seu blog. Carregue a página várias vezes para ver o efeito.

Nenhum comentário:

Postar um comentário

Related Posts Plugin for WordPress, Blogger...