Skip to main content

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!

Comments

  1. 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ỉ :)

    ReplyDelete
  2. 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

    ReplyDelete
    Replies
    1. 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

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

    ReplyDelete

Post a Comment

Popular posts from this blog

Leveraging the Fast TikTok API on Apify for Efficient Data Scraping

Introduction: In the world of social media data analysis, TikTok has emerged as a popular platform with a vast amount of user-generated content. To extract valuable insights from TikTok, developers and researchers often resort to web scraping. One efficient way to accomplish this task is by utilizing the Fast TikTok API on the Apify platform. In this article, we will explore the benefits and capabilities of leveraging the Fast TikTok API for data scraping on TikTok. Check the API here:  https://apify.com/novi/fast-tiktok-api

Giải trí với video hài

Hy vọng video này sẽ giúp mọi người thư giãn và xả xì trét :D

Tutorial: Scraping Data from TikTok using Fast TikTok API with Python

In this tutorial, I will guide you through the process of scraping data from TikTok using the Fast TikTok API with Python. We will be using the requests library to make HTTP requests and retrieve data from the API. Let's get started! Step 1: Obtain API Credentials Go to https://apify.com and create an account if you haven't already. Once logged in, navigate to the Fast TikTok API page ( https://apify.com/novi/fast-tiktok-api ). Follow the instructions on the page to obtain your API credentials, such as an API key or access token. Make sure to note down these credentials for future use. Step 2: Set up your Python Environment Ensure that you have Python installed on your system. You can download the latest version of Python from the official website ( https://www.python.org ). Install the requests library by running the following command in your terminal: pip install requests Step 3: Import Required Libraries Open your preferred Python IDE or text editor and create a new Python