Painel de login administrativo estilo Google

Membro desde : 19/05/2013

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Nome do Arquivo: Painel de login administrativo estilo Google
Autor: Wagner'
Funcionalidade: Todas as versões
Categoria: Recursos de Outros Autores

Olá amigos, hoje trago um painel de login administrativo no estilo do painel de login do Google..
Ao acessar o painel de controle é necessário digitar sua senha para entrar no painel..

Tutorial

Crie uma página HTML com o seguinte conteúdo..
HTML

Código:: <!DOCTYPE html><html><head><title>Painel de login administrativo</title><link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0Bxaa_QAP8kJtQm5rR0xZV0VEU2c/painellogin.css"/></head><body><main><section class="google-login"><section class="logo"><img alt="Logo" class="logo" src=""/></section><section class="banner"><h2>Digite sua senha novamente</h2></section><section class="sign-in"><div class="avatar"><img src="//i78.servimg.com/u/f78/18/17/62/92/defaul10.png" alt="Avatar"/></div><p class="username"></p><p class="email"></p><form action='/login' id='qstring' name="form_login" method='post'><input type="password" placeholder="Senha" id="password" tabindex="2" name="password" class="password" autofocus/><br/><input type="submit" name="login" tabindex="6" value="Fazer login" class="login"/><input type="hidden" name="redirect" value="/admin/index.forum"/><input type="hidden" name="query" value="part=admin"/><input type="hidden" name="admin" value="1"/><input type="hidden" size="20" id="username" tabindex="1" name="username" value=""/></form></section></section></main><footer><ul><li class="forumname"><a href="/forum">Homepage</a></li><li><a target="_blank" href="//bestskins.forumeiros.com/u517">Desenvolvedor</a></li></ul></footer><script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script><script type="text/javascript" src="//googledrive.com/host/0Bxaa_QAP8kJtQm5rR0xZV0VEU2c/painellogin.js"></script></body></html>

Depois crie um Javascript com o seguinte conteúdo
JAVASCRIPT

Código:: jQuery(function() { jQuery('a[href*="/admin"]').attr('href','/hID-'); });

Mude o ID para o ID da página criada anteriormente, salve e teste...

ATENÇÃO, É PREFERÍVEL QUE O LOGO DO SEU FÓRUM SEJA COM FUNDO BRACO, NO ESTILO DO GOOGLE, SE ELE FOR AQUELES LOGO COM BACKGROUND PODE FICAR ESTRANHO O EFEITO.

É isso ai, espero que gostem e até breve '-'

Última edição por Wagner' em Sex 24 Jan 2014 - 17:18, editado 1 vez(es)