[TUTORIAL] Chat Box retrátil externo

Ir para baixo

[TUTORIAL] Chat Box retrátil externo Empty [TUTORIAL] Chat Box retrátil externo

Mensagem por Ace 19.03.13 1:26


[TUTORIAL] Chat Box retrátil externo Chatbox

Chat Box retrátil externo

Muitas vezes, desejamos poder fazer algo dinâmico, simples, elegante e prático. Neste tutorial, aplicaremos esses conceitos ao Chat Box externo, ou seja, que não é o padrão da Forumeiros, 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 externo



- Conhecendo e modificando o código:

<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:1000;"><iframe src="/chatbox" id="chatboxpop" scrolling="yes" style="height: 350px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:700px" 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="https://i.servimg.com/u/f34/16/04/51/75/open10.png" id="chatboxopen" style="display: inline; "><img src="https://i.servimg.com/u/f34/16/04/51/75/close10.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>

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.
Marrom: > ID da página HTML que conterá o chatbox.

Criando e aplicando o chatbox:

[TUTORIAL] Chat Box retrátil externo Act_bottom Para prosseguir com a aplicação da chatbox externa, você deverá criar uma seguindo:Chatbox externa em seguida aplica-la numa nova página html.


- 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] Chat Box retrátil externo Untitl13
[TUTORIAL] Chat Box retrátil externo 110111Seta Título - Pode colocar o título que quiser para a página, não irá afetar em nada.
[TUTORIAL] Chat Box retrátil externo 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] Chat Box retrátil externo 110310Seta Usar esta página como página inicial? - Esta também deverá estar marcada como não.
[TUTORIAL] Chat Box retrátil externo 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] Chat Box retrátil externo 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). Com a URL copiada deverá analisar  a parte após a barra, por exemplo, /h1- e substituir o /chatbox do código, por esse trecho da URL da página HTML

(carregue na imagem para aumentar)
[TUTORIAL] Chat Box retrátil externo Untitl15

- 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 externo Criar10
[TUTORIAL] Chat Box retrátil externo Wf310

[TUTORIAL] Chat Box retrátil externo 110111SetaNome do widget: - Será o nome dado ao widget para localização e controle deste pelo Painel de Controle.
[TUTORIAL] Chat Box retrátil externo 110210Seta Utilizar um table type: - Nesta opção, deverá ser marcado o "Não".
[TUTORIAL] Chat Box retrátil externo 110310Seta 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 externo 110410Seta Fonte do widget: - Neste campo, deve ser inserido o código mostrado no passo 1.
[TUTORIAL] Chat Box retrátil externo 110510Seta 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 externo Resultadoa



©️ Fórum dos Fóruns


[TUTORIAL] Chat Box retrátil externo Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Chat Box retrátil externo
Ace
Ace
Membro Entusiasta

Membro desde : 06/07/2011
Mensagens : 8881
Pontos : 11608

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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