[TUTORIAL] Logo rotativo

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

  • 0

[TUTORIAL] Logo rotativo Empty [TUTORIAL] Logo rotativo

Mensagem por Solkis em 19.12.09 1:15

[TUTORIAL] Logo rotativo Magic Logo rotativo
Com este tutorial iremos aprender como se pode colocar vários logos no fórum mas que estes se alterem em um intervalo de tempo e em ordem aleatória. Este código é interessante para fóruns que tratam de vários assuntos, assim se pode colocar um logo de cada tema e estes alternam-se.



--> Tutoriais e astúcias <--
Logo rotativo




- Escolher o código adequado para cada versão:
Cada versão tem um código, então terá somente de escolher o da sua versão! A parte em vermelho terá de ser configurada, mas ela será explicada mais para o fim deste ponto!

[TUTORIAL] Logo rotativo Versio11 PhpBB 2
var banner = new Array();

banner[0]='ENDERECO_DA_IMAGEM';

document.getElementById('i_logo').src= banner[Math.floor(Math.random()*banner.length)];
setInterval("document.getElementById('i_logo').src= banner[Math.floor(Math.random()*banner.length)];",3000);

[TUTORIAL] Logo rotativo Versio12 PhpBB 3
var banner = new Array();

banner[0]='ENDERECO_DA_IMAGEM';

document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];
setInterval("document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];",3000);

[TUTORIAL] Logo rotativo Versio15 PunBB
var banner = new Array();

banner[0]='ENDERECO_DA_IMAGEM';

document.getElementById('pun-logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];
setInterval("document.getElementById('pun-logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];",3000);

[TUTORIAL] Logo rotativo Versio14 Invision
var banner = new Array();

banner[0]='ENDERECO_DA_IMAGEM';

document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];
setInterval("document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];",3000);
Agora que tens o código, vamos trabalar com a parte em vermelho! Ela pode se repetir quantas vezes quiser pois cada uma das linhas representa um logo, podem ter três, quatro, cinco... Mas cada uma tem de ter seus valores, vamos ver como ficam:
banner[0]='ENDERECO_DA_IMAGEM';
Verde -> Este valor é o número de identificação do logo, cada linha terá de ter um número diferente. Ele se inicia no zero, sendo assim, se tem três logos, o valor dele seria um número a menos, no caso dois:
banner[0]='ENDERECO_DA_IMAGEM_1';
banner[1]='ENDERECO_DA_IMAGEM_2';
banner[2]='ENDERECO_DA_IMAGEM_3';
Preto -> Representa o endereço da imagem do logo, poderá ser em qualquer formato de imagem.
Violeta -> Representa o número de milissegundos entre a troca de logos. 3000 equivalem à três segundos, basta alterar o valor 3 pelo que deseja, como 10000, 5000...



- Criar uma página HTML para sustentar o código:
Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML

(carregue na imagem para aumentar)
[TUTORIAL] Logo rotativo Untitl13
[TUTORIAL] Logo rotativo 110111Seta Título - Pode colocar o título que quiser para a página, não irá afetar em nada.
[TUTORIAL] Logo rotativo 110210Seta Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente.
[TUTORIAL] Logo rotativo 110310Seta Usar esta página como página inicial? - Esta também deverá estar marcada como não, apesar de que não influencia em nada o código.
[TUTORIAL] Logo rotativo 110410Seta Código HTML - Coloque aqui o código que trabalhamos no item anterior.
Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.

(carregue na imagem para aumentar)
[TUTORIAL] Logo rotativo Untitl14

Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não alterou a ordem de exibição).

(carregue na imagem para aumentar)
[TUTORIAL] Logo rotativo Untitl15



- Inserir o código para que funcione em todas as páginas do fórum:
Devemos colocá-lo em um campo que seja mostrado em todas as páginas, como somente há um campo que se encaixe neste requisito, a descrição do seu fórum será comprometida com este código. Pode manter ambos em funcionamento, para isso basta separar o código da descrição.

Para adicionar o código aceda à:
Painel de Controle -> Geral -> Fórum -> Configurações

Ele deverá ser adicionado ao campo "Descrição do site". Caso encontre códigos nesta área, deverá colá-lo primeiro, antes de tudo mais que possa existir neste campo.

(carregue na imagem para aumentar)
[TUTORIAL] Logo rotativo Img_310

O código será:
<script src="ENDERECO-DA-PAGINA-HTML"></script>
Por exemplo, no FdF:
<script src="https://ajuda.forumeiros.com/h1-logos"></script>




©
Fórum dos Fóruns & Toto456


[TUTORIAL] Logo rotativo Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Logo rotativo
Solkis

Solkis
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/01/2008
Mensagens : 9984
Pontos Ativos : 12077

Ver perfil do usuário https://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum