Khung tìm kiếm Style Overlay khá thú vị và độc đáo dành cho Blogger được tác giả
Kiều Sơn Lâm - KslZone.Net chia sẻ. Đây là một dạng khung tìm kiếm về chức năng thì không khác bình thường nhưng về giao diện thì nó đem tới cho bạn sự khác biệt với hiệu ứng Overlay cho blog.
Khung tìm kiếm Style Overlay cho Blogger
Preview
Tìm kiếm
Thêm khung tìm kiếm Style Overlay cho Blogger
Bước 1: Thêm đoạn CSS sau lên trước thẻ ]]></b:skin>
div#overlay{display:none;z-index:3;background:rgba(255,255,255,0.925);position:fixed;width:100%;height:100%;top:0;left:0;text-align:center;transition:top 0.3s ease}
div#close{content:"";position:absolute;display:block;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8gHQN5Apt0m_fRJdUn_KygrVxTUU-v6IDFadvulVhzKmgL7o8YOOODpaW6_cHDprANeeX6VZSYGXGJ9IqcE4aqX9X5Shl-pEt3yicP82n0Y3r7Jlu306oPJtMT4jACwcshBrwA-rcMxo/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 0 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}
Nút đóng khung search bạn có thể thay đổi tùy ý mình bằng việc chỉnh sửa link ảnh:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8gHQN5Apt0m_fRJdUn_KygrVxTUU-v6IDFadvulVhzKmgL7o8YOOODpaW6_cHDprANeeX6VZSYGXGJ9IqcE4aqX9X5Shl-pEt3yicP82n0Y3r7Jlu306oPJtMT4jACwcshBrwA-rcMxo/s1600/close.png
Bước 2: Thêm đoạn code sau lên trước thẻ </head>
<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>
Bước 3: Chèn đoạn code sau bên dưới thẻ <body>
<!-- Start Overlay -->
<!-- End Overlay -->
Bước 4: Chèn Button tìm kiếm tại nơi bạn cần chèn ví dụ như thanh menu, widget mới,...
<button onclick="toggleOverlay()">Tìm kiếm</button>
Lưu lại và bạn đã có một khung tìm kiếm độc đáo cho blog của mình.
Share this
EmoticonEmoticon