Cara Membuat Form Login Seperti Jalantikus

Cara Membuat Form Login itu mudah sobat, Form login jalantikus ini sangat mudah dibuat yang susah itu Mengimplementasikannya ke servers hosting, karena butuh keahlian Php, dan kode sejenisnya.

Tapi kali ini tidak membahas mengenai cara tersebut, admin hanya membagikan skrip atau kode Form yang digunakan oleh Jalantikus. Jika sobat adalah penulis jalantikus, Mungkin sudah tau seperti apa tampilannya.

Lagi lagi jalantikus ya hehe, Kenapa sih dengan jalantikus ? Yups karena admin enterblogger terinpirasi dari sana, ada banyak kelebihan kelebihan di situs tersebut. Tidak usah panjang panjang berbicaranya, langsung check ke tutorial aja ya sob.

1. Login ke Blogger

2. Lihat tab Tema > Edit HTML

3. Masukkan CSS dibawah ini, Tepat diatas kode ]]></b: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;}

Jika sudah, Masukkan kode HTML berikut ini, Pada Tampilan situs 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"/>

LIHAT DEMO

Sekian artikel dari enterblogger, Singkat padat & jelas. Semoga bisa bermanfaat, sampai berjumpa lagi di artikel selanjutnya ya sob.
Sampai jumpa di internet+_=

Note : Tidak ada Unsur ilegal diartikel ini, Semua ini hanya untuk Pembelajaran semata, sebagaimana yang dikatakan oleh babang hacker, Bahwa "pengetahuan adalah milik semua orang"

Share this post