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/AVvXsEgiUVkhrI7rptUfQxlkIK4w-yNZyVf9hrTlnRbtCICv0BuNL4wJBKaEqi9OJD36XV8TTNPnpS6-PjDS_sB7FrsFRd8PYy7L2CMmIxtN8V75qcD9tWFjovknw3zZ8rHHNdioxVENd8tO_AE/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/AVvXsEgiUVkhrI7rptUfQxlkIK4w-yNZyVf9hrTlnRbtCICv0BuNL4wJBKaEqi9OJD36XV8TTNPnpS6-PjDS_sB7FrsFRd8PYy7L2CMmIxtN8V75qcD9tWFjovknw3zZ8rHHNdioxVENd8tO_AE/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">đây là đoạn Javascript giúp cho ẩn hiện, kèm theo một số cái linh tinh khác.
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 -->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.
<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>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.
http://www.kslzone.net/2014/10/khung-tim-kiem-kieu-overlay-cho-Blogger.html
Leave a comment
To insert a link, use tag
[url=http://your_link]your-link[/url]To insert the code , use the tag
<i rel="code">your-code</i>The long code can use the tag
<i rel="pre">your-long-code</i>To insert an image , use the code
[img]URL Image[/img]To insert a title , use tag
<b rel="h4">Your Title here...</b>To creat Bold text
<strong>Your text here...</strong>To create Italic text used tag
<em>Your text here...</em>