Free - Cara Menciptakan Form Login Menyerupai Jalantikus

Cara Membuat Form Login itu gampang sobat, Form login jalantikus ini sangat gampang dibentuk yang susah itu Mengimplementasikannya ke servers hosting, sebab butuh keahlian Php, dan instruksi sejenisnya.

Tapi kali ini tidak membahas mengenai cara tersebut, admin hanya membagikan skrip atau instruksi Form yang dipakai oleh Jalantikus. Jika teman ialah penulis jalantikus, Mungkin sudah tau ibarat apa tampilannya.

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

1. Login ke Blogger

2. Lihat tab Tema > Edit HTML

3. Masukkan CSS dibawah ini, Tepat diatas instruksi ]]></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 instruksi 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 kini </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=" Cara Membuat Form Login itu gampang teman Free -  Cara Membuat Form Login Seperti Jalantikus"><div class="title color white">LOGIN GAGAL</div><div class="subtitle color white">Alamat email yang anda masukkan belum terdaftar. Silahkan daftar kini 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=" Cara Membuat Form Login itu gampang teman Free -  Cara Membuat Form Login Seperti Jalantikus"><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 dapat bermanfaat, hingga 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 ialah milik semua orang"