Star Tuấn IT
  • Trang chủ
  • Photoshop
    • PSD Ảnh bìa
    • PSD CMND
    • Tài nguyên đồ họa
    • Tải Photoshop CS6
  • Thủ thuật
    • Thủ thuật facebook
    • Thủ thuật blogspot
    • Thủ thuật photoshop
    • Thủ thuật game
  • Hình nền
    • Ảnh bìa đẹp
    • Hình nền máy tính
    • Hình nền điện thoại
  • Hướng dẫn
    • Bỏ qua quảng cáo
    • Edit PSD Ảnh bìa
    • Edit PSD CMND
    • Lấy font trong file PSD
No Result
View All Result
  • Trang chủ
  • Photoshop
    • PSD Ảnh bìa
    • PSD CMND
    • Tài nguyên đồ họa
    • Tải Photoshop CS6
  • Thủ thuật
    • Thủ thuật facebook
    • Thủ thuật blogspot
    • Thủ thuật photoshop
    • Thủ thuật game
  • Hình nền
    • Ảnh bìa đẹp
    • Hình nền máy tính
    • Hình nền điện thoại
  • Hướng dẫn
    • Bỏ qua quảng cáo
    • Edit PSD Ảnh bìa
    • Edit PSD CMND
    • Lấy font trong file PSD
No Result
View All Result
Star Tuấn IT
No Result
View All Result
Home Thủ thuật Thủ thuật blogspot

Tạo widget cố định (Sticky widget) cho Blogspot

Star Tuấn by Star Tuấn
02/02/2019
in Thủ thuật blogspot
0 0
0
Tạo widget cố định (Sticky widget) cho Blogspot
0
SHARES
14
VIEWS
Share on FacebookShare on Twitter
Demo (đang cập nhật)

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ư:

  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.

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.

Tags: html javascriptThủ thuậtThủ thuật BloggerThủ thuật BlogspotWidget
Previous Post

Chia sẻ file psd ảnh bìa làm người yêu anh nhé baby

Next Post

Giao diện Blogspot BMAG Phiên bản Việt hóa + Sửa lỗi

Star Tuấn

Star Tuấn

Next Post
Giao diện Blogspot BMAG Phiên bản Việt hóa + Sửa lỗi

Giao diện Blogspot BMAG Phiên bản Việt hóa + Sửa lỗi

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bài viết mới

  • Tuyển tập 30 hình ảnh động bánh kem chúc mừng sinh nhật lung linh
  • Top những hình ảnh bánh kem chúc mừng sinh nhật đẹp
  • Top những bức thiệp động chúc mừng năm mới – Happy New Year 2020 đẹp lung linh
  • Tuyển tập hình ảnh chúc mừng ngày nhà giáo Việt Nam 20/11
  • Tuyển tập hình ảnh và hình nền chúc mừng năm mới 2020 đẹp lung linh
Sàn giao dịch tiền ảo, thiết kế sàn giao dịch tiền ảo

Liên kết

  • Công ty Blockchain
  • Blockchain Việt Nam
  • Ứng dụng Blockchain
  • Sàn giao dịch tiền ảo
  • Thiết kế web exchange
  • Sàn giao dịch Bitcoin
  • Sàn giao dịch Ethereum
  • Sàn giao dịch tiền điện tử
  • Sàn mua bán tiền điện tử
  • Sàn mua bán ethereum
  • Chợ Bitcoin Hà Nội
  • Chợ Bitcoin Đà Nẵng
  • Chợ bitcoin Sài Gòn
  • Chợ Bitcoin Việt Nam
  • Spa làm đẹp tại Hà Nội
  • Bánh sinh nhật
  • Ảnh động mừng năm mới
  • Hình ảnh chúc mừng năm mới
  • Onlinegeeks

© 2019 Copyright 2018 Designed by Vakaxa.com.

No Result
View All Result
  • Trang chủ
  • Photoshop
    • PSD Ảnh bìa
    • PSD CMND
    • Tài nguyên đồ họa
    • Tải Photoshop CS6
  • Thủ thuật
    • Thủ thuật facebook
    • Thủ thuật blogspot
    • Thủ thuật photoshop
    • Thủ thuật game
  • Hình nền
    • Ảnh bìa đẹp
    • Hình nền máy tính
    • Hình nền điện thoại
  • Hướng dẫn
    • Bỏ qua quảng cáo
    • Edit PSD Ảnh bìa
    • Edit PSD CMND
    • Lấy font trong file PSD

© 2019 Copyright 2018 Designed by Vakaxa.com.

Login to your account below

Forgotten Password? Sign Up

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In