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
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ẻ
Tạo Sticky kết dính Widget khi kéo thanh cuộn của blogspot

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

Nếu bạn thấy hay thì hãy để khích lệ tinh thần chia sẻ của tác giả BV "Tạo Sticky kết dính Widget khi kéo thanh cuộn của blogspot"

2 comments:

  1. chỉ mình cách làm sticky gióng adsense của bạn tí

    ReplyDelete
  2. Có một vấn đề là nó chiếm luôn cả footer khi cuộn xuống cuối trang :(

    ReplyDelete

Copyright © 2014 Thanh niên Bình Định - Supported by: IT Việt