Thông thường khi bạn xem một bài viết trên blog và kéo xuống dưới thì những widget ở trên sẽ bị ẩn dần đi. Tuy nhiên bạn cũng có thể giữ cố định một hay nhiều widget khi người đọc kéo xuống dưới để tăng sự tương tác với blog.
Việc này có thể mang đến cho bạn một số lợi ích như:
- Cố định widget Bài đăng phổ biến để tăng lượt view và thời gian xem blog. Điều này tốt cho SEO.
- Cố định widget Like fanpage hoặc Subscribe by email để tăng lượt theo dõi blog qua email hoặc các mạng xã hội.
- Một chú ý là bạn không nên đặt quảng cáo của Google Adsense hoặc quảng cáo nào khác cố định trên blog, bạn có thể bị các trang quảng cáo phạt vì việc này.
OK. Giờ chúng ta bắt tay vào làm thôi, để thực hiện điều này bạn chỉ cần thêm đoạn code sau vào trước thẻ </body> trong chỉnh sửa mẫu là được.
<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(){
$("#WIDGET_ID").sticky({topSpacing:0,bottomSpacing:500});
});
</script>
Tùy chỉnh
Thay thế
500 là điểm dừng từ chân trang đến widget cố định đơn vị là pixel
WIDGET_ID thành tiện ích mà bạn muốn cố định
Để biết được WIDET ID bạn vào Bố cục nhấp vào chỉnh sửa Widget muốn lấy ID. Khi Popup hiện lên bạn sẽ thấy ở cuối thanh địa chỉ URL có dạng như sau widgetId = và đến ID Widget.
