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

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

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

Mensagem por Cream em Qui 2 Ago 2012 - 11: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



- Criar uma página HTML:
(carregue na imagem para aumentar)
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".


- 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.
<!-- 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('http://illiweb.com/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 -->
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.




© 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
avatar

Cream
Ex-Admineiro
Ex-Admineiro

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11637

Ver perfil do usuário http://ajuda.forumeiros.com

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


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