kloning login tampilan dari gmail(editan sendiri) ~ Dwi Maslikhatun

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Almail: Email from Alelta</title>
<meta name="description" content="7+ GB of storage, less spam, and mobile access. Amail is email that's intuitive, efficient, and useful. And maybe even fun.">
<link rel="icon" type="image/ico" href="//mail.google.com/favicon.ico">
<style type="text/css">

html, body, div, h1, h2, h3, h4, h5, h6, p, img, dl,
dt, dd, ol, ul, li, table, tr, td, form, object, embed,
article, aside, canvas, command, details, figcaption,
figure, footer, group, header, hgroup, mark, menu,
meter, nav, output, progress, section, summary,
time, audio, video {
margin: 0;
padding: 0;
border: 0;
}
article, aside, details, figcaption, figure, footer,
header, hgroup, menu, nav, section {
display: block;
}
html {
font: 81.25% arial, helvetica, sans-serif;
background: #fff;
color: #333;
line-height: 1;
direction: ltr;
}
a {
color: #15c;
text-decoration: none;
}
a:active {
color: #d14836;
}
a:hover {
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
color: #222;
font-size: 1.54em;
font-weight: normal;
line-height: 24px;
margin: 0 0 .46em;
}
p {
line-height: 17px;
margin: 0 0 1em;
}
ol, ul {
list-style: none;
line-height: 17px;
margin: 0 0 1em;
}
li {
margin: 0 0 .5em;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
strong {
color: #222;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
}
</style>
<style type="text/css">
html, body {
position: absolute;
height: 100%;
min-width: 100%;
}
.wrapper {
position: relative;
min-height: 100%;
}

.content {
margin: 0 auto;
width: 650px;
padding: 0 44px;
}
.google-header-bar {
height: 71px;
background: #f5f5f5;
border-bottom: 1px solid #e5e5e5;
overflow: hidden;
}
.header .logo {
margin: 18px 0 0 -1px;
float: left;
}
.header .signin,
.header .signup {
margin: 28px 0 0;
float: right;
font-weight: bold;
}
.header .signup-button {
margin: 22px 0 0;
float: right;
}
.header .signup-button a {
position: relative;
top: -1px;
margin: 0 0 0 1em;
}
.main {
padding-top: 23px;
padding-bottom: 125px;
}
.main h1:first-child {
margin: 0 0 .92em;
}
.google-footer-bar {
position: absolute;
bottom: 0;
height: 35px;
width: 100%;
border-top: 1px solid #ebebeb;
overflow: hidden;
}
.footer {
padding-top: 9px;
font-size: .85em;
white-space: nowrap;
line-height: 0;
}
.footer ul {
color: #999;
float: left;
max-width: 80%;
}
.footer ul li {
display: inline;
padding: 0 1.5em 0 0;
}
.footer form {
text-align: right;
}
.footer form .lang-chooser {
max-width: 20%;
}
.announce-bar {
position: absolute;
bottom: 35px;
height: 33px;
z-index: 2;
width: 100%;
background: #f9edbe;
border-top: 1px solid #efe1ac;
border-bottom: 1px solid #efe1ac;
overflow: hidden;
}
.announce-bar .message {
font-size: .85em;
line-height: 33px;
margin: 0;
}
.announce-bar a {
margin: 0 0 0 1em;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: '.';
clear: both;
height: 0;
}
* html .clearfix {
zoom: 1;
}
*:first-child+html .clearfix {
zoom: 1;
}
</style>

<style type="text/css">
input[type=email],
input[type=password],
input[type=text],
input[type=url] {
display: inline-block;
height: 29px;
margin: 0;
padding-left: 8px;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
input[type=email]:hover,
input[type=password]:hover,
input[type=text]:hover,
input[type=url]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
input[type=email]:focus,
input[type=password]:focus,
input[type=text]:focus,
input[type=url]:focus {
outline: none;
border: 1px solid #4d90fe;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
input[type=email][disabled=disabled],
input[type=password][disabled=disabled],
input[type=text][disabled=disabled],
input[type=url][disabled=disabled] {
border: 1px solid #e5e5e5;
background: #f5f5f5;
}
input[type=email][disabled=disabled]:hover,
input[type=password][disabled=disabled]:hover,
input[type=text][disabled=disabled]:hover,
input[type=url][disabled=disabled]:hover {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
input[type=checkbox],
input[type=radio] {
-webkit-appearance: none;
appearance: none;
width: 13px;
height: 13px;
margin: 0;
cursor: pointer;
vertical-align: bottom;
background: #fff;
border: 1px solid #dcdcdc;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
input[type=checkbox]:active,
input[type=radio]:active {
border-color: #c6c6c6;
background: #ebebeb;
}
input[type=checkbox]:hover {
border-color: #c6c6c6;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
}
input[type=radio] {
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
width: 15px;
height: 15px;
}
input[type=checkbox]:checked,
input[type=radio]:checked {
background: #fff;
}
input[type=radio]:checked::after {
content: '';
display: block;
position: relative;
top: 3px;
left: 3px;
width: 7px;
height: 7px;
background: #666;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
}
input[type=checkbox]:checked::after {
content: url(//ssl.gstatic.com/ui/v1/menu/checkmark.png);
display: block;
position: absolute;
top: -6px;
left: -5px;
}
input[type=checkbox]:focus {
outline: none;
border-color:#4d90fe;
}
.g-button {
display: inline-block;
min-width: 54px;
text-align: center;
color: #555;
font-size: 11px;
font-weight: bold;
height: 27px;
padding: 0 8px;
line-height: 27px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all 0.218s;
-moz-transition: all 0.218s;
-ms-transition: all 0.218s;
-o-transition: all 0.218s;
transition: all 0.218s;
border: 1px solid #dcdcdc;
border: 1px solid rgba(0,0,0,0.1);
background-color: #f5f5f5;
background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));
background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: default;
}
*+html .g-button {
min-width: 70px;
}
button.g-button,
input[type=submit].g-button {
height: 29px;
line-height: 29px;
vertical-align: bottom;
margin: 0;
}
*+html button.g-button,
*+html input[type=submit].g-button {
overflow: visible;
}
.g-button:hover {
border: 1px solid #c6c6c6;
color: #333;
text-decoration: none;
-webkit-transition: all 0.0s;
-moz-transition: all 0.0s;
-ms-transition: all 0.0s;
-o-transition: all 0.0s;
transition: all 0.0s;
background-color: #f8f8f8;
background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));
background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.g-button:active {
background-color: #f6f6f6;
background-image: -webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#f1f1f1));
background-image: -webkit-linear-gradient(top,#f6f6f6,#f1f1f1);
background-image: -moz-linear-gradient(top,#f6f6f6,#f1f1f1);
background-image: -ms-linear-gradient(top,#f6f6f6,#f1f1f1);
background-image: -o-linear-gradient(top,#f6f6f6,#f1f1f1);
background-image: linear-gradient(top,#f6f6f6,#f1f1f1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.g-button:visited {
color: #666;
}
.g-button-submit {
border: 1px solid #3079ed;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe;
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
background-image: linear-gradient(top,#4d90fe,#4787ed);
}
.g-button-submit:hover {
border: 1px solid #2f5bb7;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#357ae8));
background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
background-image: linear-gradient(top,#4d90fe,#357ae8);
}
.g-button-submit:active {
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.g-button-share {
border: 1px solid #29691d;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #3d9400;
background-image: -webkit-gradient(linear,left top,left bottom,from(#3d9400),to(#398a00));
background-image: -webkit-linear-gradient(top,#3d9400,#398a00);
background-image: -moz-linear-gradient(top,#3d9400,#398a00);
background-image: -ms-linear-gradient(top,#3d9400,#398a00);
background-image: -o-linear-gradient(top,#3d9400,#398a00);
background-image: linear-gradient(top,#3d9400,#398a00);
}
.g-button-share:hover {
border: 1px solid #2d6200;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #368200;
background-image: -webkit-gradient(linear,left top,left bottom,from(#3d9400),to(#368200));
background-image: -webkit-linear-gradient(top,#3d9400,#368200);
background-image: -moz-linear-gradient(top,#3d9400,#368200);
background-image: -ms-linear-gradient(top,#3d9400,#368200);
background-image: -o-linear-gradient(top,#3d9400,#368200);
background-image: linear-gradient(top,#3d9400,#368200);
}
.g-button-share:active {
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.g-button-red {
border: 1px solid transparent;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
text-transform: uppercase;
background-color: #d14836;
background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#d14836));
background-image: -webkit-linear-gradient(top,#dd4b39,#d14836);
background-image: -moz-linear-gradient(top,#dd4b39,#d14836);
background-image: -ms-linear-gradient(top,#dd4b39,#d14836);
background-image: -o-linear-gradient(top,#dd4b39,#d14836);
background-image: linear-gradient(top,#dd4b39,#d14836);
}
.g-button-red:hover {
border: 1px solid #b0281a;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #c53727;
background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#c53727));
background-image: -webkit-linear-gradient(top,#dd4b39,#c53727);
background-image: -moz-linear-gradient(top,#dd4b39,#c53727);
background-image: -ms-linear-gradient(top,#dd4b39,#c53727);
background-image: -o-linear-gradient(top,#dd4b39,#c53727);
background-image: linear-gradient(top,#dd4b39,#c53727);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
-ms-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
-o-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.g-button-red:active {
border: 1px solid #992a1b;
background-color: #b0281a;
background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#b0281a));
background-image: -webkit-linear-gradient(top,#dd4b39,#b0281a);
background-image: -moz-linear-gradient(top,#dd4b39,#b0281a);
background-image: -ms-linear-gradient(top,#dd4b39,#b0281a);
background-image: -o-linear-gradient(top,#dd4b39,#b0281a);
background-image: linear-gradient(top,#dd4b39,#b0281a);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.g-button-white {
border: 1px solid #dcdcdc;
color: #666;
background: #fff;
}
.g-button-white:hover {
border: 1px solid #c6c6c6;
color: #333;
background: #fff;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.g-button-white:active {
background: #fff;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.g-button-red:visited,
.g-button-share:visited,
.g-button-submit:visited {
color: #fff;
}
.g-button-submit:focus,
.g-button-share:focus,
.g-button-red:focus {
-webkit-box-shadow: inset 0 0 0 1px #fff;
-moz-box-shadow: inset 0 0 0 1px #fff;
box-shadow: inset 0 0 0 1px #fff;
}
.g-button-share:focus {
border-color: #29691d;
}
.g-button-red:focus {
border-color: #d14836;
}
.g-button-submit:focus:hover,
.g-button-share:focus:hover,
.g-button-red:focus:hover {
-webkit-box-shadow: inset 0 0 0 1px #fff, 0 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 0 0 1px #fff, 0 1px 1px rgba(0,0,0,0.1);
box-shadow: inset 0 0 0 1px #fff, 0 1px 1px rgba(0,0,0,0.1);
}
.g-button img {
display: inline-block;
margin: -3px 0 0;
opacity: .55;
vertical-align: middle;
}
*+html .g-button img {
margin: 4px 0 0;
}
.g-button:hover img {
opacity: .72;
}
.g-button:active img {
opacity: 1;
}
.errormsg {
margin: .5em 0 0;
display: block;
color: #dd4b39;
line-height: 17px;
}
input[type=email].form-error,
input[type=password].form-error,
input[type=text].form-error,
input[type=url].form-error {
border: 1px solid #dd4b39;
}
.help-link {
background: #dd4b39;
padding: 0 5px;
color: #fff;
font-weight: bold;
display: inline-block;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
text-decoration: none;
position: relative;
top: 0px;
}
.help-link:visited {
color: #fff;
}
.help-link:hover {
opacity: .7;
color: #fff;
}
</style>
<style type="text/css">
.content {
width: auto;
max-width: 1000px;
min-width: 780px;
}
.product-info {
margin: 0 385px 0 0;
}
.product-info h3 {
font-size: 1.23em;
font-weight: normal;
}
.product-info a:visited {
color: #61c;
}
.product-info .g-button:visited {
color: #666;
}
.sign-in {
width: 335px;
float: right;
}
.signin-box,
.accountchooser-box {
margin: 12px 0 0;
padding: 20px 25px 15px;
background: #f5f5f5;
border: 1px solid #e5e5e5;
}
.product-headers {
margin: 0 0 1.5em;
}
.product-headers h1 {
color: #dd4b39;
font-size: 25px;
margin: 0 !important;
}
.product-headers h2 {
font-size: 16px;
margin: .4em 0 0;
}
.features {
overflow: hidden;
margin: 2em 0 0;
}
.features li {
margin: 3px 0 2em;
}
.features img {
float: left;
margin: -3px 0 0;
}
.features p {
margin: 0 0 0 68px;
}
.features .title {
font-size: 16px;
margin-bottom: .3em;
}
.features.no-icon p {
margin: 0;
}
.features .small-title {
font-size: 1em;
font-weight: bold;
}
.notification-bar {
background: #f9edbe;
padding: 8px;
}
</style>
<style type="text/css">
.signin-box h2 {
font-size: 16px;
line-height: 16px;
height: 16px;
margin: 0 0 1.2em;
position: relative;
}
.signin-box h2 strong {
display: inline-block;
position: absolute;
right: 0;
top: 1px;
height: 19px;
width: 52px;
background: transparent url(//ssl.gstatic.com/accounts/ui/google-signin-flat.png) no-repeat;
}
.signin-box label {
display: block;
margin: 0 0 1.5em;
}
.signin-box input[type=text],
.signin-box input[type=password] {
width: 100%;
height: 32px;
font-size: 15px;
}
.signin-box .email-label,
.signin-box .passwd-label {
font-weight: bold;
margin: 0 0 .5em;
display: block;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.signin-box .reauth {
display: inline-block;
font-size: 15px;
height: 29px;
line-height: 29px;
margin: 0;
}
.signin-box label.remember {
display: inline-block;
vertical-align: top;
margin: 9px 0 0;
}
.signin-box .remember-label {
font-weight: normal;
color: #666;
line-height: 0;
padding: 0 0 0 .4em;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.signin-box input[type=submit] {
margin: 0 1.5em 1.2em 0;
height: 32px;
font-size: 13px;
}
.signin-box ul {
margin: 0;
}
.signin-box .training-msg {
padding: .5em 8px;
background: #f9edbe;
}
.signin-box .training-msg p {
margin: 0 0 .5em;
}
</style>
<style type="text/css">
.mail ul.mail-links {
list-style: none;
margin: 0;
overflow: hidden;
}
.mail ul.mail-links li {
float: left;
margin: 0 20px 0 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="google-header-bar">

<div class="header content clearfix">
<a id="link-google" href="http://www.google.com/" >
<img class="logo" src="//www.google.com/images/logos/google_logo_41.png" alt="Google">
</a>
<span class="signup-button">
Buat Baru Amail?
<a id="link-signup" class="g-button g-button-red" href="http://mail.google.com/mail/signup">
Buat baru yah...???
</a>
</span>

</div>
</div>
<div class="main content clearfix">
<div class="sign-in">
<div class="signin-box">
<h2>Masuk <strong></strong></h2>
<form id="gaia_loginform" action="https://accounts.google.com/ServiceLoginAuth" method="post">
<input type="hidden"


name="continue" id="continue" value="https://mail.google.com/mail/"

>
<input type="hidden"


name="service" id="service" value="mail"

>

<input type="hidden"


name="rm" id="rm" value="false"

>
<input type="hidden"


name="dsh" id="dsh" value="4003433195156482795"

>
<input type="hidden"


name="ltmpl" id="ltmpl" value="default"

>
<input type="hidden"


name="hl" id="hl" value="en"

>
<input type="hidden"


name="ltmpl" id="ltmpl" value="default"

>
<input type="hidden"


name="scc" id="scc" value="1"

>
<input type="hidden"


name="ss" id="ss" value="1"

>
<input type="hidden"
         name="GALX"
         value="MvMLHPmnikk">
<input type="hidden"
    id="pstMsg"
    name="pstMsg"
    value="0">

<input type="hidden"
    id="dnConn"
    name="dnConn"
    value="">
<input type="hidden" name="timeStmp" id="timeStmp"
       value=''/>
<input type="hidden" name="secTok" id="secTok"
       value=''/>
<label>
<strong class="email-label">ID mu</strong>
<input type="text"


name="Email" id="Email" value=""

>
</label>
<label>
<strong class="passwd-label">Kode Rahasia</strong>
<input type="password" name="Passwd" id="Passwd"



>

</label>
<input type="submit" class="g-button g-button-submit" name="signIn" id="signIn"
      value="Masuk">
<label class="remember">
<input type="checkbox"
name="PersistentCookie" id="PersistentCookie" value="yes"

    checked="checked"
>
<strong class="remember-label">
Tetap masuk
</strong>
</label>
<input type="hidden" name="rmShown" value="1">
</form>

<ul>
<li>
<a id="link-forgot-passwd"
          href="https://accounts.google.com/RecoverAccount?service=mail&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F"
          target="_top">
tidak dapat mengakses akun Anda?
</a>
</li>
</ul>
</div>
</div>

<div class="product-info mail">
<div class="product-headers">
<h1>Almail</h1>
<h2>Pendekatan Alelta terhadap email.</h2>
</div>
<p>
Amail dibangun di atas gagasan bahwa email dapat lebih intuitif, efisien, dan berguna. Dan mungkin bahkan menyenangkan. Setelah semua, Gmail telah:
</p>
<ul class="features">
<li>

<img src="//www.google.com/images/icons/feature/filing_cabinet-g42.png" alt="">
<p class="title">Banyak ruang</p>
<p>
Over <span id=quota>2757.272164</span> megabyte (dan terus bertambah) dari penyimpanan gratis.
</p>
</li>
<li>

<img src="//www.google.com/images/icons/feature/nosign-r42.png" alt="">
<p class="title">Lebih sedikit spam</p>
<p>Jauhkan pesan yang tidak diinginkan keluar dari kotak masuk Anda.</p>
</li>
<li>
<img src="//www.google.com/images/icons/feature/mobile_phone-42.gif" alt="">
<p class="title">akses seluler</p>

<p>Dapatkan Gmail pada ponsel Anda. <a href="http://www.google.com/intl/en_ID/mobile/mail/#utm_source=en_ID-cpp-g4mc-gmhp&utm_medium=cpp&utm_campaign=en_ID">PELAJARI</a></p>
</li>
</ul>
<ul class="mail-links">
<li><a href="http://mail.google.com/mail/help/intl/en/about.html">
Tentang Amail</a></li>
<li><a href="http://mail.google.com/mail/help/intl/en/about_whatsnew.html">Fitur baru     !</a></li>
<li><a href="http://mail.google.com/mail/help/intl/en/switch.html">Pindah to Amail</a></li>

<li><a href="http://mail.google.com/mail/signup">Buat akun baru</a></li>
</ul>
<div id="highlight">
<h2>Berita terbaru dari Gmail</h2>
<div id="feed" class="post"></div>
<p class="feed-heading">Follow us:</p>
<ul id="feed-icons">
<li class="feed-blogger"><a href="http://gmailblog.blogspot.com/?utm_source=en-gmchicklet&utm_medium=et&utm_content=gmchicklet">Blogger</a></li>

<li class="feed-twitter"><a href="http://twitter.com/gmail">Twitter</a></li>
<li class="feed-facebook"><a href="http://www.facebook.com/Gmail">Facebook</a></li>
<li class="feed-buzz"><a href="http://www.google.com/profiles/googlebuzz#buzz">Buzz</a></li>
<ul>
</div>
</div>
<div id="cc_iframe_parent"></div>
</div>

<div class="announce-bar">
<div class="content">
<p class="message">
Welcome to Google's new sign-in page.
<a target="_blank" href="http://www.google.com/support/accounts/bin/answer.py?answer=1401722&topic=14129&hl=en">Read more</a>
</p>
</div>
</div>
<div class="google-footer-bar">

<div class="footer content clearfix">
<ul>
<li>© 2011 Google</li>
<li><a href="http://www.google.com/apps/intl/en/business/gmail.html#utm_medium=et&utm_source=gmail-signin-en&utm_campaign=crossnav" target="_blank">Gmail for Work</a></li>
<li><a href="http://mail.google.com/mail/help/intl/en/terms.html" target="_blank">Terms & Privacy</a></li>
<li><a href="http://mail.google.com/support/?hl=en" target="_blank">Help</a></li>

</ul>
</div>
</div>
</div>
<script type="text/javascript">
function gaia_setFocus() {
var f = null;
if (document.getElementById) {
f = document.getElementById('gaia_loginform');
}
if (f) {
if (f.Email && (f.Email.value == null || f.Email.value == '')) {
f.Email.focus();
} else if (f.Passwd) {
f.Passwd.focus();
}
}
}
window.onload = gaia_setFocus;
function gaia_onLoginSubmit() {
if (window.gaiacb_onLoginSubmit) {
return gaiacb_onLoginSubmit();
} else {
return true;
}
}
document.getElementById('gaia_loginform').onsubmit = gaia_onLoginSubmit;
var Ga=true,Gb=false;var Gd=function(a,b){var c=a;a&&typeof a=="string"&&(c=document.getElementById(a));if(b&&!c)throw new Gc(a);return c},Gc=function(a){this.id=a;this.toString=function(){return"No element found for id '"+this.id+"'"}};var Ge={},Gf;Gf=window.addEventListener?function(a,b,c){var d=function(a){var b=c.call(this,a);Gb===b&&Gg(a);return b},a=Gd(a,Ga);a.addEventListener(b,d,Gb);Gh(a,b).push(d);return d}:window.attachEvent?function(a,b,c){var a=Gd(a,Ga),d=function(){var b=window.event,d=c.call(a,b);Gb===d&&Gg(b);return d};a.attachEvent("on"+b,d);Gh(a,b).push(d);return d}:void 0;var Gi;
Gi=window.removeEventListener?function(a,b,c){a=Gd(a,Ga);a.removeEventListener(b,c,Gb)}:window.detachEvent?function(a,b,c){a=Gd(a,Ga);a.detachEvent("on"+b,c)}:void 0;var Gg=function(a){a.preventDefault?a.preventDefault():a.returnValue=Gb;return Gb},Gh=function(a,b){Ge[a]=Ge[a]||{};Ge[a][b]=Ge[a][b]||[];return Ge[a][b]};var Gj=function(){try{return new XMLHttpRequest}catch(a){for(var b=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"],c=0;c<b.length;c++)try{return new ActiveXObject(b[c])}catch(d){}}return null},Gk=function(){this.c=Gj();this.b={}};Gk.prototype.d=function(){};
Gk.prototype.send=function(a){var b=[],c;for(c in this.b){var d=this.b[c];b.push(c+"="+encodeURIComponent(d))}var b=b.join("&"),e=this.c,f=this.d;e.open("POST",a,Ga);e.setRequestHeader("Content-type","application/x-www-form-urlencoded");e.setRequestHeader("Content-length",String(b.length));e.onreadystatechange=function(){e.readyState==4&&f({status:e.status,text:e.responseText})};e.send(b)};
Gk.prototype.h=function(a){var b=this.d,c=this.c;c.open("GET",a,Ga);c.onreadystatechange=function(){c.readyState==4&&b({status:c.status,text:c.responseText})};c.send()};var Gm=function(a){this.e=a;this.i=this.j();if(this.e==null)throw new Gl("Empty module name");};Gm.prototype.j=function(){var a=window.location.pathname;return a&&a.indexOf("/accounts")==0?"/accounts/JsRemoteLog":"/JsRemoteLog"};
Gm.prototype.g=function(a,b,c){for(var d=this.i,e=this.e||"",d=d+"?module="+encodeURIComponent(e),a=a||"",d=d+"&type="+encodeURIComponent(a),b=b||"",d=d+"&msg="+encodeURIComponent(b),c=c||[],a=0;a<c.length;a++)d=d+"&arg="+encodeURIComponent(c[a]);try{var f=Math.floor(Math.random()*1E4),d=d+"&r="+String(f)}catch(g){}return d};Gm.prototype.send=function(a,b,c){var d=new Gk;d.b={};try{var e=this.g(a,b,c);d.h(e)}catch(f){}};Gm.prototype.a=function(a,b){this.send("ERROR",a,b)};
Gm.prototype.k=function(a,b){this.send("WARN",a,b)};Gm.prototype.f=function(a){var b=this;return function(){try{a.apply(null,arguments)}catch(c){throw b.a("Uncatched exception: "+c),c;}}};var Gl=function(a){this.l=a};var G=G||new Gm("check_connection"),Gn=function(a,b,c){var d=function(e){if(!(a!="*"&&e.origin.toLowerCase()!=a.toLowerCase()))e.data!=c?G.k("Received unexpected Message",[e.data,"Expected: "+c]):(b.value=a,Gi(window,"message",d),d=null)};return d},Go=function(){if(window.__CHECK_CONNECTION_CONFIG){var a=window.__CHECK_CONNECTION_CONFIG.iframeUri,b=window.__CHECK_CONNECTION_CONFIG.iframeOrigin,c=window.__CHECK_CONNECTION_CONFIG.connectivityElementId,d=window.__CHECK_CONNECTION_CONFIG.iframeParentElementId,
e=window.__CHECK_CONNECTION_CONFIG.msgContent;if(window.postMessage)if(a){var f=document.getElementById(c);f?(c=document.getElementById(d))?(Gf(window,"message",Gn(b,f,e)),b=c,d=window.document.createElement("iframe"),e=d.style,e.visibility="hidden",e.width="1px",e.height="1px",e.position="absolute",e.top="-100px",d.src=a,d.id="CheckConnectionIframe",b.appendChild(d)):G.a("Unable to locate the iframe anchor to appendconnection test iframe",["element id: "+d]):G.a("Unable to locate the input element to storeconnection test result",
["element id: "+c])}else G.a("Empty iframe URI")}},Gp=function(){if(window.__CHECK_CONNECTION_CONFIG){var a=window.__CHECK_CONNECTION_CONFIG.postMsgSupportElementId;if(window.postMessage){var b=document.getElementById(a);b?b.value="1":G.a("Unable to locate the input element to storepostMessage test result",["element id: "+a])}}};G_checkConnectionMain=G.f(Go);G_setPostMessageSupportFlag=G.f(Gp);

    window.__CHECK_CONNECTION_CONFIG = {

      iframeUri: 'https:\x2F\x2Faccounts.youtube.com\x2Faccounts\x2FCheckConnection?pmpo=https%3A%2F%2Faccounts.google.com\x26v=-101197993',

      iframeOrigin: 'https:\x2F\x2Faccounts.youtube.com',

      connectivityElementId: 'dnConn',

      iframeParentElementId: 'cc_iframe_parent',

      postMsgSupportElementId: 'pstMsg',

      msgContent: 'accessible'
    };

    G_setPostMessageSupportFlag();
    G_checkConnectionMain();

</script>
<style type=text/css>

</style>
<script type="text/javascript">
blogFeedUrl = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=' +
'http://www.blogger.com/feeds/6781693/posts/default&num=1&callback=loadBlogFeed';
function loadBlogFeed(r){
var container = document.getElementById('feed');
if (r.responseStatus == '200' && r.responseData.feed.entries.length > 0) {
var post = r.responseData.feed.entries[0];
var title = unescapePureXMLEntities(post.title);
var entry = unescapePureXMLEntities(cleanPostContent(post.content));
var link = post.link;
var date = post.publishedDate;
date = new Date(date).toDateString();
renderPost(title, entry, link, date);
} else {
renderNoPost();
}
}
function cleanPostContent(entry) {
entry = entry.replace(/<span>[^<]*<\/span>/, '');
entry = entry.replace(/<[^>]*>/g, '');
var snippet = entry.split(' ', 20);
snippet.pop();
return snippet.join(' ') + ' ...';
}
function unescapePureXMLEntities(str) {
return str.replace(/&([^;]+);/g, function(s, entity) {
switch (entity) {
case 'amp':
return '&';
case 'lt':
return '<';
      case 'gt':
        return '>';
case 'quot':
return '"';
default:
if (entity.charAt(0) == '#') {
var n = Number('0' + entity.substr(1));
if (!isNaN(n)){
return String.fromCharCode(n);
}
}
// For invalid entities we just return the entity
return s;
}
});
}
function renderPost(title, entry, link, date) {
var linkNode = document.createElement('a');
linkNode.href = link;
linkNode.appendChild(document.createTextNode(title));
var snippetDiv = document.createElement('div');
snippetDiv.className = 'snippet';
snippetDiv.appendChild(document.createTextNode(entry));
var dateDiv = document.createElement('div');
dateDiv.className = 'time';
dateDiv.appendChild(document.createTextNode(date));
var container = document.getElementById('feed');
container.appendChild(linkNode);
container.appendChild(dateDiv);
container.appendChild(snippetDiv);
}
function renderNoPost(){
var container = document.getElementById('feed');
container.innerHTML = '<a href="http://gmailblog.blogspot.com">' +
'The Official Gmail Blog</a>';
}
function importBlogJS() {
var scriptNode = document.createElement('script');
scriptNode.setAttribute('src', blogFeedUrl);
document.getElementsByTagName('head')[0].appendChild(scriptNode);
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-992684-1']);
_gaq.push(['_setDomainName', 'google.com']);
_gaq.push(['_addIgnoredRef', '.google.com']);
_gaq.push(['_setCookiePath', '/accounts/']);
_gaq.push(['_trackPageview', '/mail/gaia/homepage']);
_gaq.push(['_cookiePathCopy', '/mail/help/']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script>

<script type="text/javascript">
var BrowserSupport_={IsBrowserSupported:function(){var agt=navigator.userAgent.toLowerCase();var is_op=agt.indexOf("opera")!=-1;var is_ie=agt.indexOf("msie")!=-1&&document.all&&!is_op;var is_ie5=agt.indexOf("msie 5")!=-1&&document.all&&!is_op;var is_mac=agt.indexOf("mac")!=-1;var is_gk=agt.indexOf("gecko")!=-1;var is_sf=agt.indexOf("safari")!=-1;if(is_ie&&!is_op&&!is_mac){if(agt.indexOf("palmsource")!=
-1||agt.indexOf("regking")!=-1||agt.indexOf("windows ce")!=-1||agt.indexOf("j2me")!=-1||agt.indexOf("avantgo")!=-1||agt.indexOf(" stb")!=-1)return false;var v=BrowserSupport_.GetFollowingFloat(agt,"msie ");if(v!=null)return v>=5.5}if(is_gk&&!is_sf){var v=BrowserSupport_.GetFollowingFloat(agt,"rv:");if(v!=null)return v>=1.4;else{v=BrowserSupport_.GetFollowingFloat(agt,"galeon/");if(v!=null)return v>=
1.3}}if(is_sf){if(agt.indexOf("rv:3.14.15.92.65")!=-1)return false;var v=BrowserSupport_.GetFollowingFloat(agt,"applewebkit/");if(v!=null)return v>=312}if(is_op){if(agt.indexOf("sony/com1")!=-1)return false;var v=BrowserSupport_.GetFollowingFloat(agt,"opera ");if(v==null)v=BrowserSupport_.GetFollowingFloat(agt,"opera/");if(v!=null)return v>=8}if(agt.indexOf("pda; sony/com2")!=-1)return true;return false},
GetFollowingFloat:function(str,pfx){var i=str.indexOf(pfx);if(i!=-1){var v=parseFloat(str.substring(i+pfx.length));if(!isNaN(v))return v}return null}};var is_browser_supported=BrowserSupport_.IsBrowserSupported()
</script>
<script type=text/javascript>

</script>
<script>
window.onload = function() {
OnLoad();
FixForm();
importBlogJS();
}
</script>
</body>
</html>

kloning login tampilan dari gmail(editan sendiri)

Tidak ada komentar:

Posting Komentar

Unordered List

Popular Posts

Main Menu

All Collection1s

Main Menu

Text Widget

Links

Social Media Icons

Laporkan Penyalahgunaan

Mengenai Saya

Entri yang Diunggulkan

Story from HOUR...

Formulir Kontak

Pengikut

STATISTIK BLOG

Cari Blog Ini

Arsip Blog

Contact Us

Theme Support

Unordered List

Recent Posts

Random Products

Popular Products

Arsip Blog

Unordered List

Pages

Theme Support

Recent Posts

Contact Us

Text Widget