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('&#x25B2;')
   else $(this).find('span').html('&#x25BC;')
  })
});


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!


Responses

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

VanLinhEx said...

Cái này chắc cũng ko cần thiết vì chỉ dành cho admin , mà hầu như ai tham gia blogspot thì lúc nào tài khoản cũng đã login rồi , phải ko nhỉ :)


January 26, 2013 at 10:56 PM
Karl Carsten said...

Nếu họ vào tiệm net thì có lẽ là cần đó bác. Mà em thấy cái này làm blog chuyên nghiệp hơn hẳn :) dù không có tác dụng mấy :-d


January 27, 2013 at 8:37 AM
VanLinhEx said...

Là Blogger thì ít ai ra tiệm net lắm , nên cái này ko phổ biến cho lắm . Để vậy cho có thôi chứ mấy ai dùng :D


January 27, 2013 at 10:01 PM
Hiếu Nguyễn Văn said...

làm sao để tạo form tìm kiếm giống bạn vậy!
hướng dẫn mình dc hog!?


June 7, 2013 at 1:00 PM
Nguyên Hoàng said...

Với Công Nghệ In Bằng Giống Các Trường Đại Học Trên Toàn Quốc
Làm Bằng Đại Học Tại TPHCM - Làm Bằng Đại Học Giá Rẻ

http://lambangdaihocgia.xtgem.com/
Nhận làm bằng đại học tại tphcm, hà nội và các tỉnh trên toàn quốc, cao đẳng, trung cấp, bằng cấp 3. Dịch vụ làm bằng đại học phôi gốc cùng các loại chứng chỉ nghề, anh văn tin học, toeic giá rẻ.
Chúng tôi chuyên nhận làm bằng đại học phôi gốc uy tín, giá rẻ trên toàn quốc. Đặc biệt giá cả cạnh tranh.
Nếu bạn đang cần một tấm bằng đại học để tăng lương, hay để được đề cử lên chức vụ cao hơn hoặc đơn giản chỉ là để đối phó với gia đình.
Nếu bạn muốn làm bằng đại học giá rẻ hãy Liên Hệ với chúng tôi: 096 113 5459

Làm bằng đại học giá rẻ
Làm bằng đại học giá gốc
Làm bằng đại học uy tín, chất lượng
Làm bằng đại học không cần đặt cọc
Làm bằng đại học tại tphcm - hà nội
Làm bằng đại học uy tín trên toàn quốc

Image1
Làm bằng đại học giá rẻ tại TPHCM và Hà Nội

Thông tin cần cung cấp khi làm bằng giá rẻ
+ Họ Tên: Tên trong khai sinh đầy đủ của bạn
+ Ngày Sinh: Ngày sinh chính xác trong khai sinh của bạn
+ Nơi Sinh: Nơi sinh trên giấy khai sinh
+ Tên Trường: Trường bạn cần làm bằng đại học, ví dụ: đại học Nguyễn tất thành, đại học Quốc gia TPHCM
+ Tên Nghành: Ngành học bạn cần làm, ví dụ: Kế toán, Tài chính, IT...
+ Khóa Học
+ Năm Tốt Nghiệp: Bạn nên chọn năm cho phù hợp với tuổi của bạn
+ Giới Tính: Nam hoặc Nữ
+ Dân Tộc
+ Xếp Loại: Nên chọn Khá hoặc Giỏi
+ Ảnh: Đính kèm file

Vì sao bạn lại chọn dịch vụ làm bằng đại học giá rẻ
Với phương châm làm bằng đại học Uy Tín - Nhanh Chóng - Giá Rẻ và quan trọng nhất là đảm bảo chất lượng khi khách nhận được hàng nên chúng tôi luôn nhận được sự quan tâm và ủng hộ của những bạn có nhu cầu làm bằng đại học tại tphcm

Bạn làm việc với chúng tôi bằng cách nào
Chúng tôi sẽ gặp bạn và trao đổi thông tin trực tiếp, sau khi thỏa thuận xong chúng tôi sẽ tiến hành làm bằng đại học.
Bạn hoàn toàn yên tâm vì chúng tôi không bao giờ lấy tiền trước ( vì hiện nay có nhiều trường hợp gửi tiền cọc trước sau đó không liên lạc được ). đến khi nào làm bằng đại học xong chúng tôi mới lấy tiền.
Chúng tôi nhận làm bằng đại học ngay trong ngày nếu bạn cần gấp cho công việc.
Đảm bảo làm bằng đại học phôi thật, chất lượng tốt nhất, không giống chúng tôi sẽ hỗ trợ làm lại ngay cho bạn.

Liên hệ tư vấn làm bằng đại học
Mr Nguyên: 096 113 5459


October 19, 2015 at 10:12 PM

Post a Comment

FRIENDS

VanLinhEx Blog Duy Pham Blog BKAV giá rẻ Namkna Blog Đinh Công Thành ChinhTruc Blog VnZap! VnBlogExpress LaoDongBlog Thienhieu Vận chuyển nhà LuatIT Blog Kiếm tiền trên mạng Thế giới APKKiếm Tiền Trên Mạng GiangLe - Chia set phần mềm
Return to top of page Copyright © 2011 | Platinum Theme