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.
 |
| 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisS6ZjNAK0EWqYKWww1Q3VM2F80PZLppVv1fYsB1ft4XcmaTusJALSRIekDtBdYs_oOoBlo3_Gbn9LrZJH2gn51bhjl1G3SRt8Idnfy7SeLT6TyC3J3sS2aXXUJQB7VdisRXZVOlt1ZJA/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
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisS6ZjNAK0EWqYKWww1Q3VM2F80PZLppVv1fYsB1ft4XcmaTusJALSRIekDtBdYs_oOoBlo3_Gbn9LrZJH2gn51bhjl1G3SRt8Idnfy7SeLT6TyC3J3sS2aXXUJQB7VdisRXZVOlt1ZJA/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
<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>
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.
Belum ada tanggapan untuk "Thêm khung tìm kiếm kiểu Overlay vào Blogger"
Post a Comment