Fórum iBlue
[TUTORIAL] Chat Box Retrátil - Lateral Buddy_Group

Bem Vindos ao iBlue GAMES!

Registre-se para obter acesso especial em todo conteúdo presente no Fórum!
Tenha um bom uso do nosso fórum, e seja ativo!





Fórum iBlue
[TUTORIAL] Chat Box Retrátil - Lateral Buddy_Group

Bem Vindos ao iBlue GAMES!

Registre-se para obter acesso especial em todo conteúdo presente no Fórum!
Tenha um bom uso do nosso fórum, e seja ativo!





Somos ÚNICOS, somos o SEU fórum


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

T-Lord

1[TUTORIAL] Chat Box Retrátil - Lateral Empty [TUTORIAL] Chat Box Retrátil - Lateral Qua 16 Jan 2013 - 13:41

T-Lord
Administrador
[TUTORIAL] Chat Box Retrátil - Lateral Chatbox
Chat Box Retrátil - Lateral

Muitas
vezes, desejamos poder fazer algo dinâmico, simples, elegante e
prático. Neste tutorial, aplicaremos esses conceitos ao Chat Box que
ficará em uma lateral do fórum, trazendo assim, maior comodidade no ato
da navegação.


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


1° - Conhecendo e modificando o código:


style="overflow: visible; position: fixed; bottom: 30px; height: 350px;
right: 0px; z-index:1000;">
onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left">[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]" id="chatboxopen" style="display: inline; ">[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]" id="chatboxclose" style="cursor: pointer; display: none; ">

Vermelho
> O campo define se a imagem de abertura fica fixa na lateral do
fórum ou se ela acompanha o chatbox em seu distender. Em 'right', a
imagem acompanhará o chat e, em 'left', a imagem fica fixa na tela e o
chat box se estende a sua esquerda.
Laranja > O campo define o tamanho em qual a largura do chat irá distender.
Azul
> O valor deste campo define em quanto tempo o chat se abrirá por
total. A cada 1000 = 1 segundo. Se o valor for 0, não há deslize e ele
abre imediatamente.
Em Negrito: > Imagem que, quando acionada, irá fechar o chatbox.
Em Itálico > Imagem que, quando acionada, irá fechar o chatbox.

2° - Aplicação do código:

Para utilizarmos o chat box retrátil, utilizaremos um widget personalizado. Para isso, aceda à:

Painel
de controle (Avançado) >> Módulos >> Portal & Widgets
>> Gestão dos widgets (fórum/portal) >> Novo widget
personalizado

[TUTORIAL] Chat Box Retrátil - Lateral Criar10


Expandir esta imagem Ver em tamanho real
[TUTORIAL] Chat Box Retrátil - Lateral Wf310

[TUTORIAL] Chat Box Retrátil - Lateral 110111[TUTORIAL] Chat Box Retrátil - Lateral 398853 Nome do widget: - Será o nome dado ao widget para localização e controle deste pelo Painel de Controle.
[TUTORIAL] Chat Box Retrátil - Lateral 110210[TUTORIAL] Chat Box Retrátil - Lateral 398853 Utilizar um table type: - Nesta opção, deverá ser marcado o "Não".
[TUTORIAL] Chat Box Retrátil - Lateral 110310[TUTORIAL] Chat Box Retrátil - Lateral 398853 Título do widget: - Nesta opção, não será necessário preenchimento, resultado da marcação do "Não" anteriormente.
[TUTORIAL] Chat Box Retrátil - Lateral 110410[TUTORIAL] Chat Box Retrátil - Lateral 398853 Fonte do widget: - Neste campo, deve ser inserido o código mostrado no passo 1.
[TUTORIAL] Chat Box Retrátil - Lateral 110510[TUTORIAL] Chat Box Retrátil - Lateral 398853 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 chat seja aplicado.


  • Resultado:



[TUTORIAL] Chat Box Retrátil - Lateral Resultadoa

http://www.zonetoony.net/

Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos