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

- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
- Email: lephuocsinh96@gmail.com
- Facebook: Fb.com/beohoavinh

Thứ Sáu, 23 tháng 3, 2018

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

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

1 nhận xét:

Ads by Google

Ads by Google

Popular Posts