JScript

Programação & Desenvolvimento


Painel de login administrativo estilo Google

waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

Painel de login administrativo estilo Google Empty Painel de login administrativo estilo Google

Mensagem por waghcwb em Sex 24 Jan 2014, 3:17 pm

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="//jscript.forumeiros.com/u61">Copyrights</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','/ID-');
});


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 '-'



The quieter you become, the more you are able to hear

Painel de login administrativo estilo Google Btn_viewmy_160x25_pt_BR



study
DiogoR.
DiogoR.
Membro
Membro

Time Online : 325d 4h 18m 58s
Mensagens : 93
Data de inscrição : 03/03/2015

Painel de login administrativo estilo Google Empty Re: Painel de login administrativo estilo Google

Mensagem por DiogoR. em Ter 21 Abr 2015, 7:49 am

Olá,

Já tinha visto esse sistema compartilhado em vários fóruns, nem sabia que tinha sido você a adaptar esse sistema para os fóruns forumeiros.

Obrigado por compartilhar connosco.

Até Mais...
JScript
JScript
Administradores
Administradores

Time Online : 2d 4h 51m 36s
Mensagens : 1381
Data de inscrição : 29/03/2013
Localização : Somewhere out there

Painel de login administrativo estilo Google Empty Re: Painel de login administrativo estilo Google

Mensagem por JScript em Ter 21 Abr 2015, 8:13 pm

Muito bom mesmo!!!

5 *

JS



Spoiler:
"O impossível é só uma questão de opinião."


"E o recente formará uma legião. Sua atuação será maior que a atual vezes mil. O estrondor de um milhão de teclados semelhante a um grande terremoto cobrirá a plataforma, e os incrédulos tremerão."

"Alguns seguidores dirão que não é possível, diante de uma legião estarrecida o recente provará o contrário e todos o conhecerão. Os infiéis passarão a lhe adorar diante de uma plataforma que nunca mais será a mesma!"


Do livro de JScript...


Helix
Helix
Novato

Time Online : 25m 40s
Mensagens : 2
Data de inscrição : 17/07/2015

Painel de login administrativo estilo Google Empty Re: Painel de login administrativo estilo Google

Mensagem por Helix em Sex 17 Jul 2015, 9:51 am

Já procurava isto faz tempo.
Obrigado

Conteúdo patrocinado

Painel de login administrativo estilo Google Empty Re: Painel de login administrativo estilo Google

Mensagem por Conteúdo patrocinado


    Data/hora atual: Qui 14 Nov 2019, 5:17 pm