Form đăng nhập cho Blogspot với hiệu ứng CSS3 và Jquery

 Mấy ngày nay em bận quá, không viết bờ lốc bờ liếc gì được, hôm nay mới vào thấy blog hơi "vắng khách" nên em post tạm bài này. Thứ nhất là để chống cháy, thứ hai là để câu khách :D

 Mà thôi không tám tào lao nữa, chúng ta vào việc chính thôi! Cái Form này em thấy ý tưởng từ Noct và một số blog khác cũng post. Đa số đều "view source đại pháp" nên code không chuyên nghiệp chút nào. Vì vậy em viết bài này để giới thiệu Form mới với Style khá bắt mắt. Hy vọng mọi người sẽ thích.

DEMO 

 Cách tiến hành:

•  Đăng nhập vào Blog
• Vào Mẫu >> Chỉnh sửa HTML >> Chèn code sau vào trước ]]></b:skin>

Ceewave ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  background: #eee;
  border-bottom: 1px solid #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;    
}

Ceewave li {
  float: left;          
}

Ceewave #login {
  border-right: 1px solid #ddd;
  -moz-box-shadow: 1px 0 0 #fff;
  -webkit-box-shadow: 1px 0 0 #fff;
  box-shadow: 1px 0 0 #fff;  
}

Ceewave #login-trigger,
Ceewave #signup a {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  padding: 0 8px;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 #12dbe5; 
}

Ceewave #signup a {
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

Ceewave #login-trigger {
  -moz-border-radius: 3px 0 0 3px;
  -webkit-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

Ceewave #login-trigger:hover,
Ceewave #login .active,
Ceewave #signup a:hover {
  background: #fff;
}

Ceewave #login-content {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 999;    
  background: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  background-image: -webkit-linear-gradient(top, #fff, #eee);
  background-image: -moz-linear-gradient(top, #fff, #eee);
  background-image: -ms-linear-gradient(top, #fff, #eee);
  background-image: -o-linear-gradient(top, #fff, #eee);
  background-image: linear-gradient(top, #fff, #eee);  
  padding: 15px;
  -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -moz-border-radius: 3px 0 3px 3px;
  -webkit-border-radius: 3px 0 3px 3px;
  border-radius: 3px 0 3px 3px;
}

Ceewave li #login-content {
  right: 0;
  width: 250px;  
}

/*--------------------*/

#inputs input {
  background: #f1f1f1;
  padding: 6px 5px;
  margin: 0 0 5px 0;
  width: 238px;
  border: 1px solid #ccc;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 1px #ccc inset;
  -webkit-box-shadow: 0 1px 1px #ccc inset;
  box-shadow: 0 1px 1px #ccc inset;
}

#inputs input:focus {
  background-color: #fff;
  border-color: #e8c291;
  outline: none;
  -moz-box-shadow: 0 0 0 1px #e8c291 inset;
  -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
  box-shadow: 0 0 0 1px #e8c291 inset;
}

/*--------------------*/

#login #actions {
  margin: 10px 0 0 0;
}

#login #submit {  
  background-color: ##4545d0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#45d0d0), to(#4545d0));
  background-image: -webkit-linear-gradient(top, #45d0d0, #4545d0);
  background-image: -moz-linear-gradient(top, #45d0d0, #4545d0);
  background-image: -ms-linear-gradient(top, #45d0d0, #4545d0);
  background-image: -o-linear-gradient(top, #45d0d0, #4545d0);
  background-image: linear-gradient(top, #45d0d0, #4545d0);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;    
  border: 1px solid #7e1515;
  float: left;
  height: 30px;
  padding: 0;
  width: 100px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #fff;
}

#login #submit:hover,
#login #submit:focus {  
  background-color: #e97171;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));
  background-image: -webkit-linear-gradient(top, #d14545, #e97171);
  background-image: -moz-linear-gradient(top, #d14545, #e97171);
  background-image: -ms-linear-gradient(top, #d14545, #e97171);
  background-image: -o-linear-gradient(top, #d14545, #e97171);
  background-image: linear-gradient(top, #d14545, #e97171);
} 

#login #submit:active {  
  outline: none;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;  
}

#login #submit::-moz-focus-inner {
  border: none;
}

#login label {
  float: right;
  line-height: 30px;
}

#login label input {
  position: relative;
  top: 2px;
  right: 2px;
}

• Tiếp tục chèn code sau vào trước thẻ </head>

$(document).ready(function(){
 $('#login-trigger').click(function(){
  $(this).next('#login-content').slideToggle();
  $(this).toggleClass('active');     
  
  if ($(this).hasClass('active')) $(this).find('span').html('▲')
   else $(this).find('span').html('▼')
  })
});

Code này có tác dụng chính là xoay ngược dấu mũi tên (sẽ xuất hiện ở sau).

•  Lưu mẫu lại
  

• Tạo một Widget HTML tại nơi mà bạn muốn nó xuất hiện và dán code sau vào:

<ceewave>
 <ul>
  <li id="login">
   <a id="login-trigger" href="#">
    Log in <span>▼</span>
   </a>
   <div id="login-content">
    <form action='https://accounts.google.com/ServiceLoginAuth' method='post' novalidate="">
 
    <fieldset id="inputs">
      <input id="username" type="email" name="Email" placeholder="Your email address" required />   
      <input id="password" type="password" name="Password" placeholder="Password" required />
     </fieldset>
     <fieldset id="actions">
      <input type="submit" id="submit" value="Log in" />
      <label><input type="checkbox" checked /> Keep me signed in</label>
     </fieldset>
    </form>
   </div>                     
  </li>
  <li id="signup">
   <a href="https://www.blogger.com/signup.g">Sign up FREE</a>
  </li>
 </ul>
</ceewave>

Lưu lại, thế là xong!