Últimos assuntos
» Onde você vive?
Sab Nov 28, 2009 3:09 pm por sensata

» [Web Expert] - Quantos amigos há em seu perfil?
Sab 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

Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Conectar-se

Esqueci minha senha

Votação

[Forumeiros] Que versão prefere?

0% 0% [ 0 ]
57% 57% [ 4 ]
0% 0% [ 0 ]
43% 43% [ 3 ]

Total dos votos : 7

Parceiros
                                       BohrerWP! Sempre com voce!   BohrerWP! Sempre com voce!   Visite o Reiro Sims!  
Palavras chave

Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 19 em Qui Out 07, 2010 12:02 am

Criar e personalizar a sua pop-up

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Criar e personalizar a sua pop-up

Mensagem por Harker em Sex Jun 05, 2009 7:52 pm

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.

--> Tutorial <--
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');


Arrow 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.
Arrow Título da página - Deverá colocar o título da pop-up, o mesmo que será exibido no topo da janela.
Arrow Width - Deverá colocar o valor em pixels da largura da janela, o tamanho que está definido no código é o tamanho mais utilizado.
Arrow 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





  • 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?

    1. Mensagem da Home Page:
      Painel de Controle -> Visualização -> Home Page -> Geral -> "Mensagem da Home Page"
    2. 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
    3. Newsletter's (modo HTML)
      Painel de Controle -> Geral -> Newsletter -> Redação e envio
    4. Mensagens Privadas (MP) e mensagens (com HTML ativado para as mensagens) Só terá efeito na determinada mensagem!
    </li>


  • 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=http://webexpert.forumeiros.com/javascript: abrir();]Abrir POPUP[/url]

[url=http://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=http://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
avatar
Harker
Administrador
Administrador

Idade : 22
Pontos : 930
Reputação : 7
Nº Mensagens : 365
Localização : Curitiba - PR
Profissão : Estudante
Humor : Triste :'(
Inscrito dia : 05/06/2009

http://webexpert.forumeiros.com/forum.htm

Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum