Giữ cố định tiện ích khi kéo trang cho blogger/blogspot

Tăng tương tác Facebook của bạn giúp tiếp cận nhiều hơn
Tự động tăng like bài viết của bạn, giúp nổi bật hơn
Thêm bình luận

Khi một bài viết dài và nhiều hình ảnh, người xem sẽ kéo trang xem nội dung tiếp theo, nhưng theo đó nội dung bên sidebar nếu ít sẽ không hi...

Khi một bài viết dài và nhiều hình ảnh, người xem sẽ kéo trang xem nội dung tiếp theo, nhưng theo đó nội dung bên sidebar nếu ít sẽ không hiển thị và tạo nên 1 khoảng trống. Để giải quyết vấn đề này, chúng ta sẽ dùng code phía dưới để giữ cố định tiện ích không mất đi khi kéo trang.

Khi giữ cố định sẽ giúp blog bạn thể hiện được nhiều nội dung hơn, hoặc dùng cho các banner quảng cáo sẽ dễ làm nổi bật và tăng khả năng click ....

Giữ cố định tiện ích khi kéo trang cho blogger/blogspot vanthangit

Copy và dán vào trước </body>

<script type='text/javascript'>

//<![CDATA[

(function(b){var c={topSpacing:0,bottomSpacing:0,className:"is-sticky",center:false},f=b(window),e=b(document),d=[],h=f.height(),a=function(){var j=f.scrollTop(),q=e.height(),p=q-h,l=(j>p)?p-j:0;for(var m=0;m<d.length;m++){var r=d[m],k=r.stickyWrapper.offset().top,n=k-r.topSpacing-l;if(j<=n){if(r.currentTop!==null){r.stickyElement.css("position","").css("top","").removeClass(r.className);r.currentTop=null}}else{var o=q-r.elementHeight-r.topSpacing-r.bottomSpacing-j-l;if(o<0){o=o+r.topSpacing}else{o=r.topSpacing}if(r.currentTop!=o){r.stickyElement.css("position","fixed").css("top",o).addClass(r.className);r.currentTop=o}}}},g=function(){h=f.height()};if(window.addEventListener){window.addEventListener("scroll",a,false);window.addEventListener("resize",g,false)}else{if(window.attachEvent){window.attachEvent("onscroll",a);window.attachEvent("onresize",g)}}b.fn.sticky=function(i){var j=b.extend(c,i);return this.each(function(){var l=b(this);if(j.center){var k="margin-left:auto;margin-right:auto;"}stickyId=l.attr("id");l.wrapAll('<div id="'+stickyId+'StickyWrapper" style="'+k+'"></div>').css("width",l.width());var m=l.outerHeight(),n=l.parent();n.css("width",l.outerWidth()).css("height",m).css("clear",l.css("clear"));d.push({topSpacing:j.topSpacing,bottomSpacing:j.bottomSpacing,stickyElement:l,currentTop:null,stickyWrapper:n,elementHeight:m,className:j.className})})}})(jQuery);

//]]>

</script>

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;#likefbvt&quot;).sticky({topSpacing:0,bottomSpacing:420});

});

</script>

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;#HTML2&quot;).sticky({topSpacing:0,bottomSpacing:420});

});

</script>

Các bạn chỉnh sửa phần bôi màu bằng tên thẻ mà bạn muốn giữ cố định ( Nếu dùng class thì thay '#' thành '.' )
Nếu gặp vấn đề hãy comment phía dưới mình sẽ giúp!


BỔ SUNG:  Không chỉ dùng để giữ cố định sidebar mà bạn có thể dùng cho nhiều thứ khác như menu, nút share, comment,nội dung nổi bật, ...

TỔNG KẾT: Với code trên bạn đã có thể giữ cố định một tiện ích bất kì, làm nội dung nổi bật không bị mất khi cuộn trang, quảng cáo tiếp cận nhiều hơn,... Hy vọng sẽ giúp ích cho bạn.

FACEBOOK COMMENT

6 Ý kiến bạn đọc

● Không Spam link dưới mọi hình thức.
● Comment sẽ được giải đáp trong ngày.
● Chèn ảnh vào comment bằng các chèn link ảnh trực tiếp
● [pre] Code của bạn [pre], dùng cho code