Membuat Menu Register DI Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Mungkin Kamu Pernah Mampir Ke Situs Blog Yang  Disana, Ada Login, Register, Dalam Blog Tersebut

 Nah Kali Ini M.N.T Blog's  Akan Membahas Cara Membuatnya.

Check This Out..!

Ini Dia Langkah-Langkahnya. ::

1.     Pertama, kamu mesti login ke blogger.
2.     Kemudian klik Rancangan 
3.     Setelah itu klik Edit Html 
4.     Jangan lupa untuk mencentang Expand Widget Template (saya anjurkan download dahulu template kamu)
5.     Kemudian cari kode berikut ini </head>
6.     Setelah itu letakkan kode Javascript dibawah ini tepat diatasnya 

<script src='<span style="color: #990000;">http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js</span>'  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>  

    Setelah itu kamu cari kode ]]></b:skin>, Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelumnya. 

Setelah semuanya sudah kamu masukkan, langkah berikutnya adalah cari kode </body>, kemudian letakkan kode di bawah ini tepat diatasnya :

<!-- Login -->

<div id='toppanel'>

<div id='panel'>

<div class='content clearfix'>

<div class='left'>

<h1>Welcome In Fjb Tkj</h1>

<h2>Contoh Sliding Login Dengan JQuery</h2>

<p class='grey'>Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member</p>

<h2>Tutorial Blog</h2>

<p class='grey'>Untuk membuatnya Silahkan : <a href='fjb-tkj.blogspot.com' title='Download'>Klik Sini</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>Hy Everybody</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 -->

Pada kode diatas, untuk tulisan warna kuning bisa kamu ganti dengan tulisan yang kamu inginkan, begitu juga tulisan yang berwarna merah bisa kamu ganti dengan Login dan register misalnya. Kemudian klikSave Template kamu dan lihat hasilnya.

Oke, itu tadi pembahasan pada kali ini, bagi yang masih bingung jangan malu-malu untuk mengisi kotak komentar yang ada di bawah ini. Selamat mencoba dan semoga bermanfaat.

Ditulis Oleh : ImHero ~ Tempat Berbagi Dan Saling Bertukar Ilmu

Anda sedang membaca artikel tentang Membuat Menu Register DI Blog. Oleh Admin, Anda diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://mynametyo.blogspot.com/2012/11/membuat-menu-register-di-blog.html" target="_blank">Membuat Menu Register DI Blog</a>

:: Get this widget ! ::