[TUTORIAL] Login e senha para ver página HTML

por Cream 02.08.12 15:54

Login e senha para ver página HTML

Neste tutorial vamos usar um efeito que obriga o visitante se conectar na página para continuar a leitura. Você poderá modificar esses pontos para que fique ao seu gosto.

--> Tutoriais <--
Login e senha para ver a página HTML

1º - Criar uma página HTML:

(carregue na imagem para aumentar)

[TUTORIAL] Login e senha para ver página HTML 210

[TUTORIAL] Login e senha para ver página HTML 110111

[TUTORIAL] Login e senha para ver página HTML 398853

Título -
Neste campo terá de adicionar um título para a sua página HTML, servirá
para identificar a sua página na lista de páginas HTMl, do Painel de
Cntrole, e fará também parte do endereço da página. Por exemplo:
Título: Forumeiros
Endereço da página: .../forumeiros-h1.html

[TUTORIAL] Login e senha para ver página HTML Warning

ATENÇÃO:
A designação que aparece à frete do nome da página, no endereço,
modifica consoante a número da página criada. Se for a primeira página a
ser criada, então será -h1, se for a quarta página a ser criada será
-h4, etc.

[TUTORIAL] Login e senha para ver página HTML 110210

Você deseja utilizar o início e o final da página do seu fórum? - Se optar pelo "Sim",
a sua página apresentará o cabeçalho (Logo e menu do Fórum) e o rodapé
(barra de links úteis). Uma das vantagens desta escolha, é que terá de
personalizar menos o seu texto, por exemplo, pois, poderá utilizar as
classes CSS, do seu próprio Fórum, e também não necessita de criar uma
estrutura HTML, apenastem de adicionar o código de conteúdo.
Se optar pelo "Não" a página torna-se independente da estrutura do Fórum, mas neste caso terá de adicionar a própria estrutura, com as balizas html, head, body, etc.

[TUTORIAL] Login e senha para ver página HTML 110310

Usar esta página como página inicial? - Se pretende que a página seja utiliza como a página inicial do Fórum, deverá colocar "Sim", mas se optar por esta opção, terá de adicionar o endereço do site Forumeiros.com. (ver FAQ)

[TUTORIAL] Login e senha para ver página HTML 110410

Código HTML -
Neste campo, terá de adicionar o conteúdo da sua página HTML, se
colocou não na opção 2, então terá de criar uma estrutura de uma página
HTML.

[TUTORIAL] Login e senha para ver página HTML 110510

Confirmar / Previsualizar - Nestes dois botões poderá confirmara criação da sua página HTML, carregando em "Confirmar". Ou poderá visualizar o resultado que a página terá quando ele for visualizada por todos os usuários, carregando em "Previsualizar".

2º - Adicionando e modificando o código da página:
Vamos adicionar e modificar o código HTML que há, por isso você deve prestar muita atenção em todos os pontos.

<div id="boxes">


<iframe style="visibility:hidden;width:1px;height:1px;" name="connecting" onLoad="verifyLogin();"></iframe>
<div id="connect" class="window" style="background: white url('https://2img.net/i/fs/img/spirale.png') no-repeat 0% 0%; border: 2px solid #C00;">
<form target="connecting" action="/login" method="post" name="form_login"><br />Conexão : <input type="text" name="username" style="width:80px;" value="Usuário" onclick="this.value=''"/> <input type="password" name="password" style="width:80px;" value="Password" onclick="this.value=''" /> <input type="hidden" name="redirect" value="#"><input type="hidden" name="query" value=""><button type="submit" name="login" value="Entrar"><img src="IMAGEM_DE_CONEXAO" style="vertical-align:middle" /></button><br /><br /></form>
</div>



<div id="mask"></div>
</div>

<div style="display:none" id="hidden"></div>

Como é uma página HTML, então falta o Javascript e também o CSS, que podem ser aplicados antes da tag </head>:
CSS:

Código:: <style type="text/css"> #mask { position:absolute; left:0; top:0; z-index:9000; background-color:#000; display:none; } #boxes .window { position:fixed; left:0; top:0; display:none; z-index:9999; padding:20px; } </style>

Scripts necessários:

Código:: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> function verifyLogin() { $.get('/popup_help.forum?l=miscvars&change_version=prosilver',function(data){ $("#hidden").html(data.replace(/^.*<body>(.+)<\/body>.*$/,'$1')); if( $('#hidden span.genmed li strong:contains({USERLINK})').parent().find('a').attr('href').match('u=-1')) { var maskHeight = $(document).height(); var maskWidth = $(window).width(); $('#mask').css({'width':maskWidth,'height':maskHeight}); $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.8); var winH = $(window).height(); var winW = $(window).width(); $('.window').css('top', winH/2-$('.window').height()/2); $('.window').css('left', winW/2-$('.window').width()/2); $('.window').show().fadeIn(2000); } else { $('#pseudo').html('').append($('#hidden span.genmed li strong:contains({USERLINK})').parent().find('a')); $('#pseudo-tr').removeClass('bad-tr'); $('#mask').hide(); $('.window').hide(); } }); } $(document).ready(function(){ verifyLogin(); }); </script>

Deslogue de sua conta e veja o resultado.

Resultado:

ATENÇÃO!
Este tutorial contém direitos autoriais, que são de Etana, moderador do fórum de suporte ao Forumeiros Francês. Se for retirado os direitos do autor de dentro do código o autor do efeito poderá entrar com processos na justiça contra seu fórum.

[TUTORIAL] Login e senha para ver página HTML Act_bottom

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Login e senha para ver página HTML