Membuat Sliding Log In v2

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Tutorial kali ini saya akan membahas tentang Membuat Sliding Log In versi 2. Saya pernah posting tentang Sliding Log In juga. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP

Membuat Sliding Log In v2Klik disini untuk melihat demo Membuat Sliding Log In v2

1. Masuk ke akun blogger anda
2. Klik rancangan, kemudian Edit HTML
3. Pada Edit HTML, centang Expand Template Widget
   Expand Template Widget
4. Copy kode CSS di bawah ini

/* Begin Sliding Log In v2 */
.mooSlide {
 background-color: #000000;
 padding: 25px 10px 10px;
 font-family: Arial, Helvetica, sans-serif;
 line-height: 1.2em;
 color: #FFFFFF;
 border: 1px solid #33CCCC;
 margin: 0 auto;
 text-align: left;
 font-size: 0.85em;
 width: 525px; /* width of our login panel */
}
 
.mooSlide h1 {
 font-size: 1.6em;
 height: 20px;
 padding-top: 22px;
 color: white;
}

.mooSlide h1.padlock {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1dLn5vTA453frPdiXfEca2geIJiyjQwvTONJJNGX7xMSxvLm5rNMUz4n9xaEUjlBBZWzjnadK_UUaHt8m_Yhi6fkS_KeMndIzL1ERNwPTohXok6yL3oFaDv1qzH-QxfhQZJcvVghxLpn9/s400/padlock.jpg") no-repeat 0 0;
 padding-left: 35px;
}
 
a {
 text-decoration: none;
 color: #33CCCC;
}
 
.mooSlide form {
 margin: 0 0 10px 0;
 height: 26px;
}
 
.mooSlide label {
 float: left;
 padding-top: 8px;
 clear: both;
 width: 180px;
 display: block;
}
 
.mooSlide .left {
 width: 200px;
 float: left;
 padding-left: 25px;
}
 
.mooSlide .right {
 width: 270px;
 float: left;
 padding-left: 25px;
}
 
.mooSlide .sep {
 width: 1px;
 height: 180px;
 margin-top: 25px;
 float: left;
 border-right: 1px solid #333;
}
 
.mooSlide input {
 border: 1px #1A1A1A solid;
 background: #464646;
 margin-right: 5px;
 margin-top: 4px;
 color: white;
 height: 16px;
 float: left;
 clear: both;
 display: block;
}
 
.mooSlide input:focus {
 background: #545454;
}
 
.mooSlide input.rememberme {
 border: none;
 background: transparent;
 margin: 0;
 padding: 0;
}
 
.mooSlide input.button_login {
 width: 82px;
 height: 20px;
 cursor: pointer;
 border: none;
 margin-top: 10px;
 background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_prHchCyTbi6XWPSUBzCRYiADltOO4RreqcvpjmzyBnRWGvreJwUagEIRXnUpzcEeOZTBbRU6lebi-eisYouqpetv0czo2fBxJhNWLtLZ12xbqdm_BYEB0_9676i6rhFwzV0d69WC2X2R/s400/button_login.jpg") no-repeat 0 0;
}
 
.mooSlide input.button_register {
 width: 82px;
 height: 20px;
 cursor: pointer;
 border: none;
 margin-top: 10px;
 background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ57QCMaCGlMIYZBCkOzuwRNfpeeFCTHJN_eR7IyLASHyv03HcAfxFRUV9ZjlnxNh4qQeLvCAxiKab7b0rnuqe_8KI8wHqDCbQSjnR7RRUUymZbDdaO2T07PsP1Ori9hYFWowSA-uume9_/s400/button_register.jpg") no-repeat 0 0;
}
 
.mooSlide .loginClose {
 display: block;
 position: absolute;
 right: 20px;
 top: 10px;
 width: 26px;
}
 
.mooSlide .loginClose a {
 display: block;
 width: 100%;
 height: 26px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Vvv1jHot7lE9sCNaCOhjMFQHj5MoO5BxQnSzwpI_el2NV6mAsxGlQTN2894KAClb1CipfYldFtQ6IuyDmDdbcc6iIBuLMOOZq-qTo7kjs6R2xGXGQBcRMJ1nP6fbe1pTRiLUjr8Kw4Sa/s400/button_close.jpg") no-repeat right 0;
 padding-right: 10px;
 border: none;
 font-size: 0.9em;
 color: white;
}
 
.mooSlide .loginClose a:hover {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Vvv1jHot7lE9sCNaCOhjMFQHj5MoO5BxQnSzwpI_el2NV6mAsxGlQTN2894KAClb1CipfYldFtQ6IuyDmDdbcc6iIBuLMOOZq-qTo7kjs6R2xGXGQBcRMJ1nP6fbe1pTRiLUjr8Kw4Sa/s400/button_close.jpg") no-repeat right -26px;
}
/* End Sliding Log In v2 */

5. Paste di atas kode

</b:skin>

6. Kemudian copy kode di bawah ini

<!-- Mootools - the core -->
<script type="text/javascript" src="http://dl.dropbox.com/u/22738692/SlidingLogInv2/mootools12.js"></script>
<!-- MooSlide  -->
<script type="text/javascript" src="http://dl.dropbox.com/u/22738692/SlidingLogInv2/mooSlide2-moo12.js"></script>
<script language="javascript" type="text/ecmascript">
 window.addEvent('domready',function(){
  var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500,  toggler:'login', content: 'loginPanel', height:250, close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
  //optional: AutoStart the slider on page load:
  //MyLogin.run();
  $('close').addEvent('click', function(e){
    e = new Event(e);
    myLogin.clearit();
    e.stop();
  });
});
</script>

7. Paste di atas kode

</head>

8. Simpan Template
9. Setelah itu masuk ke Elemen Laman
10. Klik Tambah Gadget
11. Pilih HTML/Javascript
12. Masukkan code di bawah ini pada kotak kontent

<!-- Login Panel using MooSlide -->
 <div id="loginPanel" class="mooSlide">
   <form class="left" action="#" method="post">
     <h1 class="padlock">Member Login</h1>
     <label for="log"><b>Username: </b></label>
     <input type="text" name="log" id="log" value="" size="23" />
     <label for="pwd"><b>Password:</b></label>
     <input type="password" name="pwd" id="pwd" size="23" />
     <label><input class="rememberme" name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" />  Remember me</label>
     <input type="submit" name="submit" value="" class="button_login" />
     <label><a href="#">Lost your password?</a></label>
   </form>
    <div class="sep"></div>
    <form class="right" action="#" method="post">
     <h1>Not a Member? Sign Up!</h1>
     <label for="signup"><b>Username: </b></label>
     <input type="text" name="signup" id="signup" value="" size="23" />
     <label for="email"><b>Email:</b></label>
     <input type="text" name="email" id="email" size="23" />
     <input type="submit" name="submit" value="" class="button_register" />
   </form>
   <div class="clearfix"></div>
    <!-- The close button -->
   <div class="loginClose"><a href="#" id="close"> </a></div>
 </div> <!-- / Login panel -->
 
 <div id="container">
  <div id="content">
   <h1>Try the demo - Click "login" below:</h1>
   <!-- Below the link that will open the login/register form -->
   <p><a href="#" id="login"><b>Login</b></a></p>
  </div><!-- / content -->
  <div class="clearfix"></div>
 </div><!-- / container -->

13. Simpan

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait