Chủ Đề: Tạo Widget Cố Định (Sticky Widget) Cho Blogspot

Thông thường các 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.
Demo tại blog mình nhé
Thủ thuật này có thể mang đến cho bạn một số lợi ích như: 
  1. 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.
  2. 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.
  3. 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.

CÁC BƯỚC THỰC HIỆN RẤT ĐƠN GIẢN:

Các bạn chèn đoạn code sau trước thẻ </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(){
    $("#WIDGET_ID").sticky({topSpacing:0,bottomSpacing:500});
   });
</script>
Các bạn có thể thay thế
500 là điểm dừng từ chân trang đến widget cố định đơn vị là pixel (chỉnh sửa sao cho phù với bạn)
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.
Oke chỉ như vậy thôi. Thật dễ dàng phải không :v
Chúc các bạn thành công!
View-source: Star Tuấn Blog
Bạn, Nguyễn Đức Huy và người khác
Thích

21 Nhận xét

bài viết có đọc nhiều lần rồi. hihi

Trả lời

hihi :v e đăng cho những người khác chưa biết nữa mà a :v

Trả lời

cập nhật logo anh vs nhé
https://i.imgur.com/dDW7Dmj.png

Trả lời

ông cập nhật lại link vs hình để tui đặt lại nha :3
tui có thông báo ngoài trang chủ mà

Trả lời

http://www.nguyenluongduy.com/
hình https://i.imgur.com/zDVqQzm.png

Trả lời

Chưa thấy liên kết Nguyễn Lương Duy Blog

Trả lời

chắc hôm qua máy lag lưu ko đc :3
tui đặt lại rồi nha

Trả lời

bác cmt lại link blog và link ảnh để tui cập nhật hết một lượt nhé

Trả lời

vẫn không thấy chắc bác muốn ngừng liên kết

Trả lời

blog đang sửa nha bác :3
sửa xong tui đặt lại hết tất cả liên kết nha :3
bác thông cảm

Trả lời

Hello /-hi Hưng Sờ Ta đến đây !!

Trả lời

bác Huy mình quảng cáo xí nhé =))
http://www.starsonits.tk/2017/12/7-buoc-on-gian-e-toi-uu-hoa-blogspot.html

Trả lời

Tên hiển thị : Bảo Shady Blog
URL: www.baoshady.tk
Link ảnh http://www.baoshady.tk/favicon.ico
Đặt lại liên kết

Trả lời

- Không spam bừa bãi, thô tục
- Tích chọn "Thông báo cho tôi" để nhận phản hồi từ tác giả qua mail.

Bản quyền thuộc về © Đức Huy Blog
Thiết kế bởi Phú Cường Blogger phát triển bởi Huy Đẹp Trai
Thông báo
Blog mình đang trong quá trình chỉnh sửa và hoàn thiện template mới nên còn một số chức năng click vào nhưng chưa dùng được. Lưu ý những blog nào đã liên kết với bên mình vui lòng đọc bài này để cập nhật logo blog nhé.
ĐÃ HIỂU