Các bước thực hiện
Bước 1. Đăng nhập Blogger ➔ Chủ đề ➔ Chỉnh sửa HTML.
Bước 2. Copy đoạn code sau và dán vào trước thẻ
</head>
trong template.<script>
//<![CDATA[
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
center: false
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
};
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer);
}
$.fn.sticky = function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
if (o.center)
var centerElement = "margin:auto;";
stickyId = stickyElement.attr('id');
stickyElement
.wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
.css('width', stickyElement.width());
var elementHeight = stickyElement.outerHeight(),
stickyWrapper = stickyElement.parent();
stickyWrapper
.css('width', stickyElement.outerWidth())
.css('height', elementHeight)
.css('clear', stickyElement.css('clear'));
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
elementHeight: elementHeight,
className: o.className
});
});
};
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#PopularPosts1").sticky({topSpacing:10,bottomSpacing:535});
});
</script>
Chỉnh sửa
- Thay #PopularPosts1 thành ID của widget mà bạn muốn nó trượt.
- topSpacing:10 là khoảng cách tính từ đầu trang xuống tới phía trên của widget.
- bottomSpacing:535 là khoảng cách tính từ chân trang lên đến phía dưới của widget.
Nếu bạn muốn nhiều widget cùng trượt một lúc thì chỉ cần thêm đoạn sau vào trước dấu }); là được.
$("#ID").sticky({topSpacing:10,bottomSpacing:535});
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaFix rồi hay sao ý :3
Trả lờiXóaTUT Blogger chứ có phải TUT Facebook đâu mà fix :v
XóaChứ e làm có đc đâu ?
XóaEm mời anh vào làm giúp em nha ♥
XóaỪm, mời đi, để vào thử xem sao.
XóaOk mời rồi đó anh. Sẵn tiện anh làm giúp em cột share của addthis nha ♥
XóaSet admin đi, anh chấp nhận rồi đấy.
XóaOk rồi nha anh. Anh làm giúp em nhé :D
XóaTemplate chỉnh sửa nhiều quá nên bị xung đột rồi, thử nhiều cách khác trên mạng vẫn không thấy làm được, trong khi các template khác vẫn làm được.
XóaỌc :3
Xóa