Sharing Mie

<div dir="ltr" style="text-align: left;" trbidi="on">
 
<div dir="ltr" style="line-height: 22px;" trbidi="on">
Cara Membuat/Memasang Sliding Login/Register Form Panel di Blog, Bagi sobat yang ingin memasang form <a href="http://dubraw735.blogspot.com/2012/05/maz-dani-forum-community.html" style="color: red; text-decoration: none;" target="_blank">Login/Register</a> agar mempercantik tampilan blog, atau mungkin sobat mempunyai <a href="http://dubraw735.blogspot.com/2012/05/maz-dani-forum-community.html" style="color: red; text-decoration: none;" target="_blank">forum</a> sendiri tidak ada salahnya mencoba Cara Membuat/memasang Sliding Login/Register Form Panel di Blog, penasaran ingin melihat form Login/Register? tunggu apa lagi ayo kita buat form loggin 
Langkah langkahnya pun tidak terlalu rumit dan mudah 
-. login blog -. buka menu Template >> edit HTML (centang "Expand Template Widget") -.cari Tag ]]></b:skin> -. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>  
 
 
<div style="border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(238, 238, 238); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(238, 238, 238); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(238, 238, 238); border-top-style: solid; border-top-width: 1px; height: 100px; overflow-x: auto; overflow-y: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: 300px;">
/***** 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; 
}</div>
 
 
-.Langkah selanjutnya Copy paste kode dibawah ini dal letakan dibawah kode ]]></b:skin>  
<div style="border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(238, 238, 238); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(238, 238, 238); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(238, 238, 238); border-top-style: solid; border-top-width: 1px; height: 50px; overflow-x: auto; overflow-y: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: 300px;">
<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></div>
</div>
 -stelah itu Copy paste kode dibawah ini diatas </body>  
 
 
<div class="MsoNormal" style="line-height: 22px;">
</div>
<blockquote class="tr_bq">
<div id='toppanel'><div id='panel'><div class='content clearfix'><div class='left'><h1>Brother_Palma</h1><h2>Forum Comunity</h2>Selamat Bergabung<h2>Tutorial Blog</h2>Untuk membuatnya Silahkan : <a href='http://www.palmahutabarat.blogspot.com' title='Download'>Klik Disini</a></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><div class='tab'><ul class='login'><li class='left'/><li>Welcome</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></div></blockquote>
<div class="MsoNormal" style="line-height: 22px;">
 </div>
<div class="MsoNormal" style="line-height: 22px;">
 </div>
<div class="MsoNormal" style="line-height: 22px;">
Simpan Dan lihat hasil kerja anda</div>
<div class="MsoNormal" style="line-height: 22px;">
Smoga Sukses</div>
<div class="MsoNormal" style="line-height: 22px;">
NB: Ganti Bila perlu tulisan merah dan biru diatas</div>
<div class="MsoNormal" style="line-height: 22px;">
Demikian tutorial blog Cara Membuat/Memasang Sliding Login/Register Form Panel di Blog</div>
 
 
Copyright<a href="http://www.palmahutabarat.blogspot.com/" rel="nofollow" target="_blank">@Palma_Hutabarat69</a></div>

Blogger CSS Javascript jQuery Cara Membuat Sliding Form Panel Log_In di Blog

Cara Membuat/Memasang Sliding Login/Register Form Panel di Blog, Bagi sobat yang ingin memasang form Login/Register agar mempercantik...

Sharing Mie

Cara Membuat Sliding Form Panel Log_In di Blog

Entri Populer

Arsip Blog