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

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
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 :)
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 AndaSelama 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 :)
terus kalau sudah log in bagemana
BalasHapusga ada terusanya
Fungsinya untuk apa kalo di taruh di blog?
BalasHapusasyik juga ya buk kalau blog kita juga bisa dipasang form log ini, jadi untuk masuk ke dash board blogger bisa lebih cepat dan mudah ;)
BalasHapustambah ilmu.. makasih ya mbk
BalasHapus