Cliques Rápidos
Ajuda e SuporteDúvidas com aparência
Problemas de conexão
Dúvidas sobre fóruns
Dúvidas sobre script
Personalização
Olho dos experiêntes
Galeria de Temas
Pedidos Gráficos
Geral - Miscelânea
Sugestões & Feedback
Espaço Publicidade
Discuções Gerais
Denúncias
Últimos assuntos
Procurar
Entrar
Parceiros
Palavras-chaves
Quem está conectado?
Há 2 usuários online :: 0 registrados, 0 invisíveis e 2 visitantes Nenhum
[ Ver toda a lista ]
O recorde de usuários online foi de 129 em Qua Abr 07, 2021 6:37 am
Criar e personalizar a sua pop-up
Página 1 de 1
Criar e personalizar a sua pop-up
O objetivo deste tutorial é mostrar duas formas distintas de trabalharmos com pop-ups de diferente meios.
A
poop-up consiste em uma página ou mensagem que se abre no corpo da
página do seu fórum. Ela é muito utilizada para publicidades e anúncios
importantes em vários locais. Sua principal finalidade é alertar pu
direcionar a outras páginas.
1º - Criar a página ao qual a pop-up irá direcionar;
Como
nosso primeiro passo deveremos criar uma página HTML personalizada em
nosso fórum com o conteúdo que desejamos que seja exibido na janela de
pop-up.
Utilize esta estrutura, basta que faça as suas modificações:
Para mais informações sobre as Páginas HTML personalizadas você poderá consultar nosso tutorial específico para esta função através do endereço:
Criar uma página inicial HTML personalizada
2º - Agora que ja criou a sua página HTML personalizada teremos de trabalhar o código da pop-up:
Neste ponto terá de fazer as configurações do código para a sua janela, bastará que utilize este modelo:
Agora,
terá de conferir em nossa FAQ o local onde deseja que sua pop-up seja
exibida, pois dependendo do local terá de utilizar um campo diferente.
3º - Resultado em uma janela:
1º - Teremos de adicionar um código CSS para que possamos personalizar a janela:
Para
que o banner flutuante funcione correctamente, você deverá adicionar um
código CSS na sua folha de estilos para que ela não apresente problemas:
Painel de Controle -> Visualização -> Imagens e Cores -> Cores
Selecciona o separador Folha de estilo CSS, e cole o seguinte código:
Após adcionado, não se esqueça de clicar em Validar para salvar as alterações no código CSS.
2º - Teremos agora de adicionar o código do banner flutuante:
O
local onde ele poderá ser adicionado pode variar muito então, para
escolher um local adequado ao que deseja fazer veja a nossa FAQ.
Agora, terá de modificar o código ao modo que desejar:
3º - Agora o resultado final:
Meu banner flutuante está se fechando, há como não acontecer isso?
Sim,
isso ocorre pois o script utilizado possui uma propriedade que define o
fechamento após passado determinado período de tempo.
Caso
deseje poderá fazer modificações ou até mesmo remover esta parte. Para
isso utilize este script ao invéz do mostrado no item dois:
Verde -> Esta linha representa o
tempo em que a janela se encontrará aberta. Poderá remover caso não a
queira ou então poderá modificar o valor que está em negrito que
representa o tempo que a janela será exibida em milésimos ou seja 3000
é a mesma coisa que 3 segundos.
Posso criar botões para abrir e fechar meu banner?!
Sim, para isso terá de adicionar o seguinte código onde quer que os botões se localizem:
Vermelho -> Representa o botão de fechar, poderá personaliza-lo como desejar!
_____________________________________________________________________________
A
poop-up consiste em uma página ou mensagem que se abre no corpo da
página do seu fórum. Ela é muito utilizada para publicidades e anúncios
importantes em vários locais. Sua principal finalidade é alertar pu
direcionar a outras páginas.
--> Tutorial <--
Criar e personalizar a sua pop-up
Criar e personalizar a sua pop-up
Pop-up através de "nova janela"
1º - Criar a página ao qual a pop-up irá direcionar;
Como
nosso primeiro passo deveremos criar uma página HTML personalizada em
nosso fórum com o conteúdo que desejamos que seja exibido na janela de
pop-up.
Utilize esta estrutura, basta que faça as suas modificações:
Conteúdo da página
Para mais informações sobre as Páginas HTML personalizadas você poderá consultar nosso tutorial específico para esta função através do endereço:
Criar uma página inicial HTML personalizada
2º - Agora que ja criou a sua página HTML personalizada teremos de trabalhar o código da pop-up:
Neste ponto terá de fazer as configurações do código para a sua janela, bastará que utilize este modelo:
window.open('endereço_da_página', 'Título da página', 'HEIGHT=225,resizable=no,WIDTH=400');
Endereço da página - Aqui você deverá colocar o endereço da página que criou pois será onde a opo-up irá buscar os elementos a exibir. Por isso quando criar a sua página deverá criar seus conteúdos com as mesmas medidas da janela. |
Título da página - Deverá colocar o título da pop-up, o mesmo que será exibido no topo da janela. |
Width - Deverá colocar o valor em pixels da largura da janela, o tamanho que está definido no código é o tamanho mais utilizado. |
Height - Deverá colocar o valor em pixels da altura da janela, o tamanho que está definido no código é o tamanho mais utilizado. |
Agora,
terá de conferir em nossa FAQ o local onde deseja que sua pop-up seja
exibida, pois dependendo do local terá de utilizar um campo diferente.
3º - Resultado em uma janela:
(carregue na imagem para aumentar)
1º - Teremos de adicionar um código CSS para que possamos personalizar a janela:
(clique na imagem para aumentar)
Para
que o banner flutuante funcione correctamente, você deverá adicionar um
código CSS na sua folha de estilos para que ela não apresente problemas:
Painel de Controle -> Visualização -> Imagens e Cores -> Cores
Selecciona o separador Folha de estilo CSS, e cole o seguinte código:
- Código:
/*banner flutuante*/
#popup {
position: absolute;
top: 30%;
left: 30%;
width: 300px;
height: 150px;
padding: 20px 20px 20px 20px;
border-width: 2px;
border-style: solid;
background: #ffffa0;
display: none;
}
Após adcionado, não se esqueça de clicar em Validar para salvar as alterações no código CSS.
2º - Teremos agora de adicionar o código do banner flutuante:
O
local onde ele poderá ser adicionado pode variar muito então, para
escolher um local adequado ao que deseja fazer veja a nossa FAQ.
Agora, terá de modificar o código ao modo que desejar:
function fechar(){
document.getElementById('popup').style.display = 'none';
}
function abrir(){
document.getElementById('popup').style.display = 'block';
setTimeout ("fechar()", 3000);
}
Conteúdo
3º - Agora o resultado final:
(carregue na imagem para aumentar)
--> FAQ do Tutorial <--
Criar e personalizar a sua pop-up
Criar e personalizar a sua pop-up
- Que tipos de conteúdos posso por em minha pop-up?!
Independente de qual das maneiras você optar poderá colocar nelas quaisquer tipos de conteúdos utilizando a linguagem HTML.
- Em que locais posso utilizar as pop-ups?
- Mensagem da Home Page:
Painel de Controle -> Visualização -> Home Page -> Geral -> "Mensagem da Home Page" - Widgets (em todos que são possíveis de criar ou modificar):
Painel de Controle -> Módulos -> Portal & Widgets -> Configuração do portal -> Estrutura
ou
Painel de Controle -> Módulos -> Portal & Widgets -> Gestão dos widgets do fórum - Newsletter's (modo HTML)
Painel de Controle -> Geral -> Newsletter -> Redação e envio - Mensagens Privadas (MP) e mensagens (com HTML ativado para as mensagens) Só terá efeito na determinada mensagem!
- Por que o meu banner flutuante está demorando a aparecer?!
Isso
somente irá ocorrer se sua página for muito carregada de conteúdos e
outros scripts pois este será o último a ser carregado. Isso acontece
com mais frequencia com conexões dial-up.
- Posso personalizar meu banner flutuante?
Sim,
no entanto como a gama de personalizações é muito extença, quando
desejar uma modificação/perosnalização no estilo de seu banner terá de
fazer um pedido no fórum Administrar a aparência do seu fórum.
Meu banner flutuante está se fechando, há como não acontecer isso?
Sim,
isso ocorre pois o script utilizado possui uma propriedade que define o
fechamento após passado determinado período de tempo.
Caso
deseje poderá fazer modificações ou até mesmo remover esta parte. Para
isso utilize este script ao invéz do mostrado no item dois:
function fechar(){
document.getElementById('popup').style.display = 'none';
}
function abrir(){
document.getElementById('popup').style.display = 'block';
setTimeout ("fechar()", 3000);
}
Conteúdo
Verde -> Esta linha representa o
tempo em que a janela se encontrará aberta. Poderá remover caso não a
queira ou então poderá modificar o valor que está em negrito que
representa o tempo que a janela será exibida em milésimos ou seja 3000
é a mesma coisa que 3 segundos.
Posso criar botões para abrir e fechar meu banner?!
Sim, para isso terá de adicionar o seguinte código onde quer que os botões se localizem:
[url=https://webexpert.forumeiros.com/javascript: abrir();]Abrir POPUP[/url]
[url=https://webexpert.forumeiros.com/javascript: fechar();]Fechar POPUP[/url]
- Posso personaliza-los?!
Sim, bastará que modifique o conteúdo em vermelho para o que desejar! - Posso criar botões para fechar dentro banner?!
Sim, para isso poderá utilizar outro código e adapta-lo a posição que deseja em seu banner:
[url=https://webexpert.forumeiros.com/javascript: fechar();][X][/url]
Vermelho -> Representa o botão de fechar, poderá personaliza-lo como desejar!
- A minha pop-up em modo "nova janela" é bloqueada pelo navegador, há como resolver isso?
Não,
isso é um meio que os navegadores utilizam para proteger a segurança
dos usuários, ela poderá ser exibida caso as configurações de segunraça
do navegador do usuário esteja configurada para permiti-las.
- Posso colocar vários scripts de pop-up?!
Sim mas, isso pode ser prejudicial para o usuário que está navegando e para a velocidade do carregamento do seu fórum.
_____________________________________________________________________________
[center]© Fórum dos Fóruns
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Criar e personalizar a sua pop-up |
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Sáb Nov 28, 2009 3:09 pm por sensata
» [Web Expert] - Quantos amigos há em seu perfil?
Sáb Out 24, 2009 10:12 pm por Russel Crowe
» ..:::80's Series Fórum:::..
Seg Set 14, 2009 8:20 am por BPinho
» [Informática]Oque é HTML 5?
Qua Set 09, 2009 4:27 pm por Harker
» Parceria com Gcn-Grand Chase Novidades
Qua Set 09, 2009 4:25 pm por Harker
» Anúncio: Alterações na Administração - Saída do Fundador Expert
Seg Set 07, 2009 7:40 am por Harker
» Regras da sessão de "Publicidade"
Dom Ago 30, 2009 10:59 pm por Harker
» Regras da sessão de "Publicidade"
Dom Ago 30, 2009 10:54 pm por Harker
» Regras da sessão de "Publicidade"
Dom Ago 30, 2009 10:53 pm por Harker
» Regras da sessão de "Publicidade"
Dom Ago 30, 2009 10:52 pm por Harker
» Regras da sessão de "Publicidade"
Dom Ago 30, 2009 10:50 pm por Harker
» Regras da sessão de "Publicidade"
Dom Ago 30, 2009 10:47 pm por Harker
» Regras da sessão de "Publicidade"
Dom Ago 30, 2009 10:45 pm por Harker
» Entrada/Saída da Staff
Sex Ago 28, 2009 10:39 am por Harker
» [Informática] Um pixel muda tudo
Qua Ago 26, 2009 2:47 pm por Harker
» Troca de nick
Qua Ago 26, 2009 2:43 pm por Harker
» Multi-Fórum - De tudo um pouco um pouco de tudo
Qua Ago 26, 2009 9:20 am por Skulcs
» Super Web - Seu site de entretenimento
Qua Ago 26, 2009 9:16 am por Skulcs
» Portal Connected, desde design a programação! Registre-se
Qua Ago 26, 2009 9:14 am por Skulcs
» Solicitação de parceria com Br-Grand Chase
Ter Ago 25, 2009 11:22 am por Harker