Nich setelah modifikasi beberapa jam akhirnya selesai juga...login area untuk blogger yang bisa kita taruh di blog dengan html/javascript dengan mudah...ukuran bisa anda sesuaikan sendiri...hehe...

Langsung saja codingnya sbb...
<html>
    <head>
        <style type="text/css">
#gaia_loginform {
    background-color: #FFFFFF;
    background-image: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE);
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.2), 0 3px 0 #FFFFFF, 0 4px 0 rgba(0, 0, 0, 0.2), 0 6px 0 #FFFFFF, 0 7px 0 rgba(0, 0, 0, 0.2);
    height: 110px;
    padding: 15px;
    position: absolute;
    width: 200px;
    z-index: 0;
}
#gaia_loginform:before {
    border: 1px dashed #CCCCCC;
    bottom: 5px;
    box-shadow: 0 0 0 1px #FFFFFF;
    content: "";
    left: 5px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: -1;
}
h1 {
    color: #666666;
    font: 14px/1 Verdana,Helvetica;
    letter-spacing: 2px;
    top: -2px;
    margin: 0 0 5px;
    position: relative;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 0 rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
}
h1:after, h1:before {
    background-color: #777777;
    content: "";
    height: 1px;
    position: absolute;
    top: 8px;
    width: 40px;
}
h1:after {
    background-image: -moz-linear-gradient(left center , #777777, #FFFFFF);
    right: 0;
}
h1:before {
    background-image: -moz-linear-gradient(right center , #777777, #FFFFFF);
    left: 0;
}

#Email, #Passwd {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZff2hxFWHvV6EV4jWuKsz3Kp3GW4zkm_SG9c8Q_DLzQ6dEFytU1rPaP_MVVfiqZ2YlIlaOk7z5vCk72g3Si5eHUFjv2gkM62PgoYbIZyXPGOgjha1HruqFmtDz5wCZI69FRI5giTHHLHC/s1600/login-sprite.png") no-repeat scroll 0 0 #F1F1F1;
    border: 1px solid #CCCCCC;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 1px #CCCCCC inset, 0 1px 0 #FFFFFF;
    margin: 0 0 10px;
    padding: 5px 5px 5px 25px;
    width: 200px;
    bottom: 5px;
}
#Email {
    background-position: 5px -12px !important;
}
#Passwd {
    background-position: 5px -61px !important;
}
#Email:focus, #Passwd:focus {
    background-color: #FFFFFF;
    border-color: #E8C291;
    box-shadow: 0 0 0 1px #E8C291 inset;
    outline: medium none;
}

#signIn {
    background-color: #FFB94B;
    background-image: -moz-linear-gradient(center top , #FDDB6F, #FFB94B);
    border-color: #D69E31 #E3A037 #D5982D;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    color: #8F5A0A;
    cursor: pointer;
    float: left;
    font: bold 14px Arial,Helvetica;
    height: 20px;
    padding: 0;
    right: 50px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    width: 80px;
}
#signIn:hover, #signIn:focus {
    background-color: #FDDB6F;
    background-image: -moz-linear-gradient(center top , #FFB94B, #FDDB6F);
}
#signIn:active {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
    outline: medium none;
}
#signIn::-moz-focus-inner {
    border: medium none;
    color: #3151A2;
    float: right;
    line-height: 12px;
}
        </style>
    </head>

    <body>
  
        <div class="sign-in">
            <div class="signin-box">
                <form method="post" action="https://accounts.google.com/ServiceLoginAuth" id="gaia_loginform" novalidate="">
                    <h1>LOGIN AREA</h1>
                    <input type="hidden" value="http://www.blogger.com/home" id="continue" name="continue">
                    <input type="hidden" value="http://www.blogger.com/home" id="followup" name="followup">
                    <input type="hidden" value="blogger" id="service" name="service">
                    <input type="hidden" value="-2776572753278298431" id="dsh" name="dsh">
                    <input type="hidden" value="start" id="ltmpl" name="ltmpl">
                    <input type="hidden" value="vNiIbuu7S8w" name="GALX">
                    <input type="hidden" value="1" name="pstMsg" id="pstMsg">
                    <input type="hidden" value="" name="dnConn" id="dnConn">
                    <input type="hidden" value="youtube:9668:1" name="checkConnection" id="checkConnection">
                    <input type="hidden" value="youtube" name="checkedDomains" id="checkedDomains">
                    <input type="hidden" value="" id="timeStmp" name="timeStmp">
                    <input type="hidden" value="" id="secTok" name="secTok">
                    <input type="hidden" value="☃" name="_utf8" id="_utf8">
                    <input type="hidden" value="js_disabled" id="bgresponse" name="bgresponse">
                    <div class="email-div">
                    <input type="email" required="" autofocus="" placeholder="Email" id="Email" name="Email" spellcheck="false"><br/>
                    </div>
                    <div class="passwd-div">
                    <input type="password" required="" placeholder="Passwd" id="Passwd" name="Passwd"><br/>
                    </div>
                    <input type="submit" value="Sign in" id="signIn" name="signIn" class="g-button g-button-submit">
                    <label onclick="" class="remember">
                    <input type="checkbox" checked="checked" value="yes" id="PersistentCookie" name="PersistentCookie">
                    Stay signed in
                    </label>
                    <input type="hidden" value="1" name="rmShown">
                </form>
            </div>
        </div>
    </body>
</html>
Semoga bermanfaat ya...
Gunakan dengan bijak...hehe...(kayak apa aja)...

1 komentar Blogger 1 Facebook

Mohon maaf bila blog ini tidak fokus hanya di software, karena saya ingin semua orang dapat mendapatkan ilmu yang ada di perkuliahan...

Semoga yang ada di blog ini bermanfaat...
Terikasih sudah mau berkunjung...

 
Ozan Hacker | Free Software and Tutorial. © . All Rights Reserved. Powered by Blogger
Top