Sama seperti form input yang pernah saya buat sebelumnya, form login Google ini sangat sederhana dengan hanya menggunakan kode css saja, namun akan sangat berbeda sekali jika diterapkan dan membuatnya bekerja karena akan dibutuhkan kode script tertentu, seperti javascript atau php. Karena hanya sebagai demo saja, berikut tampilan form login Google di blog yang saya buat menggunakan css
Masuk dengan Akun Google Anda
Bagaimana tertarik untuk memasang tutorial membuat form login Google didalam artikel ini? Selain form login seperti diatas, bisa juga memasang form lainnya yang juga pernah saya bahas yaitu kontak form
Cara Membuat Form Login Google
Untuk membuat form login ini silahkan salin kode css berikut ini kedalam template blog Anda.login-form {
margin:0 auto;
width:320px;
}
.login-form h1 {
line-height:40px;
font-size:15px;
color:#555;
text-align:center;
}
.login {
position:relative;
margin:0 auto;
padding:20px 20px 20px;
width:310px;
background-color:#f7f7f7;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
-moz-box-shadow:0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login img {
width:96px;
height:96px;
margin:10px auto 10px;
display:block;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
}
.login input {
font-family:Arial, Tahoma, Verdana, sans-serif;
}
.login input[type=text], .login input[type=password] {
display:block;
font-size:16px;
padding:0 10px;
width:100%;
height:42px;
color:#404040;
background:#fff;
position:relative;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.login input[type=password] {
margin-top:-20px;
}
.login input[type=text]:hover, .login input[type=password]:hover {
border:1px solid #b9b9b9;
-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
}
.login .submit, .login input[type=submit] {
width:100%;
text-align:center;
font-weight:normal;
height:38px;
margin-bottom:10px;
padding:0 5px;
font-size:16px;
color:#fff;
background:#357ae8;
border-radius:3px;
text-transform:none;
}
.login .remember {
width:100%;
}
.login .remember .checkbox {
float:left;
}
.login .remember .login-help {
float:right;
margin-top:-18px;
color:#427fed;
}
.login .remember .login-help a{
font-size:12px;
color:#427fed;
text-align:left;
}
.login .remember .login-help:hover {
text-decoration:underline;
}
:-moz-placeholder {
color:#c9c9c9 !important;
font-size:14px;
}
::-webkit-input-placeholder {
color:#ccc;
font-size:14px;
}Dan pasang kode htmlnya berikut ini. Untuk kode html bisa dipasang dimanapun, di sidebar atau didalam blog
<div class="login-form">
<h1>Masuk dengan Akun Google Anda</h1>
<div class="login">
<img src="https://lh4.googleusercontent.com/--ZR4TRLpksw/AAAAAAAAAAI/AAAAAAAACGo/H6Ad3Um9u9U/s120-c/photo.jpg" />
<form action="/" method="post">
<input name="login" placeholder="Email" type="text" value="" />
<input name="password" placeholder="Sandi" type="password" value="" />
<input class="submit" name="commit" type="submit" value="Masuk" />
<div class="remember">
<input class="checkbox" type="checkbox" />Tetap masuk
<a class="login-help" href="https://accounts.google.com/RecoverAccount?continue=https://www.google.co.id/" rel="nofollow" target="_blank">Butuh bantuan ?</a></div>
</form>
</div>
</div>Selama pembuatan form login Google ini, ada sebuah pertanyaan yang terbesit dibenak saya yaitu, bisakah memasang form login Google yang sebenarnya kedalam blog dengan tampilan yang sama seperti aslinya atau seperti yang terlihat pada tutorial artikel ini?
Untuk form aslinya mungkin bisa dibahas lain waktu, yang penting sekarang kita sudah mengetahui kalau membuat form login Google di blog juga bisa dilakukan. Selanjutnya silahkan tinggalkan komentar Anda :)
