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.

 MỌI THÔNG TIN VUI LÒNG LIÊN HỆ NGAY VỚI CHÚNG TÔI :   

TRUNG TÂM NGHIÊN CỨU PHÁT TRIỂN CÔNG NGHỆ THẾ KỶ   
Phụ trách thiết kế : Mr.Mika 
Call me : 0926.340.479 - 0927.927.000 - Email :  Lienhe365@gmail.com 
Phụ trách kỹ thuật và kinh doanh : Mr. Sơn
Call me : 0919.083.000 - 0927.927.000   Email :   Setup247@Gmail.Com 
Hỗ trợ ZALO 24/24 :   Nhập số 0927.927.000 và zalo kết bạn và liên hệ nhé!

Không có nhận xét nào

Một số lưu ý khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!

» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com