How to Create a HTML Login Form Th3safelink
How to Make a Login Form is easy, buddy, this jalantikus login form is very easy to create that is difficult to implement it into hosting servers, because it requires PHP expertise, and similar codes. But this time not discussing the method, the admin only shared the scripts or Form code used by Jalantikus. If you are a jalantikus writer, you might already know what it looks like. There are many advantages to these sites. No need to talk too long, just check into the tutorial, friend.
- Login to Blogger
- See the Themes tab >> Edit HTML
- Enter the CSS below, Right above the code ]]></b:skin> or </style>
.login-root .login {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.login {
width: 100%;
height: 100%;
min-height: 100vh;
min-width: 100%;
background-image: url(https://jalantikus.com/assets/a74bdef3.jpg);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}.login-root .login {
left: auto;
top: auto;
margin-left: 0;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}.login-container {
position: absolute;
width: 360px;
left: 50%;
top: 50%;
margin-left: -180px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
z-index: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}.login-body {
position: relative;
background-color: #322b36;
border-radius: 8px;
margin-bottom: 40px;
-webkit-box-shadow: 0 20px 60px 10px rgba(0,0,0,.3);
box-shadow: 0 20px 60px 10px rgba(0,0,0,.3);
}.login-body .login-back, .login-body .title {
top: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}.login-body .title {
position: relative;
left: 0;
height: 66px;
width: 100%;
padding: 0 24px;
font-family: Museo,sans-serif;
font-size: 21px;
line-height: 66px;
border-radius: 6px 6px 0 0;
background: -webkit-linear-gradient(left,#ed6a63,#f6a684);
background: -o-linear-gradient(right,#ed6a63,#f6a684);
background: -webkit-gradient(linear,left top,right top,from(#ed6a63-#f6a684));
background: -webkit-linear-gradient(left,#ed6a63-#f6a684);
background: -o-linear-gradient(left,#ed6a63-#f6a684);
background: linear-gradient(90deg,#ed6a63-#f6a684);
z-index: 1;
}.login form {
width: 100%;
padding: 20px;
text-align: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}.login form .form-title {
font-family: arial;
font-size: 13px;
line-height: 16px;
margin-bottom: 20px;
text-align: center;
}
.color.white {
color: #fff;
}.login .input-group {
margin-bottom: 20px;
}
.input-group {
width: 100%;
margin-bottom: 10px;
}.box-1:first-child, .box-2:first-child, .box-3:first-child, .box-4:first-child, .box-5:first-child, .box-6:first-child, .box-7:first-child, .box-8:first-child, .box-9:first-child, .box-10:first-child, .box-11:first-child, .box-12:first-child {
float: left;
}.box-12 {
width: 100%;
}.box-1, .box-2, .box-3, .box-4, .box-5, .box-6, .box-7, .box-8, .box-9, .box-10, .box-11, .box-12 {
position: relative;
display: inline-block;
float: left;
}form .box-6:nth-child(odd) {
padding-right: 10px;
}form .box-6 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.box-merge, .box-merge * {
padding: 0!important;
margin: 0!important;
}
.box-6 {
width: 50%;
}.login .button.facebook {
border-radius: 30px 0 0 30px;
background-color: #3d5c9c;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
.login .button.facebook:hover{background:#506ca5}
.login .box-merge .button {
height: 35px;
font-family: Museo,sans-serif;
line-height: 35px;
}.login .button {
width: 100%;
border-radius: 30px;
line-height: 36px;
-webkit-transition: .3s!important;
-o-transition: .3s!important;
transition: .3s!important;
}.login .button.facebook:before, .login .button.google:before {
position: absolute;
font-size: 18px;
line-height: 35px;
left: 28px;
}.icon-fb:before {
content: "\E005";
}[class*=" icon-"]:before, [class^=icon-]:before, [data-icon]:before {
font-family: untitled-font-2!important;
font-style: normal!important;
font-weight: 400!important;
font-variant: normal!important;
text-transform: none!important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-g:before {
content: "\E006";
}
.link-overlay {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 4;
cursor: pointer;
}form .box-6:nth-child(2n) {
padding-left: 10px;
}.login .button.google {
border-radius: 0 30px 30px 0;
background-color: #e04a32;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
.login .button.google:hover{background:#de5e49}
.login .box-merge .button {
height: 35px;
font-family: Museo,sans-serif;
line-height: 35px;
}.login .button {
width: 100%;
border-radius: 30px;
line-height: 36px;
-webkit-transition: .3s!important;
-o-transition: .3s!important;
transition: .3s!important;
}.login .button.facebook:before, .login .button.google:before {
position: absolute;
font-size: 18px;
line-height: 35px;
left: 28px;
}[class*=" icon-"]:before, [class^=icon-]:before, [data-icon]:before {
font-family: untitled-font-2!important;
font-style: normal!important;
font-weight: 400!important;
font-variant: normal!important;
text-transform: none!important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}.login .input-group {
margin-bottom: 20px;
}.input-group {
width: 100%;
margin-bottom: 10px;
}.login input {
width: 100%;
background-color: #3c3940;
border-radius: 30px;
border: 0 solid hsla(0,0%,100%,0);
text-align: center;
color: #fff;
font-size: 14px;
-webkit-transition: .4s!important;
-o-transition: .4s!important;
transition: .4s!important;
}.input-group input, .input-group select, .input-group textarea {
position: relative;
width: 100%;
padding: 0 10px;
border-radius: 50px;
height: 40px;
font-family: Roboto,Open Sans;
font-weight: 400;
line-height: 38px;
margin-top:20px;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.login .input-group:last-child {
margin-bottom: 0;
}.login .input-group {
margin-bottom: 20px;
}.input-group {
width: 100%;
margin-bottom: 10.login .button {
width: 100%;
border-radius: 30px;
line-height: 36px;
-webkit-transition: .3s!important;
-o-transition: .3s!important;
transition: .3s!important;
}px;
}.login .button {
width: 100%;
border-radius: 30px;
line-height: 36px;
-webkit-transition: .3s!important;
-o-transition: .3s!important;
transition: .3s!important;
}.button-magenta {
background-color: #ce0a46;
border: 1px solid #9c153e;
}
.button-magenta:hover {
background-color: #b7033b;
}
.button {
position: relative;
width: 150px;
height: 40px;
font-size: 13px;
font-weight: 700;
color: #fff;
border-radius: 4px;
overflow: hidden;
font-family: Open Sans;
line-height: 38px;
text-align: center;
-webkit-transition: .2s;
-o-transition: .2s;
transition: .2s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
}.to-register {
padding-bottom: 17px;
font-family: Open Sans;
font-size: 15px;
line-height: 18px;
-webkit-transition: .4s;
-o-transition: .4s;
transition: .4s;
}
#enterblogger{color:#fff;text-align:center;width:50%;background:#00000061;
padding:10px 15px;margin:5px;box-shadow:0 5px 20px rgba(32, 33, 36, 0.19);cursor:pointer;font-weight:bold;}
If so, enter the following HTML code, the appearance of the site you want to display the form.
<div class="login">
<div class="login-container">
<div class="login-body">
<div class="title color white text-left">
LOG IN</div>
<div class="content">
<form>
<div class="form-title color white">
Please enter your email address to login</div>
<div class="input-group">
<div class="box-12">
<div class="box-6 box-merge">
<div class="button facebook ">
<!-- react-text: 14 --><i aria-hidden="true" class="fa fa-facebook"></i> Facebook<!-- /react-text --><a class="link-overlay" href="https://draft.blogger.com/login/facebook/" style="cursor: pointer;"> </a></div>
</div>
<div class="box-6 box-merge">
<div class="button google">
<!-- react-text: 18 --><i aria-hidden="true" class="fa fa-google"></i> Google<!-- /react-text --><a class="link-overlay" href="https://draft.blogger.com/login/google/" style="cursor: pointer;"> </a></div>
</div>
<div class="clear">
</div>
</div>
<div class="clear">
</div>
</div>
<div class="input-group">
<input placeholder="Email or username" type="text" value="" /></div>
<div class="input-group">
<div class="box-12">
<button class="button button-magenta" id="login-submit" type="submit">NEXT</button></div>
<div class="clear">
</div>
</div>
</form>
</div>
<div class="to-register color white">
<!-- react-text: 29 -->Don't have an account? <!-- /react-text --><strong><a class="color white" href="https://draft.blogger.com/register/">sign up now </a></strong></div>
</div>
</div>
<center>
<div id="enterblogger">
SOURCE BY ENTERBLOGGER Th3safelink
</div>
</center>
<div class="footer--floating">
<div class="select-tabs">
<ul class="select-tab-list"></ul>
</div>
</div>
<div class="popup" id="login-popup" style="display: none;">
<div class="popup-overlay">
</div>
<div class="popup-login-content popup-content text-center">
<img alt="" class="login-fail" src="../../assets/images/login/log-failed.png" /><br />
<div class="title color white">
LOGIN FAILED</div>
<div class="subtitle color white">
The email address you entered is not yet registered. Please register now by pressing the button below.</div>
<div class="button button-magenta">
<!-- react-text: 56 -->SIGN UP NOW<!-- /react-text --><a class="link-overlay" href="https://draft.blogger.com/register/"> </a></div>
<div class="popup-close">
</div>
</div>
</div>
<div class="popup" id="password-popup" style="display: none;">
<div class="popup-overlay">
</div>
<div class="popup-login-content popup-content text-center">
<img alt="" class="login-fail" src="../../assets/images/login/log-failed.png" /><br />
<div class="title color white">
LOGIN FAILED</div>
<div class="subtitle color white">
The password you are using is incorrect. Please enter the correct password, or press the button below to reset the password.</div>
<div class="button button-magenta">
<!-- react-text: 66 -->Reset Password<!-- /react-text --><a class="link-overlay" href="https://draft.blogger.com/reset"> </a></div>
<div class="popup-close">
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"></link>
A few articles, concise & clear. Hope it can be useful, see you in the next article, friend.
Post a Comment