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:
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