Membuat Slide Login Dengan JQuery

Selamat sore semuanya, sore hari nan hujan deras ini saya ingin berbagi dengan Anda semuanya, tentang “Cara membuat Slide Login / Register Form Panel” di Blogspot dengan jQuery. Langsung saja menuju pokok bahasan kali ini. Untuk contohnya bisa Anda lihat pada gambar diatas.

Langkah-langkah membuat Slide Login adalah sebagai berikut :

1. Masuk ke Akun Blogger Anda
2. Kemudian pilih dan klik Template
3. Setelah itu klik Edit Html
4. Expand Widget Template Anda [saya sarankan untuk membackup dahulu template Anda]
5. Selanjutnya, cari kode   </head>
6. Co-Pas kode Javascript dibawah ini tepat diatasnya.

<script src='http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js' type='text/javascript'/><script style='display:none' type='text/javascript'>$(document).ready(function() {

// Expand Panel
$(&amp;quot;#open&amp;quot;).click(function(){
$(&amp;quot;div#panel&amp;quot;).slideDown(&amp;quot;slow&amp;quot;);
});

// Collapse Panel
$(&amp;quot;#close&amp;quot;).click(function(){
$(&amp;quot;div#panel&amp;quot;).slideUp(&amp;quot;slow&amp;quot;);
});

// Switch buttons from &amp;quot;Log In | Register&amp;quot; to &amp;quot;Close Panel&amp;quot; on click
$(&amp;quot;#toggle a&amp;quot;).click(function () {
$(&amp;quot;#toggle a&amp;quot;).toggle();
});

});
</script>

      7.  Selanjutnya, cari kode   ]]><b:skin>    letakkan kode CSS dibawah ini diatasnya.

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}

.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}

.tab ul.login li.left {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.right {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {
color: #15ADFF;
}

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

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/css/../images/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}

#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}

#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}

#panel p {
margin: 5px 0;
padding: 0;
}

#panel a {
text-decoration: none;
color: #15ADFF;
}

#panel a:hover {
color: white;
}

#panel a-lost-pwd {
display: block;
float: left;
}

#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}

#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}

#panel .content .right {
border-right: 1px solid #333;
}

#panel .content form {
margin: 0 0 10px 0;
}

#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}

#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}

#panel .content input:focus.field {
background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}

#panel .content input.bt_login {
width: 74px;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_register.png) no-repeat 0 0;
}

#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}

Ubah kode berwarna biru diatas, sesuai dengan lebar template, dan ukuran yang Anda inginkan.

      8.  Langkah berikutnya, cari kode   </body>   kemudian letakkan kode di bawah ini tepat diatasnya :

<!-- Login -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left'>
<h1>Selamat Datang di SnD-Computer</h1>
<h2>Contoh Slide Login Dengan JQuery</h2>
<p class='grey'>Disamping ini adalah contoh Slide Login menggunakan JQuery. Login Form ini hanya Contoh dan tidak dapat digunakan seperti Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member. Blog ini adalah tempat untuk saling berbagi ilmu.</p>
<h2>Berbagai Macam Ilmu Pengetahuan</h2>
<p class='grey'>Untuk membuatnya Silahkan : <a href='http://sndcomputer.blogspot.com/2015/04/membuat-slide-login-dengan-jquery.html' title='Download'>Klik Disini</a></p>
</div>

<div class='left'>
<form action='#' class='clearfix' method='post'>
<h1 class='padlock'>Member Login</h1>
<label class='grey' for='log'>Username :</label>
<input class='field' id='log' name='log' size='23' type='text' value=''/>
<label class='grey' for='pwd'>Password :</label>
<input class='field' id='pwd' name='pwd' size='23' type='password'/>
<label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Ingat Saya</label>
<div class='clear'/>
<input class='bt_login' name='submit' type='submit' value='Login'/>
<a class='lost-pwd' href='#'>Lupa password Anda?</a>

</form>
</div>
<div class='left right'>
<form action='#' method='post'>
<h1>Belum menjadi Member? Silakan Daftar!</h1>
<label class='grey' for='signup'>Username :</label>
<input class='field' id='signup' name='signup' size='23' type='text' value=''/>
<label class='grey' for='email'>Email :</label>
<input class='field' id='email' name='email' size='23' type='text'/>
<label>Password akan dikirimkan pada Anda via Email.</label>
<input class='bt_register' name='submit' type='submit' value='Register'/>
</form>
</div>

</div>
</div>
<!-- /login -->
<!-- The tab on top -->
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Halo Semuanya</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Masuk | Daftar</a>
<a class='close' href='#' id='close' style='display: none;'>Tutup Panel</a>
</li>

<li class='right'/>
</ul>
</div>
<!-- / top -->
</div>
<!—panel -->

Ganti tulisan berwarna Merah diatas sesuai keinginan Anda, kemudian klik Save Template dan lihat hasilnya.

Demikian artikel yang bisa saya bagikan kali ini. Semoga bisa bermanfaat.
Untuk mendapatkan lebih banyak lagi ilmu Seputar Blog, Saya sarankan untuk mengunjungi Link berikut ini :

[ MASKOLIS.COM ]

Terimakasih sudah mengunjungi Blog SnD-Computer.
Mohon maaf jika terdapat kekurangan di Blog ini, dan mohon kirimkan saran dan masukannya pada Saya, untuk memperdalam ilmu Blogging, karena Saya baru mengenal dunia Blogger.