 |
| Tạo widget cố định (Sticky widget) khi cuộn trang cho Blogspot - Ảnh: Blog Tranbadat |
Tạo widget cố định (Sticky widget) khi cuộn trang cho Blogspot
Hôm qua, mình mới đọc được một bài viết về Hướng dẫn làm Sticky menu trên Blog Tranbadat, và sau khi mình đã áp dụng thành công tại trang Chudu43 của mình.
Xem Demo tại đây. Nhớ cuộn chuột xuống hết trang và để ý menu bên phải nhé.
Vậy nên hôm nay, xin phép được dẫn lại nội dung bài viết ấy của anh Trần Bá Đạt để cho các bạn có thể biết được cách để tạo một cái widget cố định khi các bạn cuộn trang.
Cách làm widget cố định (Sticky widget)
Bước 1: Các bạn vào trang quản trị Blog. Tại mục Bố cục, các bạn tìm đến widget cần cố định và nhấn vào chỉnh sửa để copy toàn bộ nội dung code của phần widget đó.
Bước 2: Các bạn đưa toàn bộ code vừa coppy và thay vào đoạn code dưới đây theo mẫu đã được đánh dấu.
<script>var $stickyHeight = 460; // chiều cao của banner quảng cáovar $padding = 5; // khoảng cách top của banner khi dínhvar $topOffset = 2560; // khoảng cách từ top của banner khi bắt đầu dính (tức là khoảng cách tính từ trên xuống đến vị trí đặt banner )var $footerHeight = 100; // Định vị điểm dừng của banner, tính từ chân lên/* <![CDATA[ */function scrollSticky(){if($(window).height() >= $stickyHeight) {var aOffset = $('#sticky').offset();if($(document).height() - $footerHeight - $padding < $(window).scrollTop() + $stickyHeight) {var $top = $(document).height() - $stickyHeight - $footerHeight - $padding - 185;$('#sticky').attr('style', 'position:absolute; top:'+$top+'px;');}else if($(window).scrollTop() + $padding > $topOffset) {$('#sticky').attr('style', 'position:fixed; top:'+$padding+'px;');}else{$('#sticky').attr('style', 'position:relative;');}}}$(window).scroll(function(){scrollSticky();});/* ]]> */</script><div id="sticky">THAY CODE CỦA BẠN VÀO ĐÂY</div>
Bước 3: Sau khi thay, chúng ta có đoạn code mới. Hãy đưa toàn bộ code mới này thay thế vào widget cần cố định, bấm lưu và thưởng thức thành quả.
Nhớ chỉnh sửa thông số cho phù hợp với trang của các bạn nhé.
>>> Xem thêm các bài viết về chuyên mục Blogger TẠI ĐÂY
Nguồn: https://www.tranbadat.info
