Tạo khung tìm kiếm toàn màn hình (Overlay) đơn giản cho Blogspot

tao khung tim kiem toan man hinh overlay don gian cho blogspot

Khung tìm kiếm toàn màn hình là một kiểu tìm kiếm khá là đẹp mắt với kiểu hiển thị che toàn bộ màn hình và chỉ hiển khung tìm kiếm nhằm giúp người đọc có thể tập trung vào việc tìm kiếm từ khóa.

Với kiểu tìm kiếm này, trang của bạn sẽ trở nên chuyên nghiệp hơn và thu hút được người đọc hơn. Ngoài ra, nó rất thích hợp với các thiết bị di động thông minh như điện thoại, máy tính bảng,... tạo cảm giác dễ chịu cho người sử dụng.

Bạn có thể nhấn nút Tìm kiếm ở dưới đây để xem thủ thuật này hoạt động như thế nào nhé!

TẮT

Bây giờ, chúng ta cùng bắt đầu thực hiện nào.

Khung tìm kiếm Overlay đẹp

Bước 1. Đăng nhập tài khoản Blogger > Chủ đề > Chỉnh sửa HTML.

Bước 2. Sao chép đoạn mã Javascript dưới đây rồi dán chúng vào trước thẻ đóng </head>.

<script type="text/javascript">
function toggleOverlay(){
 var overlay = document.getElementById('background-overlay');
 var specialBox = document.getElementById('box-search');
 overlay.style.opacity = .95;
 if(overlay.style.display == "block"){
  overlay.style.display = "none";
  specialBox.style.display = "none";
 } else {
  overlay.style.display = "block";
  specialBox.style.display = "block";
  document.forms['searchform'].elements['s'].focus();
 }
}
</script>

Bước 3. Sao chép đoạn mã HTML dưới đây rồi dán chúng vào sau thẻ mở <body>.

<div id="background-overlay">
<div id="box-search">
 <form method="get" id="searchform" class="form-search center-text" action="/search">
  <label for="s">NHẬP TỪ KHÓA VÀ NHẤN ENTER</label><br/>
  <input type="text" id="s" class="search-query" name="q"/>
 </form>
</div>
<div id="button-close" onclick="toggleOverlay()">TẮT</div>
</div>

Bước 4. Sao chép đoạn mã HTML hiển thị dưới đây vào chỗ mà bạn muốn để hiện thị nút tìm kiếm.

<button onclick="toggleOverlay()">TÌM KIẾM</button>

Bước 5. Nhấn vào nút Lưu chủ đề để hoàn tất.

Ngoài ra, nếu bạn muốn trang trí cho nút tìm kiếm trông đẹp hơn (giống như ở trên) thì bạn hãy chép đoạn mã này vào trước thẻ đóng ]]></b:skin> ở trong Chỉnh sửa HTML và sau đó nhấn nút Lưu chủ đề.

#background-overlay {display:none; z-index:9999; background:#069; position:fixed; top:0; left:0; width:100%; height:100%; text-align:center; transition:top 0.5s ease}
#button-close {display:block; position:absolute; top:20px; right:20px; cursor:pointer; background:#fff; color:#069; padding:5px 15px 3px 15px; font-size:14px; font-weight:700; border-radius:5px}
#box-search {display:none; position:relative; z-index:99999; margin: 150px auto 0 auto; width:90%}
.form-search label {font-size:20px; font-weight:500; line-height:2; color:#fff}
.form-search .search-query {border:none; border-bottom:2px dashed #fff; margin:30px 0 0 0; padding:10px 20px; font-size:18px; line-height:2; color:#fff; background:transparent; width:100%; text-align:center}
.form-search input:focus {outline:0}
.button-search {background:#069; color:#fff; padding:7px 15px 5px 15px; border:none; border-radius:100px; font-size:15px; font-weight:700}
.button-search:hover {background:#f1f1f1; color:#999}

Chúc bạn thành công!