Cùng tìm hiểu trong bài viết này làm thế nào để làm cho một widget blogger cố định khi cuộn trang sử dụng đoạn code mẫu áp dụng cho nhiều chủ đề
Cùng tìm hiểu cách thực hiện qua các bước sau đây:
Bước 1
Đi đến bảng điều khiển blogger của bạn, bấm vào ‘Chủ đề’ và sau đó bấm vào ‘Chỉnh sửa HTML’.
Bây giờ điều đầu tiên luôn được khuyến khích làm là lấy bản sao lưu mẫu của bạn. Vì vậy, chỉ cần sao lưu mẫu của bạn.
Bước 2
Tìm mã sau trong Mã XML của Mẫu (Chủ đề) của bạn: </ body> Bây giờ, ngay phía trên mã này, dán mã sau:
<script>
// Sticky widget by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("HTML10"); // enter your widget ID here
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.bs_sticking {background:#198dc9 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style>
(Nguồn: bloggersentral.com)
Bước 3
Thay thế văn bản ‘TÊN WIDGET / ID’ của bạn bằng tên hoặc id của tiện ích con mà bạn muốn áp dụng
Bước 4
Lưu mẫu của bạn và xem kết quả.
