Membuat Form Login Google di Blog dengan CSS

Membuat Form Login Google di Blog dengan CSS - Tidak sama persis! Tapi hanya sebagai contoh saja dan juga merupakan iseng-iseng saya dan form yang dibuat juga tidak bekerja seperti aslinya namun sebagai pembelajaran mungkin juga bermanfaat. Form login yang saya buat ini saya tiru seperti form login Google, dari segi tampilan hampir nyaris sama dan sempurna. Meskipun dari segi tampilannya hampir sama persis namun untuk kode yang digunakan tentunya tidak sama

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

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>

* Untuk link gambar ganti dengan link gambar Anda

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 :)