[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 Empty [TUTORIAL] Login e senha para ver página HTML

Mensagem por Cream em 02.08.12 15:54


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

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)
[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 [TUTORIAL] Login e senha para ver página HTML 398853 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 [TUTORIAL] Login e senha para ver página HTML 398853 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 [TUTORIAL] Login e senha para ver página HTML 398853 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 [TUTORIAL] Login e senha para ver página HTML 398853 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('https://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:
    [TUTORIAL] Login e senha para ver página HTML Result35

[TUTORIAL] Login e senha para ver página HTML Logo 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


[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
Cream

Cream
Principal contribuidor
Principal contribuidor

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

Ver perfil do usuário https://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