18/05/2015

22.Maratona CSS: Background rotativo/aleatório no blogger.

||

Oi lindinhos, como estão? Hoje trago um tutorial que conheço faz tempo de como deixar o background do blog rotativo/aleatório. Eu já utilizei em um outro blog, qual ficou muito charmoso. Se souber manipular o código pode fazer ainda muitas estripulias com ele, rs. Esse sistema bem legal, porém tem que tomar cuidado ao utilizar em seu layout, pois se colocar muitas imagens ainda mais se forem wallpaper, prejudicará o carregamento do blog, o tornando pesado. 

01. Primeiramente hospede as imagens, eu aconselho no Tumblr ou no Picasa. Agora separe os links.

02. Tem duas formas de por o próximo código, pode ser em um gadget de HTML/Java script ou dentro do HTML abaixo de </head>, basta escolher:
<script type="text/javascript">
var banner= new Array()
banner[0]="Image01URL"
banner[1]="Image02URL"
banner[2]="Image03URL"
banner[3]="Image04URL"
banner[4]="Image05URL"
banner[5]="Image06URL"
banner[6]="Image07URL"
banner[7]="Image08URL"
banner[8]="Image09URL"
banner[9]="Image10URL"
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>

As partes em laranja é a onde deve colocar as imagens, em vermelho é o local que define o numero total de imagens. Se deseja colocar mais ou remover deve trocar esse número de acordo com a quantidade de background.


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. Ele é mais compatível com o modelo Simples, e Visualizações dinâmicas mas fiz o teste no Travel qual funcionou também. 

Nenhum comentário:

Postar um comentário