mas template

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
    <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
    $(&quot;#open&quot;).click(function(){
    $(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
    });
    
    // Collapse Panel
    $(&quot;#close&quot;).click(function(){
    $(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
    });
    
    // Switch buttons from &quot;Log In | Register&quot; to  &quot;Close Panel&quot; on click
    $(&quot;#toggle a&quot;).click(function () {
    $(&quot;#toggle a&quot;).toggle();
    });
    
    });
    </script>
  7. Setelah itu anda cari kode ]]></b:skin>, Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelumnya.
/***** 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;
}

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' 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.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

57 comments:

  1. gw masih bingung broo...
    tapi izin sedot...

    ReplyDelete
  2. wah.. .kog ane masih bingung yan Gan. Gak Bisa

    ReplyDelete
  3. @wadhy: Oke, makasih dah mau mampir

    @Asoka Isron : yang bingung yang mana gan...?? Kan udah tak kasih contoh di demoblog

    ReplyDelete
  4. saya pingin pakai tapi masih kurang paham cara penggunaannya. nice post

    ReplyDelete
  5. gan kalo nyambungin ke databaseya bagaimana ni kan cuman tampilan doang ya kan? nah gan kalo misalkan mau langsung bisa ada memberareanya bagaimana blog ane www.bsib.co.cc

    ReplyDelete
  6. Iya sob, wellformed, kalo gak salah pada:

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

    coba cript di atas ganti dengan:

    <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() {

    Semoga berhasil sob. http://kode-blogger.blogspot.com/

    ReplyDelete
  7. @:
    Waw, ternyata berhasil, bentuknya bagus banget, tapi kok ga bisa daftar ya...

    mas tunjukin dong biar kita bisa register asli, dan juga bisa login asli....
    biar keren gitu...
    balas mas.....
    ke : http://hatakefajri.blogspot.com/
    atau kirim via email : fajriauliazarni@yahoo.co.id

    ReplyDelete
  8. gak bngung bos... tp kok gk bsa waktu ku buat d blog ku, yg da cma error.. http://qaryatulhuda.blogspot.com

    ReplyDelete
  9. mas... aku udah buat menu sign up itu, tpi waktu ku cba register kok yg kluar tlisan sprti ini>>> "Method Not Allowed
    Error 405"

    mhon penjelasan nya, thx

    ReplyDelete
  10. @Islam Tasawuf:
    Maaf sebelumnya liding login dan register ini sebenernya modifikasi dari plugin wordpress yang bernama buddypress sliding login register. Dan itu memeang dikhususnya untuk wordpress. Jadi untuk blogspot itu cuma buat hiasan saja.
    Untuk membuat sebuah blog community anda paling tidak harus memakai wordpress sebagai platform nya jika masih pake blogspot sepertinya tidak ada.

    ReplyDelete
    Replies
    1. saya setuju komentar yang ini, kunjungi balik gan

      Delete
    2. Halo maskolis,
      kalau boleh saya ingin minta kontaknya, saya mo tanya mengenai pasang iklan

      Delete
  11. kk ko gak bisa terbuka kya di SSnya?

    tolong penerangannya kk

    ReplyDelete
  12. mas kita dah ikutin tutornya tetapi koq masih ada pesan kode nya harus ditutup dengan benar! MOHON PENCERAHAN MAS,terima kasih, http://faceblogster.blogspot.com

    ReplyDelete
    Replies
    1. gampang, ke aku aja tanya lae.. wkwkkwkwkwkw

      Delete
  13. ahhgghh said

    nggx bisa ne dah lma wa coba tross

    ReplyDelete
  14. mantapppp gannnn............ bravo blog maskolis

    ReplyDelete
  15. Kalo form-nya diganti sm kotak berlangganan caranya gmn ya ??

    ReplyDelete
  16. MaS kolis, saya orang baru didunia blog, jujur saja, semua embel embel yang ada di blog saya didapet dari blog maskolis, hehe...
    tp ada 1 pertanyaan (pertama nih)..
    Saya mau bikin blog Online shop, nah saya mau ada data base, form register, login dan logout, untuk member yang berlangganan di Olshop saya, nah, saya bingung nih yg katanya harus pake PHP dan My SQL itu, aku ga paham mas, bisa di kulas tuntas ga tuh? hehe makasih sebelumnya, Respect

    ReplyDelete
    Replies
    1. lebih baik belajar php n my sql dulu aja mbak biar bener2 ngerti jadi kalau terjadi kesalahan kita bisa mengkoreksi.
      langsung kunjungi aja disini mbak ane juga belajar di sini kok..

      http://prothelon.com/belajar/

      kunjungi blog ane juga ya salam kenal

      <a href="http://cikoputra.blogspot.com>belajar proggramming,tutor potoshop,tutor blog,kesehatan,bisnis online,kesehatan dll</a>

      Delete
  17. klo misalnya untuk data basenya disambungi ke email gak bisa ta gan, biar nanti di input secara manual di form sendiri gitu. tapi sayang gak ngerti carane.
    oh ya gan makasih, berkat agan toko online q hampir selesai, masih kurang 30% nan. bisa kasih saran gak di emailku. trus untuk tokonya bisa di lihat di sigadu.blogspot.com

    ReplyDelete
  18. gan, itu cuman tampilan aja ya....
    klo diarahkan ke email gmn, biar input data member secara manual. tapi capek juga sih, masukin satu persatu.
    thank's gan.
    salam kenal nich.
    sigadu.blogspot

    ReplyDelete
  19. hemm bingung sih nggak bingung kok mudah kunjung balik ya http://ahmad-mauludin.blogspot.com/

    ReplyDelete
  20. Keren Bos tapi masih serong2 erorr,,,
    http://www.wisata-info.com
    . Imel paulus.kasiman@gmail.com

    ReplyDelete
  21. ini fungsinya apa mas masang gini, apakah dengan masang ini member juga bisa ikut posting di blog kita

    ReplyDelete
  22. Salam sehat selalu untuk Mas Ganteng Sejagad hihi.. sekedar berbagi tips ya, cara Login dan Register diatas sukses saya masukkan ke blog saya, hanya saya Oprek sedikit dengan rubah jalur koneksi ke ajang komentar "DISQUS", boleh saya kasih contoh ya Mas, ini Contohnya lihat di:

    jakartatek blogspot dot com

    Karena saya rasa layanan Disqus tampaknya hampir mendekati interaksi layaknya forum-forum bebas loh.. itu aja saran saya buat yang masih bingung mau diarahkan kemana Login dan register bahasan diatas Regard from me.. Jangan lupa kunjungi blog saya ya hehe..

    ReplyDelete
  23. mas knp pas saya save temlplate ada notice gini(Kesalahan saat mengurai XML, baris 385, kolom 14: The value of attribute "src" associated with an element type "script" must not contain the '<' character.)

    ReplyDelete
  24. Kereen Mas Tutorialnya, mau di coba ah hehehe... Makasih saya pake templatenya

    ReplyDelete
  25. thanks ya mas artikelnya sangat membantu sekali

    ReplyDelete
  26. Eror mulu sob,, ada cara lain ga?

    ReplyDelete
  27. artikel yang bagi=us gan
    mohon kunbalnya
    <a href="http://info-pcware.blogspot.com/2013/09/software-opensources-yang-berkualitas.html>software paling melegenda di dunia gan</a>

    ReplyDelete
  28. semua yang komen disini sudah saya kunjungi blognya, kunjungan baliknya kutunggu, pasang jempol juga ya.

    ReplyDelete
  29. kalo di alihkan ke halaman kosong jika tidak bisa login caranya gimana mas

    ReplyDelete
  30. Lumayan Menipu juga brooo hahahahahah

    stikesgm.blogspot.com

    ReplyDelete
  31. terimakasih
    mohon kunjungi web saya nonton film terlengkap di blogspot

    www.bioskop45-free.blogspot.com

    ReplyDelete
  32. suer hasilnya mas,
    mohon mampir para mas2 di blog saya.
    http://zhambakri.blogspot.com/

    ReplyDelete
  33. Ijin Masuk Kang...
    Itu klo mau dipasang hrus edit template dulu y?
    Apa g takut rusak ntarnya, mohon solusinya!!!
    Thanks.

    ReplyDelete
  34. Masih bingung gan bisa di jelaskan secara rinci

    ReplyDelete
  35. wahhh keren nih bisa saya prktekin di www.aboncarebon.blogspot.com

    ReplyDelete
  36. login form itu cuma contoh aja ya??? nah link databasenya ada dimana? dimana admin blog bisa lihat?
    kalau login itu dibuat supaya orang lain bisa menjadi kontributor blog bagaimana caranya?
    http://www.carailmuuang.blogspot.com

    ReplyDelete
  37. Selamat pagi mas,,, tutorial yg sangat bagus. namun untuk script
    => <script src='<span style="color: #990000;">http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js</span>' <== tidak bisa disimpan karena formatnya salah. Mohon penjelasan lebih lanjut mas.
    Salam "ant-notepad.blogspot.com"

    ReplyDelete
  38. mantap infonya maskolis,
    jangan lupa berkunjung ke blogku http://coretanzone.blogspot.com/

    ReplyDelete
  39. Gmn supaya bisa beneran gitu mas? tolong penjelasannya dong...blog saya udah mantep kan tuh pake login kaya gitu...hehehe

    ReplyDelete
  40. sangat bermanfaat bngeet..
    nanti saya coba mana tau bisa berhasil.. hehe

    ReplyDelete
  41. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam

    1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK

    BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger