Background aleatório (rotativo) para Blogger

23 de janeiro de 2014

Nenhum comentário:
Esta dica se aplica principalmente a blogs com temas descontraídos, com conteúdos diversos: a criação de um background (plano de fundo) que é alternado a cada vez que o leitor atualiza a página, e de forma aleatória. O código é constituído por JavaScript, e é de simples instalação.

Hospedando as imagens

Eu fiz uma seleção de algumas imagens padrões para aparecer caso queira aplicar o código automaticamente, sem ter que hospedar novas imagens. No entanto, se desejar outras imagens como fundo, será necessário que faça uso de um serviço de hospedagem específico, e depois, copie o url da imagem, e troque pelo que é encontrado no código.

Para este caso, eu sugiro o Picasa, por ser um serviço de confiança, e que não te deixará na mão com remoção de imagens, etc. No Picasa, bastará usar sua conta do google, onde possui seu blog, sem necessidade de registro.

Instalando o código JavaScript

Após escolher se deseja hospedar novas imagens ou usar as que o código já possui, será necessário instalarmos ele em seu blog. A instalação é feita através de um gadget HTML/JavaScript.

No painel de controle, clique em "Layout", e depois em "Adicionar um gadget". Selecione o gadget "HTML/JavaScript", conforme indica a imagem abaixo:


Insira este código como conteúdo do gadget, e salve:

<script type="text/javascript">
var banner= new Array()
banner[0]="https://lh4.googleusercontent.com/-vJ31L9yKVs0/UnZVXL1CMKI/AAAAAAAADqY/k_ueC4KEO3w/w1450-h1050-no/1.jpg"
banner[1]="https://lh6.googleusercontent.com/-FdtA6Dq0xOo/UnZVYKuS9-I/AAAAAAAADqg/nPPPvb1RHo0/w1450-h1050-no/1.jpg"
banner[2]="https://lh3.googleusercontent.com/-9HOtSL8HQgc/UnZV_ZeGH_I/AAAAAAAADrQ/2M5ekTYlC20/w1450-h1050-no/1.jpg"
banner[3]="https://lh4.googleusercontent.com/-qHynmogLllE/UnZVfItUplI/AAAAAAAADqo/ZB36-T2ikkM/w1450-h1050-no/1.jpg"
banner[4]="https://lh3.googleusercontent.com/-XslQQEdno_E/UnZVjHxrZgI/AAAAAAAADqw/xN3SevW3Ghs/w1450-h1050-no/1.jpg"
banner[5]="https://lh5.googleusercontent.com/-jnynptb5ftg/UnZV0uu52dI/AAAAAAAADrA/-c0gpTmQYMw/w1450-h1050-no/1.jpg"
banner[6]="https://lh4.googleusercontent.com/-by4d0SvWznI/UnZVzj3cRAI/AAAAAAAADq8/pbG_ZvgoP-A/w1450-h1050-no/1.jpg"
banner[7]="https://lh4.googleusercontent.com/-NNiDjkUlp_8/UnZV8FLkrTI/AAAAAAAADrI/yF31QHXpkzk/w1450-h1050-no/1.jpg"
banner[8]="https://lh5.googleusercontent.com/-4QPNmG90Y6A/UnZWBgerxHI/AAAAAAAADrY/zEYzWIg43jk/w1450-h1050-no/1.jpg"
banner[9]="https://lh6.googleusercontent.com/-ZLnlCzNgAKA/UnZVXNzIgCI/AAAAAAAADqU/gGIIhgfcdW0/w1450-h1050-no/1.jpg"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") repeat center center fixed;');
document.write(" }");
document.write("</style>");
</script>
 Os links em vermelho correspondem ao url da imagem que deve ser alterado, caso queria por outras imagens como fundo aleatório. A resolução ideal da imagem para isso é de 1600x1200 pixels.

Sobre a compatibilidade com o Blogger

Embora ser um código aparentemente simples, ele possui algumas incompatibilidades com o CSS de alguns modelos padrões do Blogger. Estes são os modelos da categoria Simples, e Visualizações dinâmicas. Portanto, caso esteja usando um destes modelos e o recurso não funcionar corretamente (geralmente exibindo uma enorme faixa branca sobre a imagem de fundo), saiba que este é o motivo. Com os demais modelos, o código funciona perfeitamente, e obter até ótimos resultados em sua exibição, como pode observar nesta imagem.

E lembrando, não testei este código em templates personalizados, portanto é possível que nem em todos funcione, ou apresente um resultado 100% satisfatório. Dependerá do CSS do template, não apresentar conflito de alguma forma com o novo background que é gerado pelo JavaScript.

Nenhum comentário:

Postar um comentário