Entrar
Os membros mais ativos do mês
Nenhum usuário |
Quem está conectado?
Há 5 usuários online :: 0 registrados, 0 invisíveis e 5 visitantes Nenhum
[ Ver toda a lista ]
O recorde de usuários online foi de 23 em Seg Jun 08, 2020 3:43 am
Últimos assuntos
[TUTORIAL] Criar e personalizar a sua pop-up
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Scripts HTML, BBCode e Javascript
Página 1 de 1
[TUTORIAL] 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:
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:
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
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | 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:
<html><head></head><body style="margin: 0px; padding: 0px;">
Conteúdo da página
</body></html>
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: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] |
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:
<script language="javascript">window.open('endereço_da_página', 'Título da página', 'HEIGHT=225,resizable=no,WIDTH=400');</script>
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)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Pop-up através de "Banner flutuante" |
1º - Teremos de adicionar um código CSS para que possamos personalizar a janela:
(clique na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
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: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
/*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:
<script language="javascript" type="">function fechar(){
document.getElementById('popup').style.display = 'none';
}
function abrir(){
document.getElementById('popup').style.display = 'block';
setTimeout ("fechar()", 3000);
}</script>
<body onload="abrir();">
<DIV id="popup" class="popup">
Conteúdo
</DIV>
3º - Agora o resultado final:
(carregue na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
--> 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!
- Mensagem da Home Page:
- 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 [Tens de ter uma conta e sessão iniciada para poderes visualizar este link].
- 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:<script language="javascript" type="">function fechar(){
document.getElementById('popup').style.display = 'none';
}
function abrir(){
document.getElementById('popup').style.display = 'block';
setTimeout ("fechar()", 3000);
}</script>
<body onload="abrir();">
<DIV id="popup" class="popup">
Conteúdo
</DIV>
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:[color:cdeb=darkblue]<br> <a href="javascript: abrir();">[color:cdeb=red]Abrir POPUP</a>
<br> <a href="javascript: fechar();">Fechar POPUP</a> - 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:<a style="z-index: 5;" href="javascript: fechar();">[X]</a>
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.
© 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 |
Tópicos semelhantes
» [TUTORIAL] Personalizar o Chatbox
» [TUTORIAL] Personalizar caixa de Busca
» [TUTORIAL] Personalizar fundo de categorias
» [TUTORIAL] Personalizar o fundo do quote
» [TUTORIAL] Personalizar o cursor do mouse
» [TUTORIAL] Personalizar caixa de Busca
» [TUTORIAL] Personalizar fundo de categorias
» [TUTORIAL] Personalizar o fundo do quote
» [TUTORIAL] Personalizar o cursor do mouse
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Scripts HTML, BBCode e Javascript
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Dom Jun 24, 2012 11:15 am por Alisson Silva
» [Re-Apresentação] Fábio
Sex maio 25, 2012 4:45 pm por Fábio
» PixelZIP ~ design&programção em só lugar
Sex maio 25, 2012 4:44 pm por Fábio
» Pedido de logo
Dom maio 20, 2012 10:06 am por Alisson Silva
» Kernel - Apresentação
Sáb maio 19, 2012 9:49 am por Alisson Silva
» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
Sáb maio 19, 2012 9:48 am por Alisson Silva
» HEBBO HOTEL 24 HORAS ONLINE !!
Sex maio 04, 2012 7:20 pm por Alisson Silva
» Pedido de Layout
Sex maio 04, 2012 5:23 pm por Fonsecca
» [RESOLVIDO]TV CCE HPS 2071-D (IMAGEM SÓ EMBAIXO, ACIMA, LINHAS DE RETRAÇO E FAIXA PRÊTA NO TOPO DA TELA).
Qua Abr 11, 2012 4:07 pm por Fry
» [contato] Deixo aqui meus contatos virtuais
Qua Abr 11, 2012 3:25 pm por Fry