Cara Menciptakan Sajian Log-In Keren
Cara Buat
Modal Loggin Form
Modal Loggin Form
Tombol log in atau modal form ialah sebuah formulir untuk masuk atau log in ke suatu halaman, modal form ini sangat cocok bagi anda yang mempunyai perusahaan yang mengharuskan seseorang harus log in dulu untuk masuk ke web perusahaan tersebut, namun tidak ada salah nya bagi anda yang ingin memakai form ini untuk formulir berlangganan.
Cara menciptakan tombol log in / modal form
Langkah menciptakan tombol log in / modal form menyerupai yang di ajarkan w3school sebagai berikut1. Dalam dasboard blog pilih Template > Edit HTML
2. Taruh aba-aba berikut di atas aba-aba </head> dalam templat
<style> body {font-family: Arial, Helvetica, sans-serif;} /* Full-width input fields */ input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } /* Set a style for all buttons */ button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } button:hover { opacity: 0.8; } /* Extra styles for the cancel button */ .cancelbtn { width: auto; padding: 10px 18px; background-color: #f44336; } /* Center the image and position the close button */ .imgcontainer { text-align: center; margin: 24px 0 12px 0; position: relative; } img.avatar { width: 40%; border-radius: 50%; } .container { padding: 16px; } span.psw { float: right; padding-top: 16px; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ padding-top: 60px; } /* Modal Content/Box */ .modal-content { background-color: #fefefe; margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ } /* The Close Button (x) */ .close { position: absolute; right: 25px; top: 0; color: #000; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: red; cursor: pointer; } /* Add Zoom Animation */ .animate { -webkit-animation: animatezoom 0.6s; animation: animatezoom 0.6s } @-webkit-keyframes animatezoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} } @keyframes animatezoom { from {transform: scale(0)} to {transform: scale(1)} } /* Change styles for span and cancel button on extra small screens */ @media screen and (max-width: 300px) { span.psw { display: block; float: none; } .cancelbtn { width: 100%; } } </style> 3. Untuk memanggil aba-aba di atas copy aba-aba di bawah dan taruh di mana saja dalam Tata Letak dasboard blog anda
Dashboard >Layout >Add Widget > Widget Html/java script > aba-aba di sini
Atau anda dapat taruh kodenya dalam aba-aba <body>
<h2>Modal Login Form</h2> <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button> <div id="id01" class="modal"> <form class="modal-content animate" action="/action_page.php"> <div class="imgcontainer"> <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Cara Membuat Menu Log-In Keren">×</span> <img src="img_avatar2.png" alt=" Tombol log in atau modal form ialah sebuah formulir untuk masuk atau log in ke suatu hal Cara Membuat Menu Log-In Keren" class="avatar"> </div> <div class="container"> <label for="uname"><b>Username</b></label> <input type="text" placeholder="Enter Username" name="uname" required> <label for="psw"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <button type="submit">Login</button> <label> <input type="checkbox" checked="checked" name="remember"> Remember me </label> </div> <div class="container" style="background-color:#f1f1f1"> <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button> <span class="psw">Forgot <a href="#">password?</a></span> </div> </form> </div> <script> // Get the modal var modal = document.getElementById('id01'); // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> Keterangan
- Ganti /action_page.php di atas dengan url halaman log in anda
- Ganti judul yang sesuai <h2>Modal Login Form</h2>
- Kalau ingin mengganti gambar taruh url gambar di <img src="img_avatar2.png" alt=" Tombol log in atau modal form ialah sebuah formulir untuk masuk atau log in ke suatu hal Cara Membuat Menu Log-In Keren"class="avatar">
Begitulah cara menciptakan modal atau tombol login dalam blog nantikan update artikel yang lebih baik dan bermanfaat.