//
Membuat Sliding Login/Register Form Panel di Blog
Selamat siang semuanya, pada siang hari yang mendung ini saya akan memberikan tutorial mengenai cara membuat Sliding Login/Register Form Panel di Blogspot dengan jQuery. Login dan register biasanya digunakan pada sebuah blog atau web yang sudah banyak memiliki anggota. Contoh dari form login/register ini dapat anda temui jika anda login di Blogger, Facebook, Twitter atau situs-situs yang menyediakan layanan jaringan community. Untuk contohnya bisa temen-temen lihat pada gambar di bawah, atau bisa langsung klik disini.

 

Nah, jika temen-temen tertarik untuk membuatnya, di bawah ini saya akan berikan penjelasannya :

  1. Pertama, anda mesti login ke blogger.
  2. Kemudian klik Rancangan
  3. Setelah itu klik Edit Html
  4. Jangan lupa untuk mencentang Expand Widget Template (saya anjurkan download dahulu template anda)
  5. Kemudian cari kode berikut ini </head>
  6. Setelah itu letakkan kode Javascript dibawah ini tepat diatasnya
    1. <script src=‘<span style=”color: #990000;”>http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js</span>&#8217;  type=‘text/javascript’/><script style=‘display:none’  type=‘text/javascript’>$(document).ready(function() {
    2. // Expand Panel
    3. $(&quot;#open&quot;).click(function(){
    4. $(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
    5. });
    6. // Collapse Panel
    7. $(&quot;#close&quot;).click(function(){
    8. $(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
    9. });
    10. // Switch buttons from &quot;Log In | Register&quot; to  &quot;Close Panel&quot; on click
    11. $(&quot;#toggle a&quot;).click(function () {
    12. $(&quot;#toggle a&quot;).toggle();
    13. });
    14. });
    15. </script>
  7. Setelah itu anda cari kode ]]></b:skin>, Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelumnya.

Setelah semuanya sudah anda masukkan, langkah berikutnya adalah 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>Welcome In Creating Website</h1>
<h2>Contoh Sliding Login Dengan JQuery</h2>
<p class=’grey’>Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member</p>
<h2>Tutorial Blog</h2>
<p class=’grey’>Untuk membuatnya Silahkan : <a href=’http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html&#8217; title=’Download’>Pencet Sini</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’/> Remember me</label>
<div class=’clear’/>
<input class=’bt_login’ name=’submit’ type=’submit’ value=’Login’/>
<a class=’lost-pwd’ href=’#’>Lost your password?</a>
</form>
</div>
<div class=’left right’>
<form action=’#’ method=’post’>
<h1>Not a member yet? Sign Up!</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>A password will be e-mailed to you.</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 –>

Pada kode diatas, untuk tulisan warna kuning bisa anda ganti dengan tulisan yang anda inginkan, begitu juga tulisan yang berwarna merah bisa anda ganti dengan Login dan register misalnya. Kemudian klik Save Template anda dan lihat hasilnya.

 

Oke, itu tadi pembahasan pada kali ini, bagi yang masih bingung jangan malu-malu untuk mengisi kotak komentar yang ada di bawah ini. Selamat mencoba dan semoga bermanfaat.

Diskusi

Belum ada komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

kalender

Desember 2016
S S R K J S M
« Jun    
 1234
567891011
12131415161718
19202122232425
262728293031  

Klik tertinggi

  • Tak ada

RSS poto

  • Sebuah galat telah terjadi; umpan tersebut kemungkinan sedang anjlok. Coba lagi nanti.

Blog Stats

  • 56,466 hits

Top Rated

virtual

Masukkan alamat surel Anda untuk berlangganan blog ini dan menerima pemberitahuan tulisan-tulisan baru melalui surel.

Bergabunglah dengan 4 pengikut lainnya

%d blogger menyukai ini: