Khung search overlay cho Blogger

Khung tìm kiếm thì chẳng còn xa lại gì với chúng ta, mình thấy nó thường có dạng là một khung nhỏ để nhập từ khóa nhưng hôm nay mình sẽ giới thiệu một khung tìm kiếm kiểu overlay - tức là khi click vào nút tìm kiếm thì khung nhập từ khóa hiện ra và che khuất toàn bộ màn hình. Sau đây là các bước thực hiện để có nó.

#DEMO

#Thêm css

1. Đăng nhập Blogger

2. Mẫu > Chỉnh sửa HTML

3. Tìm thẻ ]]></b:skin>

4. Dán code dưới vào trên thẻ mà bạn vừa tìm

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/AVvXsEiqZL3KBrD_1DDEl8Bzb0pCjVlijg9oJxXr6y-3Gl60laTSeY6ae617UPTjXJYfBl2jiuSRYSiXfTozic7bkpsAMTtq7nLsTLwIarDMzkicgl-AwUWKzWZ70YTvgAEBeKeb4DvSOenFhaQ/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;
}

Các bạn có thể thay link ảnh của nút close thành một hình ảnh nút close khác

#Thêm Script

1. Tìm thẻ </head>
2. Dán code dưới vào trên thẻ mà bạn vừa tìm

<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>

Nếu thực hiện với thẻ </head> mà không được thì bạn thử với thẻ </body> xem sao.

#Thêm HTML

1. Tìm thẻ Body mở của template

Mẹo: Tìm với <body là ra

2. Dán code dưới vào dưới thẻ body mà bạn vừa tìm

<!-- 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 -->

#Đặt nút tìm kiếm

Hãy tìm một nơi mà bạn ưng ý để đặt nút tìm kiếm rồi đưa code dưới vào, có thể là menu, HTML/Javascript ...

<button onclick="toggleOverlay()">Tìm kiếm</button>

kslzone.net

Khanh blog

Search This Blog