Tutos Lokos tutoriais grátis: Criando um sistema de Banner rotativo.

Como funciona?
É uma pagina em html que ira atualizar em tempos determinado, (10 segundos por exemplo), um código em java script fará que seja exibido um conteúdo diferente cada vez que a pagina for atualizada. Esta pagina será aberta dentro de uma janela (iframe) no site principal.
Primeiro iremos criar uma pagina html e iremos salvar como rotator.html. Cole o código em um editor html ou no bloco de notas.

<html> <head> <title>banner rotativo</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="refresh" content="5"> </head> <body> <span id="preserve5804796e89d047919e3d67281cf995b8" class="wlWriterPreserve"><script language="JavaScript"> function TrocaBanner() { var x = 1; x = Math.floor(Math.random()*5); if(x == 1) { document.write('<font color="#0000FF"><strong><font size="5">CODIGO DO BANNER 1 AQUI</font></strong></font>'); return(0); } else { if(x == 2) { document.write('<font size="5"><strong><font color="#FF0000">CODIGO DO BANNER 2 AQUI</font></strong></font>'); return(0); } else { if(x == 3) { document.write('<font color="#003300" size="5"><strong>CODIGO DO BANNER 3 AQUI</strong></font>'); return(0); } else { if(x == 4) { document.write('<font color="#CC6600" size="5"><strong>CODIGO DO BANNER 4 AQUI</strong></font>'); return(0); } else { document.write('<font color="#330033" size="5"><strong>CODIGO DO BANNER 5 AQUI</strong></font>'); return(0); }}}}} </script></span> <span id="preserve67f087da400d48df92f4311a8387573a" class="wlWriterPreserve"><script>TrocaBanner()</script></span> </body> </html>

Vamos explicar as tags:
<meta http-equiv="refresh" content="30">
Este código ira dar um “refresh” na pagina, ou seja vai fazer a pagina atualizar
x = Math.floor(Math.random()*5);
Esta linha ira definir quantos banner você ira usar, é só trocar o “5” pelo numero desejado. Lembrando que o numero de colchetes também devera ser alterado, como eu estou usando 5 banner script ira terminar com: }}}}}
if(x == 1)
{
document.write(' ');
return(0);
}
O código do seu banner devera ficar entre as aspas simples, você pode inserir o conteúdo que desejar, pode ser banner, imagem ou texto simples. Lembre de colocar em ordem if(x=1), fica o 1 para o primeiro, 2 para o segundo etc. Note também após o primeiro banner aparece a tag “else” Veja também que no ultimo banner não tem o if(x == 1)

Agora vamos criar o iframe:
Copie o código e cole em um editor de html ou no bloco de notas.

<IFRAME SRC="rotator.html" MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 SPACE=0 FRAMEBORDER=0 SCROLLING=NO WIDTH=468 HEIGHT=60></iframe>

Veja que o iframe esta “chamando” a pagina “rotator.html”, esta é a pagina que ira conter os códigos dos banners, no meu caso o iframe ira abrir uma janela 468 x 60, você poderá alterar este valor conforme sua necessidade.
Veja um exemplo pronto, a pagina index com o iframe chamando a pagina “rotator.html”. Copie o código, cole no bloco de notas ou em um editor html, salve como “index.html”. A pagina rotator.html deve estar na mesma pasta que a index.html.

<html> <head> <title>index</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="80%" border="1" align="center"> <tr> <td><div align="center"><font size="7">Site principal.</font></div></td> </tr> <tr> <td><IFRAME SRC="rotator.html" MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 SPACE=0 FRAMEBORDER=0 SCROLLING=NO WIDTH=468 HEIGHT=60></iframe></td> </tr> <tr> <td height="291"> <p align="center">coloque o codigo do iframe onde você quizer que o banner apareça. O iframe vai chamar a pagina rotator.html, ou seja, a pagina rotator.html vai abrir dendro do iframe, o meu iframe esta comfigurado para abrir uma janela de 468 X 60 este valor pode ser alterado conformme sua necessidade.</p> <p align="center"><font size="5">Veja que os seus banner vai abrir em um iframe, </font></p> <p align="center"><font size="5">você pode usar para banner, recados, ultimas noticias etc.</font></p> <p align="center"><font size="5">Espero que tenham gostado</font></p> <p align="center"><a href="http://www.tutosloko.blogspot.com/"><font size="5">comentem no blog click aqui para acessar o blog</font></a></p></td> </tr> </table> </body> </html>

Veja este sistema funfando no site:
http://www.assaigospel.com/

Tutos Lokos tutoriais grátis

menu

Curso de html e dreamweaver Mx

Parceria

sexta-feira, 9 de abril de 2010

Criando um sistema de Banner rotativo.

0 comentários: