13/12/2016

Cabeçalho que muda ao recarregar a página


Hey! Hey! Bunnie's, como estão? Hoje venho ensinar como aplicar um cabeçalho (banner) que muda ao recarregar a página. Eu utilizei isso em meu layout anterior, apesar de ter aplicado na imagem de Perfil na sidebar não em um banner, mas em base é a mesma coisa, o que muda é somente as proporções e a onde o coloca no layout.

1. Vá até o HTML do seu blog e procure por <b:widget id='Header1' locked='true' title='SEU BLOG (Cabeçalho)' type='Header'/>, troque a parte marcada em negrito pela palavra false, uma forma rápida de achar esse trecho é pesquisar pelo nome do seu próprio blog dentro do HTML. Salve. Agora vá em Layout e se houver um gadget com o nome 'Cabeçalho', abra e exclua o mesmo.  A área ficara vazia e disponível para o novo gadget ,  abra um novo  Gadget Java/Script  e dentro cole:

Códigos
<div class='apliqueefeito'>
<div style="position: relative; margin-top: -15px; margin-left: -5px; margin-right: -100px; margin-bottom: -15px;"/>
<script language="JavaScript"> var quotes=new Array()
quotes[0]='<a href="LINK-DO-BLOG"><img alt="NOME" src="CABEÇALHO1"/></a>'
quotes[1]='<a href="LINK-DO-BLOG"><img alt="NOME" src="CABEÇALHO2"/></a>'
var whichquote=Math.floor(Math.random()*(quotes.length)) document.write(quotes[whichquote])
</script> </div> </div>

O novo gadget deve ficar exatamente onde estava o cabeçalho, ou abaixo como na  área esta demarcada na imagem abaixo, mova o gadget e observe a onde lhe agrada mais. A parte marcada em vermelho é uma tag, com ela você pode criar algum efeito hover, ao passar o mouse, porém você deve criar um estilo e aplica-lo dentro do HTML, para quem não entendeu essa parte pergunte nos comentários que explicarei melhor.  

Imagem do blog Chuva de HTML, para ver melhor clique na imagem.

2. Para adicionar mais imagens, basta repetir após </a>' a parte que diz o seguinte, trocando o que está em negrito pelo número:

quotes[3]='<a href="LINK-DO-BLOG"><img alt="NOME" src="CABEÇALHO"/></a>'

Ao aplicar mais uma imagem você vai precisa trocar a numeração dele, como marco em verde. Ouseja se você colocar quatro banner, a cada banner você precisa por a numeração na ordem crescente [0] [1] [2] [3] [4].

Nenhum comentário:

Postar um comentário

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345