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.
Tiếp tục bạn tìm đến thẻ </head> và chèn đoạn mã sau lên trên
Tiếp tục thôi, bạn chèn xuống dưới thẻ <body> đoạn này
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
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/AVvXsEhB68J1hMo5-JN7VuCRF43sDVJsEcTYD3IQNz_rKy6RUdTxfXJCeyrIdJ17lub71PN89zAp5KIa31jKJ9fXW3B8M9pQNNFX0bR89ltZqP41zdJO59n8auaBSnpNBaamXnR6s8qhIe4SnTY/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;
}https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB68J1hMo5-JN7VuCRF43sDVJsEcTYD3IQNz_rKy6RUdTxfXJCeyrIdJ17lub71PN89zAp5KIa31jKJ9fXW3B8M9pQNNFX0bR89ltZqP41zdJO59n8auaBSnpNBaamXnR6s8qhIe4SnTY/s1600/close.pngmì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>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 -->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>
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?
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
lúc 16:36 26 tháng 11, 2014
Hay quá :D
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?
lúc 18:41 18 tháng 8, 2015
Thiếu rồi sorry, thẻ head ấy :D