Cách tạo widget trượt – Sticky widget cho blogger

0

Widget sticky là một widget có vị trí không đổi khi di chuyển từ đầu trang tới chân trang. Nó là một menu chạy dọc khắp trang và chuyển động. Tạo menu trượt Widget Sticky được nhiều blogger sử dụng thường nhằm mục đích tạo thu hút sự chú ý của người dùng về nội dung trong đó. Nó thường dùng để đặt quảng cáo Adsense tăng doanh thu ,…

1 .Đăng nhập vào blogger và chọn blog cần tạo.

2. Chọn vào bố cục, mở tiện ích HTML mà bạn cần chuyển thành Widget Sticky.

3. Kéo hết thanh địa chỉ trên tiện ích để lấy ID Widget.

tạo menu trượt cho blog
Lấy ID Widget


4. Vào mẫu, chọn chỉnh sửa HTML, bạn bấm tổ hợp phím Ctrl + F tìm thẻ </body> và chèn đoạn mã sau đây vào trước nó

<script>
//<![CDATA[
bs_makeSticky(“HTML6”);
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; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style>

Lưu ý: HTML6 là ID widget của bạn cần làm.
Hoàn tất save template lại và kiểm tra nhé !