Home disini
widget by sy@ms

Latest Posts

Membuat Panel Login Efek Slide

Memasang panel login pada sebuah website yang mempunyai member, memang sangat efektif. Bagai mana jika panel login di pasang di sebuah blog dengan tampilan gak kalah jauh dengan yang lain. Seperti pada gambar diatas, nampak cantik login panel dengan JQuery.


Disini ane cuma mempostingin cara membuat tampilan panel login, jadi sobat hanya menyesuaikan target loginnya. Untuk memasang panel tersebut, ikuti step by stepnya.....
  1. Masuk ke akun blog sobat
  2. Pilih Rancangan, Edit Html.
  3. Cari kode </head>.
  4. Letakan script berikut, diatas kode no.3


    <!-- PNG FIX for IE6 -->
    <!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
    <!--[if lte IE 6]>
    <script type='text/javascript' src='http://syamsjs.googlecode.com/files/supersleight-min.js'></script>
    <![endif]-->
    <!-- jQuery - the core -->
    <script src='http://syamsjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
    <!-- Sliding effect -->
    <script src='http://syamsjs.googlecode.com/files/slide.js' type='text/javascript'/>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>


  5. Cari kode ]]></b:skin>.
  6. Letakan Script dibawah ini, di atas kode no.6


    /***** 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: 45px;
    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; /*Panel will overlap content */
    /*position: relative;*/ /*Panel will "push" the content down */
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    }
    #panel {
    width: 100%;
    height: 300px;
    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: 925px;
    margin: 0 auto;
    padding-top: 15px;
    text-align: left;
    font-size: 0.85em;
    }
    #panel .content .left {
    width: 375px;
    float: left;
    padding: 0 15px;
    border-left: 1px solid #333;
    }
    #panel .content .tengah {
    width: 225px;
    float: left;
    padding: 0 15px;
    border-left: 1px solid #333;
    }
    #panel .content .kanan {
    width: 225px;
    float: left;
    padding: 0 15px;
    border-right: 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;
    }
    #text{
    background: #545454;
    color:white;
    }
    /* 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;
    }


  7. Cari kode </body>.
  8. Letakan kode berikut, diatas kode no.7


    <div style='height:auto; width:100%; position:fixed; top:11px;'>
    <!-- Panel -->
    <div id='toppanel'>
    <div id='panel'>
    <div align='center' class='content clearfix'>
    <div class='left'>
    <form action='' method='post'>
    <table cellpadding='0px' cellspacing='0px'>
    <tr>
    <td align='center' colspan='3' style='background:#999999; color:#FFFFFF; font-size:20px; padding:5px;'><b>Hubungi Kami</b></td>
    </tr>
    <tr>
    <td style='padding-left:3px; width:125px;'>Nama Anda</td>
    <td style='width:15px;'>:</td>
    <td style='width:139px;'>
    <input class='field' name='nama' type='text'/></td>
    </tr>
    <tr>
    <td style='padding-left:3px; width:125px;'>Email Anda</td>
    <td style='width:15px;'>:</td>
    <td style='width:139px;'>
    <input class='field' name='email' type='text'/></td>
    </tr>
    <tr>
    <td style='padding-left:3px; width:125px;'>Perihal</td>
    <td style='width:15px;'>:</td>
    <td style='width:139px;'>
    <input class='field' name='perihal' type='text'/></td>
    </tr>
    <tr>
    <td style='padding-left:3px; width:125px;'>Pesan Anda</td>
    <td style='width:15px;'>:</td>
    <td style='width:139px;'><textarea cols='30' id='text' name='pesan' rows='5' style='opacity:0.4;filter:alpha(opacity=40); background:url(http://a2cto.org/clipart/Animated/Computers_and_Technology/Email/envelope_1.gif) no-repeat bottom right ;'/></td>
    </tr>
    <tr>
    <td style='padding-left:3px; width:125px;'/>
    <td style='width:15px;'/>
    <td style='width:139px;'>
    <input name='submit' type='submit' value=' Kirim '/>
    <input type='RESET'/></td>
    </tr>
    </table>
    </form>
    </div>
    <div class='tengah'>
    <!-- Login Form -->
    <form action='#' class='clearfix' method='post'>
    <h1>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='kanan'>
    <!-- Login Form -->
    <form action='#' class='clearfix' method='post'>
    <h1>Member Login</h1>
    <label class='gre' 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>
    <div align='center' style='background:none; height:100px; width:100%; float:left; clear:both; padding:5px;'>
    </div>
    </div> <!-- /login -->
    <!-- The tab on top -->
    <div class='tab'>
    <ul class='login'>
    <li style='background:none; color:aqua;'>
    <div align='right' class='container'>
    <div class='tab-nav' id='tab-nav-3'>
    <ul style='background:none'>
    <li style='background:none'>
    </li>
    </ul>
    </div>
    </div>
    </li>
    <li class='left'> </li>
    <li>Hello Guest!</li>
    <li class='sep'>|</li>
    <li id='toggle'>
    <a class='open' href='#' id='open' style='text-decoration:none;'> ] Contac [</a>
    <a class='close' href='#' id='close' style='display: none;'>Close Panel</a>
    </li>
    <li class='right'> </li>
    </ul>
    </div> <!-- / top -->
    </div> <!--panel -->
    </div>


  9. Klik save, untuk menyimpan dan.......

Gimana kerenkan, silahkan sobat edit sesui dengan keinginan sobat. Begitu pula dengan tujuan login-nya.
Ok, segini dulu ya.....
Tetaplah bersemangat sob.....



Sumber : http://www.maskolis.co.cc/2011/02/membuat-sliding-loginregister-form.html

Salam senyum dariku untuk semuanya, tetaplah untuk bersemangat. Jangan lupa Comment atau isi buku tamu ya sob. Sedikit pemberitahuan untuk sobat yang ingin mengambil [Copy-Paste], Owner tidak melarang sobat untuk memperbanyak artikel namun Owner berharap sobat berlaku dengan bijak agar mencantumkan link active maupun yang tidak. Owner berharap partisipasinya ya sob.



8 komentar:

NTRage03 mengatakan...

aloo..
info bgus
cocok buat prkembangan blogq :)

mhon dkunganna :)
dtunggu kemampiranna :)
n mhon untuk klik recomend facebook pada blogq :)

sy@ms mengatakan...

Salam kenal sobbb.....
trims partisipasinya ya sob...

16 April 2011 pukul 22.56
Unknown mengatakan...

gag ada fasilitas buat download source code nya yach? jadinya bisa langsung di coba di browser..TT

sy@ms mengatakan...

Salam kenal sob......
Untuk fasilitas download source code belum ane pasang.
Tapi bisa gunakan fasilitas view plain.
Untuk menggunakanya klik view plain diatas source code.

Trimsya dah mampir ke blog ane....

9 Agustus 2011 pukul 15.29
Miftahul mengatakan...

kok udh ngga bisa omm

sy@ms mengatakan...

Salam kenal sob....
Trims dah konfirmasi source code, sekarang dah ane update.
Silahkan di coba kembali.

13 Agustus 2011 pukul 16.04
Miftahul mengatakan...

udh ane pasang di blog tp stlah ane simpan jadigini...

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar. Pesan error XML: The element type must be terminated by the matching end-tag .
Error 500



Tolong benerin lagi yya sobb

sy@ms mengatakan...

Ma'af ni sob, ternyata bloger tidak wellformed ama tanda petik dua (").
Sekarang dah ane ganti.

Monggo dicoba sekali lagi......

14 Agustus 2011 pukul 11.24

Jam Sekarang
Tanggal
Salam Sapa :
Status Blogging :

*ket. status : Terjadwal : Berarti yang punya blog tidak bisa berinternet [ More... ]





sy@ms
skyNET program


Join the conversation for skyNET program

 
 free web counter Counter Powered by  RedCounter

© 2011 || Copyright by sy@ms || Thanks for skyNET program All Reserved

Technology Blogs TopOfBlogs Top Blogs Internet Internet Blogs Phil Backlink Display Pagerank
Yahoo bot last visit powered by MyPagerank.Net
USA Backlinks Free Backlinks Service at USABacklinks.com! Auto Backlink Gratis Indonesia : Top Link Indo My Ping in TotalPing.com ping fast  my blog, website, or RSS feed for Free