Ozan Hacker | Free Software and Tutorial.: Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTa5DN0F4q96puypjooVqI4pH5MFJTjmwh9MN52yGiJpfAtDJPxaogaY_qQbgIVqbBjPvjvNrHzK5xxSv4778f0hV80rLKWJ13clak_dZ60ZOmxGghcrM3XLGqcC7sQCXypoNgoltvg6cs/s1600/Untitled.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTa5DN0F4q96puypjooVqI4pH5MFJTjmwh9MN52yGiJpfAtDJPxaogaY_qQbgIVqbBjPvjvNrHzK5xxSv4778f0hV80rLKWJ13clak_dZ60ZOmxGghcrM3XLGqcC7sQCXypoNgoltvg6cs/s1600/Untitled.png" /></a></div>
 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...<br />
<br />
Langsung saja codingnya sbb...<br />
<blockquote class="tr_bq">
<html><br />    <head><br />        <style type="text/css"><br />#gaia_loginform {<br />    background-color: #FFFFFF;<br />    background-image: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE);<br />    border-radius: 3px 3px 3px 3px;<br />    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);<br />    height: 110px;<br />    padding: 15px;<br />    position: absolute;<br />    width: 200px;<br />    z-index: 0;<br />}<br />#gaia_loginform:before {<br />    border: 1px dashed #CCCCCC;<br />    bottom: 5px;<br />    box-shadow: 0 0 0 1px #FFFFFF;<br />    content: "";<br />    left: 5px;<br />    position: absolute;<br />    right: 5px;<br />    top: 5px;<br />    z-index: -1;<br />}<br />h1 {<br />    color: #666666;<br />    font: 14px/1 Verdana,Helvetica;<br />    letter-spacing: 2px;<br />    top: -2px;<br />    margin: 0 0 5px;<br />    position: relative;<br />    text-align: center;<br />    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 0 rgba(0, 0, 0, 0.5);<br />    text-transform: uppercase;<br />}<br />h1:after, h1:before {<br />    background-color: #777777;<br />    content: "";<br />    height: 1px;<br />    position: absolute;<br />    top: 8px;<br />    width: 40px;<br />}<br />h1:after {<br />    background-image: -moz-linear-gradient(left center , #777777, #FFFFFF);<br />    right: 0;<br />}<br />h1:before {<br />    background-image: -moz-linear-gradient(right center , #777777, #FFFFFF);<br />    left: 0;<br />}<br /><br />#Email, #Passwd {<br />    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZff2hxFWHvV6EV4jWuKsz3Kp3GW4zkm_SG9c8Q_DLzQ6dEFytU1rPaP_MVVfiqZ2YlIlaOk7z5vCk72g3Si5eHUFjv2gkM62PgoYbIZyXPGOgjha1HruqFmtDz5wCZI69FRI5giTHHLHC/s1600/login-sprite.png") no-repeat scroll 0 0 #F1F1F1;<br />    border: 1px solid #CCCCCC;<br />    border-radius: 5px 5px 5px 5px;<br />    box-shadow: 0 1px 1px #CCCCCC inset, 0 1px 0 #FFFFFF;<br />    margin: 0 0 10px;<br />    padding: 5px 5px 5px 25px;<br />    width: 200px;<br />    bottom: 5px;<br />}<br />#Email {<br />    background-position: 5px -12px !important;<br />}<br />#Passwd {<br />    background-position: 5px -61px !important;<br />}<br />#Email:focus, #Passwd:focus {<br />    background-color: #FFFFFF;<br />    border-color: #E8C291;<br />    box-shadow: 0 0 0 1px #E8C291 inset;<br />    outline: medium none;<br />}<br /><br />#signIn {<br />    background-color: #FFB94B;<br />    background-image: -moz-linear-gradient(center top , #FDDB6F, #FFB94B);<br />    border-color: #D69E31 #E3A037 #D5982D;<br />    border-radius: 3px 3px 3px 3px;<br />    border-style: solid;<br />    border-width: 1px;<br />    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;<br />    color: #8F5A0A;<br />    cursor: pointer;<br />    float: left;<br />    font: bold 14px Arial,Helvetica;<br />    height: 20px;<br />    padding: 0;<br />    right: 50px;<br />    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);<br />    width: 80px;<br />}<br />#signIn:hover, #signIn:focus {<br />    background-color: #FDDB6F;<br />    background-image: -moz-linear-gradient(center top , #FFB94B, #FDDB6F);<br />}<br />#signIn:active {<br />    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;<br />    outline: medium none;<br />}<br />#signIn::-moz-focus-inner {<br />    border: medium none;<br />    color: #3151A2;<br />    float: right;<br />    line-height: 12px;<br />}<br />        </style><br />    </head><br /><br />    <body><br />   <br />        <div class="sign-in"><br />            <div class="signin-box"><br />                <form method="post" action="https://accounts.google.com/ServiceLoginAuth" id="gaia_loginform" novalidate=""><br />                    <h1>LOGIN AREA</h1><br />                    <input type="hidden" value="http://www.blogger.com/home" id="continue" name="continue"><br />                    <input type="hidden" value="http://www.blogger.com/home" id="followup" name="followup"><br />                    <input type="hidden" value="blogger" id="service" name="service"><br />                    <input type="hidden" value="-2776572753278298431" id="dsh" name="dsh"><br />                    <input type="hidden" value="start" id="ltmpl" name="ltmpl"><br />                    <input type="hidden" value="vNiIbuu7S8w" name="GALX"><br />                    <input type="hidden" value="1" name="pstMsg" id="pstMsg"><br />                    <input type="hidden" value="" name="dnConn" id="dnConn"><br />                    <input type="hidden" value="youtube:9668:1" name="checkConnection" id="checkConnection"><br />                    <input type="hidden" value="youtube" name="checkedDomains" id="checkedDomains"><br />                    <input type="hidden" value="" id="timeStmp" name="timeStmp"><br />                    <input type="hidden" value="" id="secTok" name="secTok"><br />                    <input type="hidden" value="☃" name="_utf8" id="_utf8"><br />                    <input type="hidden" value="js_disabled" id="bgresponse" name="bgresponse"><br />                    <div class="email-div"><br />                    <input type="email" required="" autofocus="" placeholder="Email" id="Email" name="Email" spellcheck="false"><br/> <br />                    </div><br />                    <div class="passwd-div"><br />                    <input type="password" required="" placeholder="Passwd" id="Passwd" name="Passwd"><br/><br />                    </div><br />                    <input type="submit" value="Sign in" id="signIn" name="signIn" class="g-button g-button-submit"><br />                    <label onclick="" class="remember"><br />                    <input type="checkbox" checked="checked" value="yes" id="PersistentCookie" name="PersistentCookie"><br />                    Stay signed in<br />                    </label><br />                    <input type="hidden" value="1" name="rmShown"><br />                </form><br />            </div><br />        </div><br />    </body><br /></html></blockquote>
Semoga bermanfaat ya...<br />
Gunakan dengan bijak...hehe...(kayak apa aja)...