Header Rotativa

A header Rotativa é um hack bem interessante ,que quando um membro do seu site atualiza, ou entra em uma categoria a header é alterada para outra header.

Lembrando que a header tem que ter as mesma medidas, os mesmo lugares onde ficaram os widgets , só trocando o "design" da header.

Primeiro passo é adicionar o script que irá fazer a rotação da header do seu template , então procure pela linha:

</head>

Acima dela copie e cole o código alterando com os links das suas headers:

<script type="text/javascript"> 
var banner= new Array()
banner[0]="Imagem da Header"
banner[1]="Imagem da Header 1"
banner[2]="Imagem da Header 2"
banner[3]="Imagem da Header 3"
banner[4]="Imagem da Header 4"
banner[5]="Imagem da Header 5"
var random=Math.floor(6*Math.random());
document.write("<style>");
document.write("#header-wrapper {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

Agora vamos alterar onde está o link da header, procure pela linha:

#header-wrapper

Em background retire o link da header ( topo ) , deixando assim:

background: url("");

Salve e teste seu template.

lembrando que esse código foi escrito usando o local "#header-wrapper" onde fica o link da header dos templates da anime design, se for usar em outros templates ou sites que o link não fique nesse local , você terá que alterar no script o local para qual está o link da sua header.

Gostou? Comente e Vire Um Seguidor!!