Tạo Sticky kết dính Widget khi kéo thanh cuộn của blogspot

Bạn muốn nhấn mạnh 1 vị trí nào đó của Blog? Bạn muốn khoanh vùng những nội dung cần được chú ý trên blogger của mình?

Tạo Sticky hay còn hiểu là tạo kết dính 1 vị trí khi kéo thanh cuộn trình duyệt lúc mình xem Web hoặc Blog. Bài viết này itviet360 chia sẻ với bạn thủ thuật tạo Sticky cho nhiều Widget của blogspot.

Thủ thuật tạo Sticky cho nhiều Widget của blogspot

Demo các bạn xem bài (kéo thanh cuộn xuống để thấy nhé): Những câu nói hay về tình yêu

Các bước thực hiện thủ thuật

1. Xác định ID Widget của Blogger

- Vào bảng điều khiển -> bố cục -> Chỉnh sửa tiện ích mình cần tạo Sticky

Ví dụ ở trên mình xác định được đó là tiện ích HTML4

2. Code Sticky

- Vào mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)

- Tìm tới </body> và dán code dưới đây ngay trên nó


<script>
// Sticky widget by itviet360.com
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("HTML4");
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:#f2f2f2 !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> 
Trong đó:
Thuộc tính Style CSS .bs_sticking  các bạn có thể thay đổi theo ý mình nhé
Chúc các bạn vui vẻ
Xem nhiều thủ thuật hơn tại Lãng Tử Studio

Đừng quên Like và Share nếu thấy bài viết bổ ích