Thêm khung tìm kiếm kiểu Overlay vào Blogger

Khung tìm kiếm kiểu Overlay là gì? Overlay là một dạng khi hiển thị lên nó sẽ che phủ toàn bộ website hiện tại. Khung tìm kiếm này là dạng khi bạn nhấn vào nút tìm kiếm thì một Overlay sẽ hiện lên trong đó có khu vực tìm kiếm cho người dùng nhập vào. Để cho dễ hình dung thì đây là demo của mình.



Bạn có thể nhấn vào nút trên và xem thử nhé, đây là một trong những cái mà mình thấy khá là ok. Ý tưởng này mình tìm được ở một số giao diện Wordpress và hôm nay rảnh hoàn thành nhanh một cái cho Blogger xài luôn.

Thêm khung tìm kiếm kiểu Overlay vào Blogger
Khung tìm kiếm Overlay cho Blogger

Thêm khung tìm kiếm kiểu Overlay vào Blogger

Ok, ta bắt đầu vào làm việc thôi, các bạn truy cập vào phần chỉnh sửa HTML trên blog mà bạn muốn thêm khung tìm kiếm Overlay này vào. Bạn chèn đoạn mã sau đây lên trên thẻ ]]></b:skin>
div#overlay {
display: none;
z-index: 3;
background: rgba(255,255,255,0.925);
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
transition: top 0.3s ease;
}
div#close {
content: "";
position: absolute;
display: block;
background: url("http://3.bp.blogspot.com/-MlgYQixIlb0/VDnzj9GpbLI/AAAAAAAAC6I/ph57fa7k0u8/s1600/close.png");
top: 10px;
right: 10px;
height: 50px;
width: 50px;
background-size: 100%;
cursor: pointer;
top: 15px;
right: 15px;
}
div#specialBox {
display: none;
position: relative;
z-index: 4;
margin: 150px auto 0px auto;
width: 90%; 
height: 300px;
background: #FFF;
color: #000;
}
.form-search {
padding-bottom: 2em;
font-size: 10px;
font-size: 1rem;
}
.form-search label {
margin-bottom: 0.85em;
font-size: 2.1em;
line-height: 1.4;
color: #2c3e50;
text-transform: uppercase;
}
.form-search .search-query {
border: 0;
padding: 10px;
height: auto;
font-size: 5.5em;
letter-spacing: -0.05em;
line-height: 1;
color: #2c3e50;
background-color: transparent;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
width: 100%;
text-align: center;
}
.form-search input:focus{
outline: 0;
}
đây là đoạn css tùy chỉnh giao diện Overlay của mình. À mà bạn thấy ở trên có một link hình ảnh ở nguồn bên ngoài
http://3.bp.blogspot.com/-MlgYQixIlb0/VDnzj9GpbLI/AAAAAAAAC6I/ph57fa7k0u8/s1600/close.png
mình lụm đại cái hình nút "close" trên Google nhét vào bạn có thể thay thế bằng ảnh nút thoát khác.

Tiếp tục bạn tìm đến thẻ </head> và chèn đoạn mã sau lên trên
<script type="text/javascript">
function toggleOverlay(){
 var overlay = document.getElementById('overlay');
 var specialBox = document.getElementById('specialBox');
 overlay.style.opacity = .8;
 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>
đây là đoạn Javascript giúp cho ẩn hiện, kèm theo một số cái linh tinh khác.

Tiếp tục thôi, bạn chèn xuống dưới thẻ <body> đoạn này
<!-- Start Overlay -->
<div id="overlay">
<div id="specialBox">
 <form method="get" id="searchform" class="form-search center-text" action="/search">
  <label for="s">Gõ từ khóa và nhấn "Enter" để tìm kiếm</label><br/>
  <input type="text" id="s" class="search-query" name="q"/><br/><br/><br/>
 </form>
</div>
<div id="close" onclick="toggleOverlay()"></div>
</div>
<!-- End Overlay -->
cái này là khung HTML thôi, kết hợp với 2 cái ở trên thì nhìn vào chắc biết hết rồi nên chắc mình không phải giải thích thêm nhiều.

Bước cuối cùng bạn có thể thêm một widget mới hoặc chèn đoạn mã sau đây vào nơi mà bạn muốn chèn nút tìm kiếm
<button onclick="toggleOverlay()">Tìm kiếm</button>
cái nút này lười quá mình chơi bằng chữ luôn, nếu các bạn muốn thay bằng hình ảnh hoặc gì đó có thể tự tùy chỉnh lại nhé ^^. Lưu lại toàn bộ template và bạn đã có cho mình mộ giao diện khung tìm kiếm kiểu Overlay thật bá đạo trên Blogger của mình.

Lời kết

Đây là một ý tưởng bất chợt hôm qua nên mình muốn chia sẻ cho các bạn liền khỏi phải lăn tăn lại quên mất không biết phải viết gì lại ít thủ thuật Blogger trên blog nữa. Nếu bạn có bất cứ ý kiến gì cần mình hỗ trợ về giao diện hoặc thắc mắc gì thêm về giao diện khung tìm kiếm kiểu Overlay này thì hãy để lại nhận xét cho mình ở dưới.

5 bình luận

  1. avatar says

    lúc 23:55 12 tháng 10, 2014

    nếu muốn thay vào nút search mặc định thì làm sao vậy cậu?

  2. avatar says

    lúc 22:03 13 tháng 10, 2014

    Bây giờ bác muốn thay cái nút search mặc định trên template phải không để mình hướng dẫn cho dễ :D

  3. avatar says

    lúc 17:47 15 tháng 8, 2015

    "Tiếp tục bạn tìm đến thẻ và chèn đoạn mã sau lên trên" - Thẻ nào?

  4. avatar says

    lúc 18:41 18 tháng 8, 2015

    Thiếu rồi sorry, thẻ head ấy :D

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.