Home blog / widget

Cara Membuat Form Login Seperti Web Jalantikus

Sebenarnya membuat form login itu mudah, yang susah itu ketika kita mengimplementasikannya ke server hosting, karena membutuhkan keahlian php atau kode sejenisnya.

Akan tetapi saya tidak akan mengulas bagaimana cara mengimplementasikan form login ke server hosting. Saya hanya akan memberikan skrip atau kodenya saja. Jika kalian penulis i jalan tikus maka kalian pasti sudah tidak asing dengan dengan tampilannya.

Tanpa basa-basi lagi mari kita langsung ke tutorialnya, simak baik-baik ya agar kalian tidak terlewat hehe.

Cara Membuat Login Seperti Web Jalantikus

Caranya singkat banget loh..
  1. Kalian masuk ke blogger
  2. Masuk ke tab Tema lalu  kalian klik Edit HTML
  3. Letakkan kode CSS di bawah ini di atas kode ]]></skin> atau </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;}


Lalu kalian masukkan kode  HTML berikut pada tampilan web yang ingin menampilkan form



<div class="login"><div class="login-container"><div class="login-body"><div class="title color white text-left">MASUK</div><div class="content"><form><div class="form-title color white">Silahkan masukan alamat email anda untuk Login</div><div class="input-group"><div class="box-12"><div class="box-6 box-merge"><div class="button facebook "><!-- react-text: 14 --><i class="fa fa-facebook" aria-hidden="true"></i> Facebook<!-- /react-text --><a href="/login/facebook/" class="link-overlay" style="cursor: pointer;"> </a></div></div><div class="box-6 box-merge"><div class="button google"><!-- react-text: 18 --><i class="fa fa-google" aria-hidden="true"></i> Google<!-- /react-text --><a href="/login/google/" class="link-overlay" style="cursor: pointer;"> </a></div></div><div class="clear"></div></div><div class="clear"></div></div><div class="input-group"><input type="text" placeholder="Email atau Username" value=""></div><div class="input-group"><div class="box-12"><button type="submit" class="button button-magenta" id="login-submit">SELANJUTNYA</button></div><div class="clear"></div></div></form></div><div class="to-register color white"><!-- react-text: 29 -->Belum punya akun? <!-- /react-text --><strong><a href="/register/" class="color white">Daftar sekarang </a></strong></div></div></div>
  <center>
<div id="enterblogger">
 SOURCE BY ENTERBLOGGER
  </div>
  </center>
     <div class="footer--floating"><div class="select-tabs"><ul class="select-tab-list"></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 src="../../assets/images/login/log-failed.png" class="login-fail" alt=""><div class="title color white">LOGIN GAGAL</div><div class="subtitle color white">Alamat email yang anda masukkan belum terdaftar. Silahkan daftar sekarang dengan menekan tombol di bawah ini.</div><div class="button button-magenta"><!-- react-text: 56 -->DAFTAR SEKARANG<!-- /react-text --><a href="/register/" class="link-overlay"> </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 src="../../assets/images/login/log-failed.png" class="login-fail" alt=""><div class="title color white">LOGIN GAGAL</div><div class="subtitle color white">Password yang anda gunakan salah. Silahkan memasukkan password yang benar, atau tekan tombol di bawah untuk reset password.</div><div class="button button-magenta"><!-- react-text: 66 -->Reset Password<!-- /react-text --><a href="/reset" class="link-overlay"> </a></div><div class="popup-close"></div></div></div></div>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
Nah itulah artikel kali ini yang bisa saya bagikan ke kalian semoga bermanfaat  dan kalian bisa membuatnya.

Saya mendapatkan kode dari sebuah blog yang sangat keren yaitu enterblogger.com kalian bisa jalan-jalan di blog tersebut, pasti nanti kalian kan mendapat banyak ilmu disana.

Sekian dari saya terima kasih dan sampai jumpa lagi..

Baca juga :

No comments:

Post a Comment

to Top