Khung tìm kiếm hiệu ứng mở rộng cực nhẹ và đẹp

Cách đây 1,2 hôm mình có chia sẻ đến các bạn 1 khung tìm kiếm hiệu ứng mở rộng rồi và tiếp tục hôm nay, mình sẽ gửi đến các bạn 1 khung tìm kiếm cùng hiệu ứng nhưng ở mức đơn giản hơn, thuần chỉ dùng HTML và CSS nhưng không kém phần chuyên nghiệp nhé.

Hover effect search form using css and html

Mục lục

Demo
Các bước thực hiện
Lời kết

Demo

Các bước thực hiện

Bước 1: Truy cập blogger.com - Chủ đề - Chỉnh sửa HTML.
Bước 2: Dán đoạn CSS sau lên trước

]]></b:skin>

.search-box {
  background: #2f3640;
  height: 25px;
  border-radius: 50px;
  padding: 10px;
}
.search-box:hover > .search-text {
  width: 190px;
  padding: 0 5px;
  border-radius: 50px;
}
.search-box:hover > .search-button {
  background: #fff;
  color: #3f2640;
}
.search-button {
  color: #e84118!important;
  float: right;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #3f2640;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: 0.4s;
}
.search-text {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: #fff;
  font-size: 15px;
  transition: 0.4s;
  line-height: 25px;
  width: 0px;
}

Bước 3: Thêm thư viện FontAwesome nếu như chưa có trước

</head>

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Bước 4: Chèn đoạn HTML hiển thị khung tìm kiếm vào bất kì chỗ nào bạn thích.

<div class="box">
    <form class="search-box" action="/search" method="get">
      <input class="search-text" type="text" name="q" placeholder="Tìm kiếm bài viết..."/>
      <a class="search-button" href="javascript:void(0);">
        <i class="fa fa-search"></i>
      </a>
    </form>
  </div>

Việc chèn code hiển thị khung tìm kiếm này mình đã có đề cập rất kĩ ở bài trước đó, bạn có thể tham khảo Bước 5 tại bài Khung tìm kiếm hiệu ứng mở rộng đẹp cho blogspot.
Bước 5: Lưu template lại.

Lời kết

Thực ra thì những khung tìm kiếm ta có thể tìm thấy rất nhiều ở trên mạng và bài này chỉ là 1 trong vô vàn các khung tìm kiếm đó thôi vì không hẳn ai cũng tìm được bài viết hoặc không rõ từ khóa .v.v. và quan trọng hơn nó phù hợp với những bạn chưa biết nên mình chỉ chia sẻ lại những thứ mà mình làm cũng như học được đến các bạn thôi. Chúc các bạn thành công và hãy luôn ủng hộ blog mình nhé.