Selamat datang di Website Teknologi Terkini! Nikmati informasi terbaru dan inovasi teknologi.

Cara Membuat Login & Register Form di Blogger

Cara membuat Sliding Login & Register Form Panel (Kotak Masuk & Daftar) di Blogspot dengan jQuery.

Widget Login dan Register ini biasanya digunakan di blog yang punya member (anggota).

Tampilan kotak login/register ini ada di bagian atas halaman blog atau di atas header/top menu. Begitu diklik akan muncul kotak seperti gambar ilustrasi.

Cara Membuat Login-Register Form di Blogspot

1. Template > Edit HTML

2. Copas kode berikut ini 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() {

// 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>

3. Copas kode berikut ini di atas kode ]]</b:skin>

/***** 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;
}

4. Copas kode berikut ini di atas kode </body>

<!-- Login -->
<div id='toppanel'>

<div id='panel'>
<div class='content clearfix'&gt;
&lt;div class='left'&gt;
&lt;h1&gt;Welcome to CB Network&lt;/h1&gt;
&lt;h2&gt;Contoh Login Form Blogspot&lt;/h2&gt;
&lt;p class='grey'&gt;Ini demo atau contoh Kotak Login dan Register Form. Login Form di samping ini hanya contoh dan tidak dapat digunakan layaknya Login Form FB karena blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member&lt;/p&gt;
&lt;h2&gt;Tutorial Blog&lt;/h2&gt;
&lt;p class='grey'&gt;Untuk membuatnya silakan &lt;a href='http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html' target='_blank' title='Download'&gt;Pencet Sini&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;div class='left'&gt;
&lt;form action='#' class='clearfix' method='post'&gt;
&lt;h1 class='padlock'&gt;Member Login&lt;/h1&gt;
&lt;label class='grey' for='log'&gt;Username:&lt;/label&gt;
&lt;input class='field' id='log' name='log' size='23' type='text' value=''/&gt;
&lt;label class='grey' for='pwd'&gt;Password:&lt;/label&gt;
&lt;input class='field' id='pwd' name='pwd' size='23' type='password'/&gt;
&lt;label&gt;&lt;input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/&gt; Remember me&lt;/label&gt;
&lt;div class='clear'/&gt;
&lt;input class='bt_login' name='submit' type='submit' value='Login'/&gt;
&lt;a class='lost-pwd' href='#'&gt;Lost your password?&lt;/a&gt;


&lt;/form&gt;
&lt;/div&gt;
&lt;div class='left right'&gt;
&lt;form action='#' method='post'&gt;
&lt;h1&gt;Not a member yet? Sign Up!&lt;/h1&gt;
&lt;label class='grey' for='signup'&gt;Username:&lt;/label&gt;
&lt;input class='field' id='signup' name='signup' size='23' type='text' value=''/&gt;
&lt;label class='grey' for='email'&gt;Email:&lt;/label&gt;
&lt;input class='field' id='email' name='email' size='23' type='text'/&gt;
&lt;label&gt;A password will be e-mailed to you.&lt;/label&gt;
&lt;input class='bt_register' name='submit' type='submit' value='Register'/&gt;
&lt;/form&gt;
&lt;/div&gt;


&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /login --&gt;
&lt;!-- The tab on top --&gt;
&lt;div class='tab'&gt;
&lt;ul class='login'&gt;
&lt;li class='left'/&gt;
&lt;li&gt;Halo Semuanya&lt;/li&gt;
&lt;li class='sep'&gt;|&lt;/li&gt;
&lt;li id='toggle'&gt;
&lt;a class='open' href='#' id='open'&gt;Masuk | Daftar&lt;/a&gt;
&lt;a class='close' href='#' id='close' style='display: none;'&gt;Tutup Panel&lt;/a&gt;&lt;/li&gt;

&lt;li class='right'/&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;!-- / top --&gt;
&lt;/div&gt;
&lt;!-- panel --&gt;

5. Save Template!

Nah itu saja artikel Cara Membuat Login & Register Form di Blogger dari saya jika ada salah penjelasan atau penjelasan kurang jelas mohon maaf terimakasih :)

Baca juga :

About the Author

Perkenalkan nama saya Lewis Christian Sirait, saya sekarang sekolah di SMP Swasta Katolik Budi Murni 1 Medan.Saya berbisnis editor video, penulis, dan pengembang situs.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.
advertisement
advertisement