Làm cho widget trượt theo màn hình cho Blogger
Hiện tại có rất nhiều cách để làm cho website của chúng ta nhìn ngầu và chuyên nghiệp hơn trong mắt người dùng. Nhiều người thì trang trí cho blog mình có một vẻ ngoài bắt mắt, người thì thêm những hiệu ứng bá đạo khác lạ gây hứng thú cho người dùng. Những việc làm tưởng chừng nho nhỏ này có tác động không hề nhỏ đến thiện cảm của người dùng đối với website của chúng ta, và nếu bạn bỏ lỡ qua điều này thì đang khiến bạn bỏ lỡ cơ hội để tạo dựng lượng khách cố định mà mọi blogger đều mong muốn.
Cũng cùng lý do này, lẩn quẩn tìm quanh trên mạng mình tìm thấy đoạn jQuery giúp cho một thứ bất kì trượt theo khung màn hình, và mình quyết định viết bài hướng dẫn xài nó với Blogger cho mọi người.
Tại trang tổng quan » Mẫu » Chỉnh sửa HTML
Ở đây bạn tìm đến thể </body> và chèn đoạn mã này lên trên
Làm cho widget trượt theo khung màn hình cho Blogger
Đăng nhập vào trang tổng quan của blog mà bạn muốn thêm vào hiệu ứngTại trang tổng quan » Mẫu » Chỉnh sửa HTML
Ở đây bạn tìm đến thể </body> và chèn đoạn mã này lên trên
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<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-left:auto;margin-right: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(){
$("#HTML5").sticky({topSpacing:0});
});
</script>
việc đơn giản của đoạn jQuery này là sẽ làm cho những phần tử mà bạn mong muốn ở trên trang trượt theo khi màn hình qua khu vực của nó. Ở đây bạn thay thế HTML5 bằng id mà widget bạn muốn nó trượt theo khung màn hình, và topSpacing bằng khoảng cách giữ widget đó với cạnh trên của màn hình rồi lưu lại.
lúc 16:52 11 tháng 7, 2014
Thank bạn nhiều nha !
Nhưng Widget của mình không dừng lại đúng vị trí như của bạn vậy nhỉ.
(của bạn dùng lại trên chữ " Nhãn ', còn của mình chạy xuống dưới luôn bạn ơi )
lúc 17:26 11 tháng 7, 2014
Haha thiếu xót trong bài viết rồi, cám ơn bạn nhé, ở đoạn code này
$("#HTML5").sticky({topSpacing:0});
bạn thêm
bottomSpacing vào để tính giới hạn khoảng cách với chân trang nhé
$("#HTML5").sticky({topSpacing:0,bottomSpacing:500});
lúc 18:15 15 tháng 7, 2014
bạn ơi nếu mình muốn nó chỉ trượt tới khung comment thì dừng trượt thì điều chỉnh sao vậy bạn,mình thử điều chỉnh bottomSpacing: 30, mà nó vẫn không dừng lại.giúp mình với.
lúc 18:16 15 tháng 7, 2014
giống như của bạn ý,nó chỉ chạy đến phần comment thì dừng mà không chạy đến phần footer.
lúc 18:19 15 tháng 7, 2014
à mình làm được rồi.
lúc 13:59 14 tháng 8, 2014
cho em xin cai code "co the ban thich" nhu anh dc ko a
lúc 14:11 14 tháng 8, 2014
Cái này là bài viết liên quan bình thường thôi bạn, bạn có thể xem qua cái này, mình đã chỉnh giao diện tương tự cái của mình, còn đặt chuẩn HTML5 nửa :)
http://www.kslzone.net/2014/08/bai-viet-lien-quan-co-hinh-anh-chuan-html5.html
lúc 21:36 16 tháng 9, 2014
xung đột jquery bạn ơi, mình thêm jquery vào thì nó xung đột với cái menu làm cho nó không xổ xuống đc, còn không thêm jquery vào thì nó không hoạt động bạn à :v
lúc 21:39 16 tháng 9, 2014
Vấn để xung đột trong jQuery là vấn đề rất thường gặp, cách khắc phục thì mình chịu thôi, để ngâm ra 2 đống code đấy với nhau, các biến hoặc các hàm nào có tác động đến nhau thì không đơn giản :D
lúc 22:13 12 tháng 11, 2014
thanh menu bị ẩn dưới các bài viết thì làm cách nào z bạn? mình trượt xuống thì được nhưng nó bị ẩn bởi các menu bài viết của mình bên dưới
lúc 22:23 12 tháng 11, 2014
Cái này thì liên quan đến z-index, bạn có thể tham khảo tại Google hoặc để lại địa chỉ blog ở đây mình xem qua cho bạn nhé.
lúc 23:06 13 tháng 11, 2014
mình tập tành làm thử, http://maublogbdt1.blogspot.com/ đây là trang mẫu của mình bạn xem thế nào? thk ad!
lúc 08:24 14 tháng 11, 2014
Ok, thấy menu bạn vẫn còn ẩn ở dưới, bạn chèn đoạn này lên trên b:skin nhé
#nav {
z-index: 1;
}
lúc 05:28 2 tháng 12, 2014
Chỉ chạy được cho widget thôi hả bạn nếu mình muốn đoạn mã này chạy xuống thì làm thế nào
< d i v class='f b-like' data-layout='standard' data-a ction=' like' d ata-show-f aces='f alse' da ta-sh are='tru e '>
lúc 18:36 2 tháng 12, 2014
Bạn đưa mình địa chỉ web và demo chi tiết cái mà bạn muốn cho nó chạy nhé.
lúc 21:32 3 tháng 12, 2014
đây nè bạn http://lucnganit.blogspot.com/2014/11/song-sot-sau-4-nam-bi-nhot-trong-buc.html ở trên phần chỗ "thích bài này" đó mình muốn nó chạy như trang xem123.net và phần nền màu hồng đó nữa
lúc 20:01 4 tháng 12, 2014
Bác thử thay #HTML5 bằng .meta xem thử rồi báo lại nhé
lúc 20:06 6 tháng 12, 2014
ok bạn ạ,nhưng mà nó chạy cả phần ngày tháng của bài viết xuống. làm sao để thêm màu như của xem123.net vậy bạn
lúc 20:35 6 tháng 12, 2014
Cái đó thì đơn giản bản tách code ra là được mà, bây giờ bạn dán đoạn
<div style='width: 642px;' class='meta'>
....
</div>
vào đây cho mình chỉnh rồi hướng dẫn tiếp cho bạn.
lúc 21:01 6 tháng 12, 2014
dán vào đâu hả bạn sao mình làm không được bạn làm được đoạn code like có màu nền và có bài trước bài sau như xem123 không
lúc 16:34 7 tháng 12, 2014
Thôi bây giờ bạn mời mình vào admin blog đó, mình làm cho dễ chứ hướng dẫn nữa, cái khung comment nó hơi bị loãng rainbow.lam25@gmail.com
lúc 17:10 7 tháng 12, 2014
Thưa anh! Cho em hỏi id widget nằm ở đâu ạ, em cảm ơn anh.
lúc 18:08 7 tháng 12, 2014
Bạn nhấn trên chỉnh sửa Widget trong bố cục rồi xem trên thanh địa chỉ đó bạn ^^
lúc 20:00 7 tháng 12, 2014
Thật sự em mà thấy trang Web có nội dung không lành mạnh thì em sẽ không dám truy cập trang đó. Không đủ can đảm để hướng dẫn tiện ích anh ạ :D
lúc 20:59 7 tháng 12, 2014
Anh qua bên này trả lời comment của em đi ạ! http://www.dongvietblog.com/2014/09/tao-recent-posts-voi-style-tin-tuc-dep-cho-blogspot.html
lúc 13:10 8 tháng 12, 2014
ok, bạn giúp mình tạo phần like, cmt, và bài viết liên quan giống trang đó nhé,nói chung phần bài viết càng giống càng tốt.
lúc 15:05 5 tháng 1, 2015
Cái này chỉ tạo được một sticky widget thôi. Liệu mình có thể tạo nhiều sticky widget được không nhỉ? Thank bạn nhé...
lúc 19:06 5 tháng 1, 2015
Đơn giản bạn chỉ cần nhân đôi đoạn code trong javascript cuối cùng thôi, ví dụ nhé
$(document).ready(function(){
$("#HTML5").sticky({topSpacing:0});
$("#HTML6").sticky({topSpacing:0});
$("#nav-bar").sticky({topSpacing:0});
});
lúc 18:31 10 tháng 10, 2015
cảm ơn
http://xempfaucet.blogspot.com
lúc 22:23 30 tháng 12, 2015
mình dùng cái của cậu thị bị xung đột nên mình thử code khác thì ok nhưng mình không biết cách cho nó dừng ở điểm nào đó nó cứ tuột xuống hết trang
xin lỗi ko liên quan tới bài cậu nhưng cậu có thể xem và giúp mình thử code này với
<style type="text/css">
.stickywidget{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
#PopularPosts2 .widget-content {padding:0;margin:auto;}</style>
<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" stickywidget",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("PopularPosts2");
//]]>
</script>
lúc 08:13 5 tháng 1, 2016
Đoạn mã này thì bó tay bạn ơi, mình không hiểu rõ mã trên để mà customize lại cho bạn được nữa.
lúc 14:31 5 tháng 1, 2016
Vì không thể bình luận bằng html nên bạn sang trang vai69.com của mình copy ở đoạn thích bài này có đoạn mã giống mã của bạn đó
lúc 09:39 29 tháng 3, 2016
Làm sao để nó đè lên những phần khác khi trượt.mà không phải những bị cái khác đè lên vậy