[TUTORIAL] Login e senha para ver página HTML
Página 1 de 1 • Compartilhe
[TUTORIAL] Login e senha para ver página HTML
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
Login e senha para ver a página HTML
1º - Criar uma página HTML:
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 |
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. |
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. |
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) |
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. |
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.
Como é uma página HTML, então falta o Javascript e também o CSS, que podem ser aplicados antes da tag </head>:<!-- Creating by ETANA - Edited by Shiftactif --><div id="boxes">
<!-- Início do diálogo de login -->
<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>
<!-- Fim do diálogo de login -->
<!-- Máscara para cobrir toda a tela -->
<div id="mask"></div>
</div>
<div style="display:none" id="hidden"></div><!-- Creating by ETANA - Edited by Shiftactif -->
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>
- 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. |
© Fórum dos Fóruns, Magnus & Etana, Shek
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 |
Tópicos semelhantes
» Senha para acessar página HTML
» Redirecionar página de login de Fórum para página de login personalizada
» Login e senha html
» Declaro Urgência Help HTML ( Colocar vídeo para tocar automaticamente quando abrir a página de entrada do fórum em HTML Preciso do códico em HTML
» Login e senha na página inicial
» Redirecionar página de login de Fórum para página de login personalizada
» Login e senha html
» Declaro Urgência Help HTML ( Colocar vídeo para tocar automaticamente quando abrir a página de entrada do fórum em HTML Preciso do códico em HTML
» Login e senha na página inicial
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos