Membuat Sliding Log in

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

Tutorial kali ini saya akan membahas tentang Membuat Sliding Log in. Sliding Log In ini mempunyai animasi yang sangat bagus. 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 langsung saja ke TKP

Membuat Sliding Log inKlik disini untuk melihat demo Membuat Sliding Log in

1. Masuk ke akun blog anda
2. Klik Rancangan, kemudian edit HTML
3. Centang Expand Template Widget
Expand Template Widget
4. Copy kode di bawah ini

/* Login Panel */
#top {
   background: url('http://i766.photobucket.com/albums/xx310/Ikhfar/login_top.png') repeat-x 0 0;
 height: 38px;
 position: relative;
}

#top ul.login {
 display: block;
 position: relative;
   float: right;
   clear: right;
   height: 38px;
 width: auto;
   font-weight: bold;
 line-height: 38px;
 margin: 0;
 right: 150px;
   color: white;
   font-size: 80%;
 text-align: center;
   background: url('http://i766.photobucket.com/albums/xx310/Ikhfar/login_r.png') no-repeat right 0;
 padding-right: 45px;
}

#top ul.login li.left {
   background: url('http://i766.photobucket.com/albums/xx310/Ikhfar/login_l.png') no-repeat left 0;
   height: 38px;
 width: 45px;
 padding: 0;
 margin: 0;
   display: block;
 float: left;
}

#top ul.login li {
  text-align: left;
   padding: 0 6px;
 display: block;
 float: left;
 height: 38px;
   background: url('http://i766.photobucket.com/albums/xx310/Ikhfar/login_m.png') repeat-x 0 0;
}

#top ul.login li a {
 color: #33CCCC;
}

#top ul.login li a:hover {
 color: white;
}

/*Login*/
/* toggle effect - show/hide login*/
#login {
 width: 100%;
 color: white;
 background: #1E1E1E;
 overflow: hidden;
 position: relative;
 z-index: 3;
 height: 0;
}

#login a {
 text-decoration: none;
 color: #33CCCC;
}

#login a:hover {
 color: white;
}

#login .loginContent {
 width: 550px;
 height: 80px;
 margin: 0 auto;
 padding-top: 25px;
 text-align: left;
 font-size: 0.85em;
}

#login .loginContent .left {
 width: 120px;
 float: left;
 padding-left: 65px;
 font-size: 0.95em;
}

#login .loginContent .right {
 width: 290px;
 float: right;
 text-align: right;
 padding-right: 65px;
 font-size: 0.95em;
}

#login .loginContent form {
 margin: 0 0 10px 0;
 height: 26px;
}

#login .loginContent input.field {
 border: 1px #1A1A1A solid;
 background: #464646;
 margin-right: 5px;
 margin-top: 4px;
 color: white;
 height: 16px;
}

#login .loginContent input:focus.field {
 background: #545454;
}

#login .loginContent input.rememberme {
 border: none;
 background: transparent;
 margin: 0;
 padding: 0;
}

#login .loginContent input.button_login {
 width: 47px;
 height: 20px;
 cursor: pointer;
 border: none;
 background: transparent url('http://i766.photobucket.com/albums/xx310/Ikhfar/button_login.jpg') no-repeat 0 0;
}

#login .loginClose {
 display: block;
 position: absolute;
 right: 15px;
 top: 10px;
 width: 70px;
 font-size: 0.8em;
 text-align: left;
}

#login .loginClose a {
 display: block;
 width: 100%;
 height: 20px;
 background: url('http://i766.photobucket.com/albums/xx310/Ikhfar/button_close.jpg') no-repeat right 0;
 padding-right: 10px;
 border: none;
 font-size: 0.9em;
 color: white;
}

#login .loginClose a:hover {
 background: url('http://i766.photobucket.com/albums/xx310/Ikhfar/button_close.jpg') no-repeat right -20px;
}

5. Kemudian paste-kan di atas

</b:skin>

6. Setelah itu copy javascript di bawah ini
ini adalah script default, jadi tidak ada animasi

<script type="text/javascript" src="http://dl.dropbox.com/u/22738692/SlidingLogIn/js/mootools-1.2-core-yc.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/22738692/SlidingLogIn/js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/22738692/SlidingLogIn/js/fx.slide.js"></script>

bila anda menginginkan animasi pada saat membuka atau menutupnya, copy saja code di bawah ini danJANGAN copy code di atas

<script type="text/javascript" src="http://dl.dropbox.com/u/22738692/SlidingLogIn/js/mootools-1.2-core-yc.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/22738692/SlidingLogIn/js/mootools-1.2-more.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
$('login').setStyle('height','auto');
var mySlide = new Fx.Slide('login', { duration:800, transition: Fx.Transitions.Bounce.easeInOut}).hide(); //starts the panel in closed state

//Show-Hide login panel when you click the link "Login" on top of the page
$('toggleLogin').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle(); //show-hide login panel
e.stop();
});

//Hide login panel when you click the button close on the upper-right corner of the login panel
$('closeLogin').addEvent('click', function(e){
e = new Event(e);
mySlide.slideOut(); //Hide login panel
e.stop();
});
});
</script>

7. Lalu paste di atas

</head>

8. Setelah itu Simpan Template
9. Selanjutnya klik Elemen Halaman
10. Tambah Gadget
11. Kemudian pilih HTML/Javascript
12. Setelah itu copy kode di bawah ini, kemudian paste-kan di kotak kontent

<div id="login">
<div class="loginContent">
<form action="https://www.google.com/accounts/ServiceLoginAuth?service=blogger" method="post">
<label for="log"><b>Username: </b></label>
<input class="field" type="text" name="log" id="log" value="" size="23" />
<label for="pwd"><b>Password:</b></label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<input type="submit" name="submit" value="" class="button_login" />
<input type="hidden" name="redirect_to" value=""/>
</form>
<div class="left">
<label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
<div class="right">Not a member? <a href="https://www.google.com/accounts/NewAccount?service=blogger">Register</a> | <a href="https://www.blogger.com/forgot.g">Lost your password?</a></div>
</div>
<div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
</div>
<div id="container">
<div id="top">
<ul class="login">
<li class="left"> </li>
<li>Hello Guest!</li>
<li>|</li>
<li><a id="toggleLogin" href="#">Log In</a></li>
</ul>
</div>
</div>

13. Kemudian Simpan

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

Artikel Terkait