Cara Menciptakan Form Login Menyerupai Web Jalantikus
Akan tetapi saya tidak akan mengulas bagaimana cara mengimplementasikan form login ke server hosting. Saya hanya akan menawarkan skrip atau kodenya saja. Jika kalian penulis i jalan tikus maka kalian niscaya sudah tidak abnormal dengan dengan tampilannya.
Tanpa basa-basi lagi mari kita eksklusif ke tutorialnya, simak baik-baik ya semoga kalian tidak terlewat hehe.
Cara Membuat Login Seperti Web Jalantikus
Caranya singkat banget loh..
- Kalian masuk ke blogger
- Masuk ke tab Tema lalu kalian klik Edit HTML
- Letakkan arahan CSS di bawah ini di atas arahan ]]></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 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=""><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=""><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 sanggup saya bagikan ke kalian semoga bermanfaat dan kalian sanggup membuatnya.
Saya mendapat arahan dari sebuah blog yang sangat keren yaitu enterblogger.com kalian sanggup jalan-jalan di blog tersebut, niscaya nanti kalian kan mendapat banyak ilmu disana.
Sekian dari saya terima kasih dan hingga jumpa lagi.. Sumber https://www.maskalem.com/
