[TUTORIAL] 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.




1° - 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.

2° Criando e aplicando o chatbox:

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

Título - Pode colocar o título que quiser para a página, não irá afetar em nada.

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.

Usar esta página como página inicial? - Esta também deverá estar marcada como não.

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.


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


3° - 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

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

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

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

Fonte do widget: - Neste campo, deve ser inserido o código mostrado no passo 1.

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:
  

---

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