[TUTORIAL] Shopping Retrátil

» Sex maio 24, 2013 12:28 pm Por **Hiarley Moura** · » Sex maio 24, 2013 12:28 pm Por **Hiarley Moura**

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Shopping Retrátil - Lateral

Com base neste tutorial, podemos adicionar um anúncio do shopping em retrátil na lateral de vossos fórum.

--> Tutoriais, dicas e astúcias <--
Shopping Retrátil - Lateral

1º - Conhecendo e modificando o código:

Código:: <br><body background="http://i.imgur.com/aYFXz.png"> <no><a href="LINK "> <img src="IMAGEM"> </a> <a href="LINK"> <img src="IMAGEM"> </a> <a href="LINK"> <img src="IMAGEM"> </a> <a href="LINK"> <img src="IMAGEM"> </a> </body>

LINK -> O link que irá redimensionar ao clicar na imagem do anúncio.
IMAGEM -> A Imagem que para visualizar o link desejado, Exemplo: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] .

2º - Criar uma página HTML para sustentar o código:
Teremos que criar uma página HTML para que possamos adicionar o código que aprendemos acima. Para isso é necessário aceder à:

Painel de controle ->> Módulos ->> HTML ->> Gestão das páginas HTML

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

1º Título - Pode colocar o título que quiser para a página, não irá afetar em nada.
2º 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.
3º 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.
4º 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.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

3º - Conhecendo o código que será aplicado nos Widget:

Código:: <div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:1000;"><iframe src="ENDERECO_DA_PAGINA_HTML" id="chatboxpop" scrolling="yes" style="height: 180px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:590px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="http://i.imgur.com/z7MxB.png" id="chatboxopen" style="display: inline; "><img src="http://i.imgur.com/z7MxB.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>

ENDERECO_DA_PAGINA_HTML -> Será adicionado o Endereço da página HTML que aprendemos no primeiro passo.
Por exemplo, no Fdf: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

4º - Aplicação do código no Widget:
Painel de controle (Avançado) >> Módulos >> Portal & Widgets >> Gestão dos widgets (fórum/portal) >> Novo widget personalizado
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

1º Nome do widget: - Será o nome dado ao widget para localização e controle deste pelo Painel de Controle.

2º Utilizar um table type: - Nesta opção, deverá ser marcado o "Não".

3ºTítulo do widget: - Nesta opção, não será necessário preenchimento, resultado da marcação do "Não" anteriormente.

4º Fonte do widget: - Neste campo, Devemos inserir o código trabalhamos no 3º Passo.

5º Salvar: - Para que o widget apareça corretamente, este box deve ser acionado, após as devidas modificações.

Feito isso, basta que o widget seja arrastado para uma coluna no módulo correspondente para que o atalho do shopping seja aplicado.

Resultado:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Shopping Retrátil - Lateral

Hiarley Moura

1 [TUTORIAL] Shopping Retrátil - Lateral