Cara Membuat Sliding Login/Register Form Panel di Blog








بِسْÙ…ِ اللّÙ‡ِ الرَّØ­ْÙ…َÙ†ِ الرَّØ­ِÙŠْÙ…ِ

Cara Membuat Sliding Login/Register Form Panel di Blog. Bagi sobat yang pengen mempercantik blognya dengan menu register buat pengunjung setia-setianya, nih oopz-shootz kali ini akan share mengenai Cara Membuat Sliding Login/Register Form Panel di Blog.



Register disini maksudnya yaitu agar pengunjung blog sobat bila ingin ikut menuliskan pengetahuan mereka di blog kita agar lebih mudah. Karena klo untuk login di blogger kan tidak semuanya yang memiliki akun di blogger.

untuk screen shootnya dibawah ini sob.


Gimana apakah sobat tertarik???
ya klo tertarik tak share caranya nih, tp klo kagak yaaaa... cari artikel yang lain dulu deh, jangan buru ninggalin blog ini wkwkwkwkwkwkwkw

Cara Membuat Sliding Login/Register Form Panel di Blog
1. login blog
2. buka menu rancangan >> edit HTML (centang "Expand Template Widget")
3. cari kode ]]></b:skin>
4. letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

5. lalu letakkan kode dibawah ini tepat dibawah kode ]]></b:skin>

6. lalu cari kode </body>
7. letakkan kode dibawah ini tepat diatasnya
<!-- Login -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left'>
<h1>Welcome In Oopz-Shootz</h1>
<h2>login or join oopz-shootz</h2>
<p class='grey'>to login or join to oopz-shootz, please complete the boxes next to the login and registration</p>
<h2>By Misbahul Ma'ruf</h2>
<p class='grey'>Copyright© 2012<a href='http://oopz-shootz.blogspot.com' title='Download'>oopz-shootz</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>Misbahul Ma'ruf</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 -->

Perhatikan kode diatas yang diberi warna Merah dan Biru, gantilah tulisan tersebut sesuai keinginan sobat.
8. simpan dan lihat hasilnya

Sekian dari saya mengenai Cara Membuat Sliding Login/Register Form Panel di Blog. semoga bisa bermanfaat bagi sobat.

Good LUCK ^_^
Previous
Next Post »

Mohon dengan sangat untuk berkomentar dan saran demi kemajuan bersama,, beri kritik yang bermanfaat dan jangan lupa join blog ini..!
oke??? terima kasih :) ConversionConversion EmoticonEmoticon

Thanks for your comment