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

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

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é.

DMCA.com Protection Status

Blog mình đã bỏ hệ thống bình luận Blogspot và thay thế bằng bình luận Facebook từ ngày 11/07/2018 nên hơn 3k bình luận trước đó sẽ không còn hiển thị nữa. Nếu bạn không nhận được phản hồi về thắc mắc của bạn trong mỗi bài viết thì liên hệ trực tiếp với mình qua PCB Fanpage.