Thêm khung tìm kiếm kiểu Overlay vào Blogger

vào


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/AVvXsEjQh2bxDdkpyBtYoNjB3zdTfD6ZmeCdM4EljBBQQP8RYrl9KoDvNVz5lQPUKBmVU2eXBVOI9wNo5fvuex01dThaxYI6ocLosMKJtF_5bEgA1-0p9AeX5hzyNdXOky_wVsmg6sJMhNwfHU8/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.

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


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>

Nhận xét

Đăng nhận xét