cara membuat form login panel slide JQuery yang elegan, form
ini akan dipasang diatas blog sobat(melayang)dan dengan fasilitas
buka/tutup,tentunya akan menambah cantik desain blog sobat,untuk lebih
detail dan jelasnya,lihat gambar :
1.) Login ke akun Blogger sobat
2.) Langsung menuju ke Dashboard > Template > Edit Html > Lanjutkan
3.) Backup dulu template sobat,Download template lengkap
4.) Centang tanda Expand template widget
5.) Lalu cari kode berikut ]]></b:skin> untuk memudahkan pencarian coba cari menggunakan Ctrl+F
6.) Setelah ketemu,copy kode dibawah ini lalu pastekan tepat diatas kode ]]></b:skin>
Kode
/***** 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 /> }<br />
8.) Setelah itu,copy kode dibawah ini dan taruh tepat diatas kode </head>
Kode
<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 $("#open").click(function(){ $("div#panel").slideDown("slow"); }); // Collapse Panel $("#close").click(function(){ $("div#panel").slideUp("slow"); }); // Switch buttons from "Log In | Register" to "Close Panel" on click $("#toggle a").click(function () { $("#toggle a").toggle(); }); }); </script><br /> <br /> <br />
10.) Copy kode dibawah ini,lalu pastekan kode ini tepat diatas kode </body>
Kode
<div id="toppanel"><div id="panel"><div class="content clearfix"><div class="left"><h1>Selamat Datang di Berbagi Nyata member forum</h1><h2>Silahkan Mendaftar atau masuk ke member area</h2><div class="grey">Dapatkan keuntungan-keuntungan yang menarik di dalam Berbagi Nyata ini,seperti tulis aretikel,komentar,diskusi,chat,update artikel langsung,pemberitahuan terbaru,dan masih banyak keuntungan lainnya,tunggu apa lagi?Ayo Daftar!</div><h2>Copyright 2011 All Right Reserved</h2><div class="grey">Informasi lebih lanjut : <a href="http://www.facebook.com/rizaldiuchiha" title="go to">Hubungi saya di Facebook</a></div></div><br /> <div class="left"><form action="http://berbaginyata.blogspot.com/2011/10/konfirmasi-login.html" class="clearfix" method="go to"><h1 class="padlock">Masuk member area</h1><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">Kata sandi:</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" /> Ingat saya</label><br /> <div class="clear"><input class="bt_login" name="submit" type="submit" value="Masuk" /><br /> <a class="lost-pwd" href="http://rizaldisite-member-forum.2304408.n4.nabble.com/template/NamlServlet.jtp?macro=forgot_password_page">Lupa kata sandi anda?</a><br /> <br /> </div></form><div class="left right"><form action="http://berbaginyata.blogspot.com/2011/10/konfirmasi-mendaftar.html" method="go to"><h1>Bukan member kami?Daftar Sekarang,GRATIS!</h1><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 /> <li>kata sandi akan segera dikirim ke email anda</li><br /> <input class="bt_register" name="submit" type="submit" value="Mendaftar" /></form></div></div></div><br /> <div class="tab"><ul class="login"><li class="left"><br /> </li> <li>Halo Semuanya</li> <li class="sep">|</li> <li id="toggle"><br /> <a class="open" href="http://www.blogger.com/post-create.g?blogID=4225129562485694166#" id="open">Masuk | Daftar</a><br /> <a class="close" href="http://www.blogger.com/post-create.g?blogID=4225129562485694166#" id="close" style="display: none;">Tutup Panel</a><br /> </li> <li class="right"><br /> </li> </ul></div></div></div>
12.) Terakhir Tinggal klik simpan template dan lihat hasilnya
Publish By :http://rizaldipriantama.blogspot.com
