Memodifikasi Formulir Login/Register Untuk Blog

Sering kan anda diminta untuk register/daftar pada situs atau web tertentu. Pastinyaaa.....Yuk deh Cari Tau bagaimana membuat form pendaftaran (register) pada blog, yuukk…mare…, Contoh Form Register ini saya modifikasi kembali yang ide dasarnya saya ambil dari blog Kode Blogger. Beberapa modifikasi meliputi pembahasaan dengan lebih menggunakan bahasa Indonesia (biar dibilang bener-bener cinta Indonesia mas bro…).
Untuk contoh login, lihatlah screenshot dibawah ini….

Contoh jadi lihat di Toserba Maya.Posisi Form tersebut berada di atas header blog/navigasi bar blog, dengan efek sliding. Seperti itulah kiranya yang akan saya buat, bila sobat tertarik, langsung saja berikut langkah-langkah membuatnya:

1. Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget"
6. Lalu carilah kode: </head>
7. Kalau sudah ketemu, letakan kode berikut di atas kode </head>

<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() {<br /> <br /> // Expand Panel<br /> $(&quot;#open&quot;).click(function(){<br /> $(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);<br /> });<br /> <br /> // Collapse Panel<br /> $(&quot;#close&quot;).click(function(){<br /> $(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);<br /> });<br /> <br /> // Switch buttons from &quot;Log In | Register&quot; to &quot;Close Panel&quot; on click<br /> $(&quot;#toggle a&quot;).click(function () {<br /> $(&quot;#toggle a&quot;).toggle();<br /> });<br /> <br /> });<br /> </script>

8. Setelah itu cari kode: ]]></b:skin> setelah ketemu copy paste-kan kode berikut tepat di atasnya yaa…

<br /> /***** clearfix *****/<br /> .clear {clear: both;height: 0;line-height: 0;}<br /> .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}<br /> .clearfix {display: inline-block;}<br /> /* Hides from IE-mac \*/<br /> * html .clearfix {height: 1%;}<br /> .clearfix {display: block;}<br /> /* End hide from IE-mac */<br /> .clearfix {height: 1%;}<br /> .clearfix {display: block;}<br /> <br /> /* Panel Tab/button */<br /> .tab {<br /> background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_b.png) repeat-x 0 0;<br /> height: 42px;<br /> position: relative;<br /> top: 0;<br /> z-index: 999;<br /> }<br /> <br /> .tab ul.login {<br /> display: block;<br /> position: relative;<br /> float: right;<br /> clear: right;<br /> height: 42px;<br /> width: auto;<br /> font-weight: bold;<br /> line-height: 42px;<br /> margin: 0;<br /> right: 150px;<br /> color: white;<br /> font-size: 80%;<br /> text-align: center;<br /> }<br /> <br /> .tab ul.login li.left {<br /> background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_l.png) no-repeat left 0;<br /> height: 42px;<br /> width: 30px;<br /> padding: 0;<br /> margin: 0;<br /> display: block;<br /> float: left;<br /> }<br /> <br /> .tab ul.login li.right {<br /> background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_r.png) no-repeat left 0;<br /> height: 42px;<br /> width: 30px;<br /> padding: 0;<br /> margin: 0;<br /> display: block;<br /> float: left;<br /> }<br /> <br /> .tab ul.login li {<br /> text-align: left;<br /> padding: 0 6px;<br /> display: block;<br /> float: left;<br /> height: 42px;<br /> background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_m.png) repeat-x 0 0;<br /> }<br /> <br /> .tab ul.login li a {<br /> color: #15ADFF;<br /> }<br /> <br /> .tab ul.login li a:hover {<br /> color: white;<br /> }<br /> <br /> .tab .sep {color:#414141}<br /> <br /> .tab a.open, .tab a.close {<br /> height: 20px;<br /> line-height: 20px !important;<br /> padding-left: 30px !important;<br /> cursor: pointer;<br /> display: block;<br /> width: 100px;<br /> position: relative;<br /> top: 11px;<br /> }<br /> <br /> .tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;}<br /> .tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;}<br /> .tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;}<br /> .tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/css/../images/bt_close.png) no-repeat left -19px;}<br /> <br /> /* sliding panel */<br /> #toppanel {<br /> position: absolute;<br /> top: 0;<br /> width: 100%;<br /> z-index: 999;<br /> text-align: center;<br /> margin-left: auto;<br /> margin-right: auto;<br /> }<br /> <br /> #panel {<br /> width: 100%;<br /> height: 270px;<br /> color: #999999;<br /> background: #272727;<br /> overflow: hidden;<br /> position: relative;<br /> z-index: 3;<br /> display: none;<br /> }<br /> <br /> #panel h1 {<br /> font-size: 1.6em;<br /> padding: 5px 0 10px;<br /> margin: 0;<br /> color: white;<br /> }<br /> <br /> #panel h2{<br /> font-size: 1.2em;<br /> padding: 10px 0 5px;<br /> margin: 0;<br /> color: white;<br /> }<br /> <br /> #panel p {<br /> margin: 5px 0;<br /> padding: 0;<br /> }<br /> <br /> #panel a {<br /> text-decoration: none;<br /> color: #15ADFF;<br /> }<br /> <br /> #panel a:hover {<br /> color: white;<br /> }<br /> <br /> #panel a-lost-pwd {<br /> display: block;<br /> float: left;<br /> }<br /> <br /> #panel .content {<br /> width: 960px;<br /> margin: 0 auto;<br /> padding-top: 15px;<br /> text-align: left;<br /> font-size: 0.85em;<br /> }<br /> <br /> #panel .content .left {<br /> width: 280px;<br /> float: left;<br /> padding: 0 15px;<br /> border-left: 1px solid #333;<br /> }<br /> <br /> #panel .content .right {<br /> border-right: 1px solid #333;<br /> }<br /> <br /> #panel .content form {<br /> margin: 0 0 10px 0;<br /> }<br /> <br /> #panel .content label {<br /> float: left;<br /> padding-top: 8px;<br /> clear: both;<br /> width: 280px;<br /> display: block;<br /> }<br /> <br /> #panel .content input.field {<br /> border: 1px #1A1A1A solid;<br /> background: #414141;<br /> margin-right: 5px;<br /> margin-top: 4px;<br /> width: 200px;<br /> color: white;<br /> height: 16px;<br /> }<br /> <br /> #panel .content input:focus.field {<br /> background: #545454;<br /> }<br /> <br /> /* BUTTONS */<br /> /* Login and Register buttons */<br /> #panel .content input.bt_login,<br /> #panel .content input.bt_register {<br /> display: block;<br /> float: left;<br /> clear: left;<br /> height: 24px;<br /> text-align: center;<br /> cursor: pointer;<br /> border: none;<br /> font-weight: bold;<br /> margin: 10px 0;<br /> }<br /> <br /> #panel .content input.bt_login {<br /> width: 74px;<br /> background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_login.png) no-repeat 0 0;<br /> }<br /> <br /> #panel .content input.bt_register {<br /> width: 94px;<br /> color: white;<br /> background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_register.png) no-repeat 0 0;<br /> }<br /> <br /> #panel .lost-pwd {<br /> display: block;<br /> float:left;<br /> clear: right;<br /> padding: 15px 5px 0;<br /> font-size: 0.95em;<br /> text-decoration: underline;<br /> };

9. Udah…?, Lanjut lagi gan, cari lagi kode: </body> kemudian letakan kode dibawah ini tepat di atasnya

<br /> <!-- Login --><br /> <div id='toppanel'><br /> <div id='panel'><br /> <div class='content clearfix'><br /> <div class='left'><br /> <h1>Formulir Registrasi</h1><br /> <h2>Form Ini Contoh Sliding Login Dengan JQuery</h2><br /> <p class='grey'>Berikut ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Registrasi online lainnya, Karena Blog ini terbuka untuk umum yang ditujukan untuk MEDIA PEMBELAJARAN</p><br /> <h2>Tutorial Blog</h2><br /> <p class='grey'>Untuk membuatnya Silahkan : <a href='http://kode-blogger.blogspot.com/2011/05/membuat-sliding-loginregister-form.html' title='Download'>Klik Disini</a></p><br /> </div><br /> <br /> <div class='left'><br /> <form action='#' class='clearfix' method='post'><br /> <h1 class='padlock'>Member Login</h1><br /> <label class='grey' for='log'>Username:</label><br /> <input class='field' id='log' name='log' size='23' type='text' value=''/><br /> <label class='grey' for='pwd'>Password:</label><br /> <input class='field' id='pwd' name='pwd' size='23' type='password'/><br /> <label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Login Otomatis</label><br /> <div class='clear'/><br /> <input class='bt_login' name='submit' type='submit' value='Masuk'/><br /> <a class='lost-pwd' href='#'>Lupa Password Anda?</a><br /> <br /> </form><br /> </div><br /> <div class='left right'><br /> <form action='#' method='post'><br /> <h1>Belum Jadi Member? Daftar!</h1><br /> <label class='grey' for='signup'>Username:</label><br /> <input class='field' id='signup' name='signup' size='23' type='text' value=''/><br /> <label class='grey' for='email'>Email:</label><br /> <input class='field' id='email' name='email' size='23' type='text'/><br /> <label>Password akan dikirim ke email anda</label><br /> <input class='bt_register' name='submit' type='submit' value='Daftar'/><br /> </form><br /> </div><br /> <br /> </div><br /> </div><br /> <!-- /login --><br /> <!-- The tab on top --><br /> <div class='tab'><br /> <ul class='login'><br /> <li class='left'/><br /> <li>Daftar Dulu Yaa</li><br /> <li class='sep'>|</li><br /> <li id='toggle'><br /> <a class='open' href='#' id='open'>Masuk | Daftar</a><br /> <a class='close' href='#' id='close' style='display: none;'>Tutup Panel</a><br /> </li><br /> <br /> <li class='right'/><br /> </ul><br /> </div><br /> <!-- / top --><br /> </div><br /> <!-- panel -->

Simpan TEMPLATE (ingat...klik dulu PRATINJAU jika belum yakin betul dengan tampilan hasilnya...)