Khi chúng ta truy cập vào 1 trang web thông thường cuộn chuột xuống dưới thì các tiện ích phía trên sẽ ẩn đi. Chúng ta muốn hiển thị Widget có id bất kì khi cuộn chuột xuống dưới phải làm thế nào ? Hôm nay Viettin365.com giới thiệu đến các bạn thủ thuật Cách tạo Widget trượt theo blog có id bất kì cho blogspot, với thủ thuật này Widget được chọn hiển thị trượt theo blog sẽ luôn xuất hiện trên giao diện nhìn thấy Ảnh minh họa :
Demo : Click here
Các bước thực hiện :1. Đăng nhập blogger2. Xác định Id của Widget luôn hiển thị trượt theo blog :2.1 . Chọn bố cục và chọn Widget2.2 . Xác định Id
ID ví dụ mình làm ở đây Popularpost1
2. Chọn mẫu ==> Chỉnh sửa HTML3. Dán code bên dưới trước thẻ </body>
<script>
// Sticky widget by Viettin365.com
// Tutorial at http://www.viettin365.com/2013/10/Cach-tao-widget-truot-theo-blog-co-id-bat-ki-cho-blogspot.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("Popularpost1");
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>
Chỉnh các thuộc tính trong .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;} theo ý bạn
Chúc các bạn thành công !
