Khung tìm kiếm hiệu ứng mở rộng đẹp cho blogspot

Khung tìm kiếm (còn gọi là search box) là một phần không thể thiếu đối với mỗi website/blog. Nó giúp người đọc có thể tìm kiếm bài viết theo từ khóa họ nhập vào, là một cách rất nhanh chóng để tìm được các bài viết có nội dung đúng ý họ. Hôm nay, mình sẽ chia sẻ cho các bạn một mẫu khung tìm kiếm có hiệu ứng mở rộng ra khi ta click chuột vào cho blogspot nhé.

How to create Animated Search Box

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 này trước

]]></b:skin>

.pcb_box {
  position: relative;
  display: inline-block;
}
.pcb_search {
  position: relative;
}
.pcb_input {
  width: 30px;
  height: 30px;
  background: none;
  border-radius: 50%;
  border: 2px solid #ddd;
  box-sizing: border-box;
  outline: 0;
  transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;
  transition-delay: 0.4s;
  color: #666;
  font-size: 15px;
}
.pcb_input::placeholder {
  padding:0 25px;
}
.inclicked {
  width: 300px;
  border-radius: 3px;
  padding: 0 15px;
  padding-right: 35px;
}
.pcb_button {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0;
  right: 0;
  box-sizing: border-box;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}
.pcb_button::before {
  content: '';
  width: 2px;
  height: 14px;
  background: #ddd;
  position: absolute;
  transform: rotate(-45deg);
  bottom: -10px;
  right: -3px;
  transition: 0.3s;
}
.close::before, .close::after {
  content: '';
  width: 2px;
  height: 15px;
  background: #555;
  position: absolute;
  bottom: 7px;
  right: 17px;
}
.close::before {
  transform: rotate(-45deg);
}
.close::after {
  transform: rotate(45deg);
}

Bạn có thể tùy ý chỉnh sửa lại các giá trị của mỗi thuộc tính sao cho hợp mắt nhất nhé.
Bước 3: Thêm thư viện Jquery trước

</head>

nếu blog bạn chưa có nhé.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>

Bước 4: Tiếp đó, ta chèn đoạn Jquery này trước

</body>

<script>
//<![CDATA[
$('.pcb_button').on('click',function(){
  $('.pcb_input').toggleClass('inclicked');
  $('.pcb_button').toggleClass('close');
});
//]]>
</script>

Bước 5: Đến bước này là bước chèn khung tìm kiếm. Ta có code để hiển thị như sau:

<div class='pcb_box'>
    <form action='/search' class='pcb_search' method='get'>
      <input class='pcb_input' name='q' placeholder='Tìm kiếm...' type='text'/>
      <button class='pcb_button' type='button'>
    </button></form>
  </div>

Tại đây có 2 lựa chọn cho bạn:

Chèn vào vị trí bất kì: đối với phần này đòi hỏi bạn phải có kiến thức về HTML và CSS thì mới làm được. Để làm gì? Thứ nhất, biết HTML để xác định được đúng vị trí cần chèn vì nếu chèn linh tinh sẽ gây vỡ bố cục giao diện và biết CSS để khi cần căn chỉnh hay fix sao cho vừa, cho hợp mắt thì ta còn làm được. Vì mỗi template đều có kết cấu khác nhau, code cũng khác nhau nên phần này tự mỗi bạn sẽ phải làm nhé.
Chèn vào widget (tiện ích): cái này đơn giản hơn rất nhiều, bạn chỉ việc vào Bố cục - Thêm tiện ích ở 1 chỗ bạn thích rồi nhét đoạn HTML bên trên vào rồi lưu lại là được. Tuy sẽ không có thẩm mỹ như trường hợp trên nhưng ít nhất thì vẫn có khung tìm kiếm đúng không nào?

Khi xong xuôi đến bước nào, để chắc chắn không quên thì cứ lưu lại mỗi khi làm nhé.

Lời kết

Khung tìm kiếm này chỉ sử dụng một đoạn Jquery cực ngắn và chủ yếu là CSS nên bạn hoàn toàn yên tâm là nó không ảnh hưởng đến tốc độ tải trang trên blog của bạn đâu nhé. Nếu cảm thấy bài viết hay và có ích thì hãy chia sẻ giúp mình nhé.