o Código é aquele que está no portal ?

Sim.

UP ... eu acho. e.e

poderia passar o código que você ta usando ?
o html que você colocou no widget

Ó moço ... :

Código:

<div id="flutuante"><div class='sbutton' id='fb'><div class="module"><div class="inner">
<span class="corners-top"><span></span></span><div class="h3" style="text-align:left;">Login</div>
<span></span></p><p>
<form action="/login" method="post" name="form_login">

<label for="username"><b>Nome de usuário</b>:</label></dt><dd><input type="text" tabindex="1" name="username" id="username" size="25" maxlength="40" value="" class="inputbox autowidth" /></dd></dl><dl><dt><label for="password"><b>Senha</b>:</label></dt><dd><input type="password" tabindex="2" id="password" name="password" size="25" maxlength="25" class="inputbox autowidth" />

<br></br>

<dd><input type="hidden" name="redirect" value="" /><input type="hidden" name="query" value="" /><input type="submit" name="login" tabindex="6" value="Login" class="button1" /></dd><p>

<a href="/register"><img src ="http://2img.net/i/fa/admin/icones/small_ico/configuration.png"/> Login</a> - <a href="/profile?mode=sendpassword"><img src ="http://2img.net/i/fa/admin/icones/small_ico/configuration.png"/> Login</a></p>

</form>
<span class="corners-bottom"><span></span></span></div></div><div style="height:2px"></div></div></div>







<face coneect><div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

up ... e.e

Olá!

Tenho um deste tipo:
Caso queira o codigo, avise-me.

Troque o conteúdo do widget por esse

Código:


<div id="bgFloat"><div id="flutuante"><div class='sbutton' id='fb'>
<img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/48/Alarm-Error-icon.png" alt="Fechar" id="clsFloat" /><div class="module"><div class="inner">
<span class="corners-top"><span></span></span><div class="h3" style="text-align:left;">Login</div>
<span></span></p><p>
<form action="/login" method="post" name="form_login">

<label for="username"><b>Nome de usuário</b>:</label></dt><dd><input type="text" tabindex="1" name="username" id="username" size="25" maxlength="40" value="" class="inputbox autowidth" /></dd></dl><dl><dt><label for="password"><b>Senha</b>:</label></dt><dd><input type="password" tabindex="2" id="password" name="password" size="25" maxlength="25" class="inputbox autowidth" />

<br></br>

<dd><input type="hidden" name="redirect" value="" /><input type="hidden" name="query" value="" /><input type="submit" name="login" tabindex="6" value="Login" class="button1" /></dd><p>

<a href="/register"><img src ="http://2img.net/i/fa/admin/icones/small_ico/configuration.png"/> Login</a> - <a href="/profile?mode=sendpassword"><img src ="http://2img.net/i/fa/admin/icones/small_ico/configuration.png"/> Login</a></p>

</form>
<span class="corners-bottom"><span></span></span></div></div><div style="height:2px"></div></div></div>


<script>
jQuery(document).ready(function(){
jQuery('#clsFloat, #bgFloat').click(function(){
jQuery('#flutuante, #bgFloat').remove();

});
});
</script>




<face coneect><div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

</div>


E o css troque o que você pegou do tutorial e coloque esse no lugar dele

Código:


#bgFloat {
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
}
#clsFloat {
position: absolute;
right: -15px;
top: -15px;
width: 31px;
}
.sbutton {
position: relative;
}
#flutuante {
position:fixed;
top:40%;
left:46%;
float:left;
border-radius:5px;-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;
z-index: 999;
}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:100px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}



Quando clicar nos campos de registro ou login a tela some ...

UP ... e.e

Troca o do widget por esse

Código:


<div id="bgFloat"><div id="flutuante"><div class='sbutton' id='fb'>
<img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/48/Alarm-Error-icon.png" alt="Fechar" id="clsFloat" /><div class="module"><div class="inner">
<span class="corners-top"><span></span></span><div class="h3" style="text-align:left;">Login</div>
<span></span></p><p>
<form action="/login" method="post" name="form_login">

<label for="username"><b>Nome de usuário</b>:</label></dt><dd><input type="text" tabindex="1" name="username" id="username" size="25" maxlength="40" value="" class="inputbox autowidth" /></dd></dl><dl><dt><label for="password"><b>Senha</b>:</label></dt><dd><input type="password" tabindex="2" id="password" name="password" size="25" maxlength="25" class="inputbox autowidth" />

<br></br>

<dd><input type="hidden" name="redirect" value="" /><input type="hidden" name="query" value="" /><input type="submit" name="login" tabindex="6" value="Login" class="button1" /></dd><p>

<a href="/register"><img src ="http://2img.net/i/fa/admin/icones/small_ico/configuration.png"/> Login</a> - <a href="/profile?mode=sendpassword"><img src ="http://2img.net/i/fa/admin/icones/small_ico/configuration.png"/> Login</a></p>

</form>
<span class="corners-bottom"><span></span></span></div></div><div style="height:2px"></div></div></div>


<script>
jQuery(document).ready(function(){
jQuery('#clsFloat').click(function(){
jQuery('#flutuante, #bgFloat').remove();

});
});
</script>




<face coneect><div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

</div>

<style>
#bgFloat {
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
}
#clsFloat {
position: absolute;
right: -15px;
top: -15px;
width: 31px;
}
.sbutton {
position: relative;
}
#flutuante {
position:fixed;
top:40%;
left:46%;
float:left;
border-radius:5px;-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;
z-index: 999;
}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:100px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>


Legal legal, ficou super maneiro ... ^^ só tem como deixar igual o da imagem ... ? e.e

Cristian 95 escreveu:Legal legal, ficou super maneiro ... ^^ só tem como deixar igual o da imagem ... ? e.e

Seria igual essa Imagem,certo? ( https://i.servimg.com/u/f40/17/50/76/58/7810.jpg )

Em qual fórum você viu o efeito?

http://www.xaydungthanhhoa.com/

O fórum é em vietnamita, o botão para ver o efeito é Đăng Nhập ^^

Olá!

Consegui um parecido, caso queira usar-lo.

CSS:

Código:

#TGlogin_form {position: fixed;z-index: 999; height: 130px; padding: 0; verflow: auto;  width: 330px; margin: 0; background: #f9f9f9; color: #444; /* ©Copyright by giObanii.*/ text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);}
.TGlogin_form-float-content{width: 320px; height: 120px; background: none repeat scroll 0% 0% transparent;}
.TGlogin_form-float-div {background: url("http://i49.tinypic.com/2jci9c.jpg") no-repeat scroll left center transparent;margin: 0 auto;padding: 20px 0 0 60px;width: 250px;}
.TGlogin_form-float-div label {font-family: Verdana;display: block;font-size: 12px;padding-bottom: 5px;text-align: right;}
.TGlogin_form-float-div label em {color: #000000;font-family: Verdana;display: block;float: left;font-style: normal;width: 80px;font-size: 12px;text-align: right;}
.TGlogin_form-float-div input {border: 1px solid #CCCCCC;height: 22px;width: 146px;}
.TGlogin_form-float-div input.submit {background: url("http://i49.tinypic.com/eumpmp.jpg") repeat-x scroll 0 0 #DDDDDD;padding: 3px 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;border: 1px solid #BBB;float: right;height: auto;width: auto;}
.TGlogin_form-float-div input.submit:active {position:relative; top: 1px;}
.TGlogin_form-float-div input.submit:hover, .TGlogin_form-float-div input.submit:focus {cursor:pointer;color:#000;}
.TGlogin_form-float_overlay{display: none;position:fixed;top: 0%;left: 0%;width: 100%;height: 100%; background-color: black;z-index: 9;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);}
#TGlogin_form .TGClose {cursor: pointer;bottom: 3px;color: #000000;font-size: 15px;font-weight: 700;position: absolute;right: 5px;}
#TGlogin_form .TGClose:active {color: #FF0000 !important;bottom: 2px;}

JavaScript (Em todas as paginas)

Código:

$(function() {
var tgl = document.getElementById('i_icon_mini_login'); if(!tgl) return; var tgu = location.href; $('body').append('<div id="TGlogin_form" class="TGlogin_form-float" style="display: none;"><div class="TGlogin_form-float-content"><div class="TGlogin_form-float-div"><form  id="TGloginform" method="post" method="post" action="/login?redirect='+tgu+'"><label><em>Username : </em><input id="username" type="text" name="username"></label><label><em>Password : </em><input id="password" type="password" name="password"></label><label style="float: left; margin-top: 5px; text-align: left;"><em style="margin-right: 10px; margin-top: 3px; width: 85px; margin-left: 7px;">Recordarme : </em><input type="checkbox" name="autologin" checked="true" style="width: 20px;"></label><input id="submit" type="submit" name="login" value="Conectarse" class="submit"></form></div></div><span class="TGClose">X</span></div><div id="TGfade" class="TGlogin_form-float_overlay"></div>'); var Copyrights = 'TGloginform with jQuery - ©www.konektabrasil.com.'; $('a[href="/login"], a[href="/login?connexion"]').attr('href', '#').click(function (e) { $('#TGlogin_form').fadeToggle('slow',  'linear'); return false; }).click(function(e) {$('#TGfade').css('display', 'block' ); $('#TGlogin_form').css('left', '40%').css('top', '40%'); }); $('.TGClose').click(function() { $('#TGlogin_form, #TGfade').fadeToggle("slow", "linear"); });
});


Ficou a mesma coisa ... (a menos que não pegue no mozilla ... rs)

@Sweet Chili, o código ficou top, porém ao logar-se, a página html de "conectado com sucesso" não aparece, só quando vai para a página de login normal, agora no efeito criado (ou editado) por você não funciona, e não tem como colocar esse efeito em todos botões login? rs

UP ... e.e

UP ... e.e

Troca o conteúdo do widget por esse

Código:


<div id="bgFloat"><div id="flutuante"><div class='sbutton' id='fb'>
<img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/48/Alarm-Error-icon.png" alt="Fechar" id="clsFloat" /><div class="module"><div class="inner">
<span class="corners-top"><span></span></span><div class="h3" style="text-align:left;">Login</div>
<span></span></p><p>
<form action="/login" method="post" name="form_login">

<label for="username"><b>Nome de usuário</b>:</label></dt><dd><input type="text" tabindex="1" name="username" id="username" size="25" maxlength="40" value="" class="inputbox autowidth" /></dd></dl><dl><dt><label for="password"><b>Senha</b>:</label></dt><dd><input type="password" tabindex="2" id="password" name="password" size="25" maxlength="25" class="inputbox autowidth" />

<br></br>

<dd><input type="hidden" name="redirect" value="" /><input type="hidden" name="query" value="" /><input type="submit" name="login" tabindex="6" value="Login" class="button1" /></dd><p>

<a href="/register"><img src ="http://2img.net/i/fa/admin/icones/small_ico/configuration.png"/> Login</a> - <a href="/profile?mode=sendpassword"><img src ="http://2img.net/i/fa/admin/icones/small_ico/configuration.png"/> Login</a></p>

</form>
<span class="corners-bottom"><span></span></span></div></div><div style="height:2px"></div></div></div>


<script>
jQuery(document).ready(function(){
jQuery('#clsFloat').click(function(){
jQuery('#flutuante, #bgFloat').remove();

});
});
</script>




<face coneect><div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

</div>

<style>
#bgFloat {
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
}
#clsFloat {
position: absolute;
right: -15px;
top: -15px;
width: 31px;
}
.sbutton {
position: relative;
  background-color:#333333;
  color:#F1F1F1;
  padding:3px;
  position:relative;
border-radius:3px;
}

#fb input {
  background-color:#999999;
  border:1px solid #111111;
  color:#333333;
  padding:3px;
}
#fb input[type="submit"] {
background: #F1F1F1;
width: 100%;
margin: 10px 0;
}
#flutuante {
position:fixed;
top:40%;
left:46%;
float:left;
border-radius:5px;-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:3px;
z-index: 999;
}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:100px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>


Não fico exatamente igual, mais está parecido.

Switch, eu estou usando o código css e javascript passado por Sweet Chili que pegou perfeitamente, só dando o único problema citado por mim acima, se eu por isso no widget vai resolver do mesmo jeito ?

Ele quer tipo criar um codigo pra quando se clicar para entrar no fórum atravez do codigo que forneci ele enviar por exemplo, para uma pagina HTML tipo:

Código:

$('input[name="redirect"]').attr('value','/h1-')

Eu não sei como fazer, espere que o Switch entenda como é para que ele faça.

Exato ...

Se tivesse como usar php teria como recuperar o valor do campo redirect, mais como não é permitido usar php infelizmente não tem como eu acho.
Já que JS não tem um modo de recuperar valores passados por POST