Trần Bá Đạt Blog
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
Không có kết quả
Tất cả kết quả
Trang chủ Blogspot

Tạo widget cố định (Sticky widget) khi cuộn trang cho Blogspot

Trần Bá Đạt bởi Trần Bá Đạt
27/04/2018
trong Blogspot, Google Adsense, Thủ thuật Blogspot
8
CHIA SẺ
2.3k
LƯỢT XEM
Chia sẻTweetPinChia sẻ

NÊNĐỌC THÊM

Người chơi không nạp làm thế nào mạnh hơn người chơi nạp?

Kinh nghiệm sử dụng kim cương hợp lý trong Pocket Ninja

Những tính năng cơ bản của game Pocket Ninja

Bạn tham gia MMO và muốn tìm cách tạo widget cố định khi cuộn trang cho Blogspot của mình để tăng tỉ lệ click? Hay bạn muốn hướng người đọc đến những nội dung nổi bật của website mình bằng cách cố định một phần widget của mình khi cuộn trang nhằm gây chú ý cho người đọc?

Thực ra mà nói, thì việc cố định một phần widget cho Blogspot hay các website khác sẽ mang đến nhiều lợi ích khác nhau cho website đó, ví dụ như 2 lợi ích trên: Khi muốn tăng tỉ lệ click vào các banner quảng cáo, hay khi muốn làm người dùng chú ý đến những nội dung được cung cấp trên widget.
Với hướng dẫn tạo sticky widget khi cuộn trang ở bài viết này, bạn có thể dễ dàng tùy chỉnh các thông số khoảng cách để quy định khả năng trượt theo của widget cần cố định. Cùng xem nhé.

Cách tạo widget cố định khi cuộn trang

Để tạo được widget như vậy không khó, chỉ với vài bước cơ bản là các bạn đã hoàn thành rồi.
– Đầu tiên là vào trang quản trị Blogger

Xem thêm: Cách tạo thanh menu cố định khi cuộn trang

– Sau đó, vào bố cục, chọn Widget bạn cần cố định, và tiến hành chỉnh sửa.
– Thêm đoạn code này vào trong widget đó, nhớ đưa phần nội dung code ban đầu vào đúng vị trí nhé:
<script>
var $stickyHeight = 460; // chiều cao của banner quảng cáo
var $padding = 5; // khoảng cách top của banner khi dính
var $topOffset = 2560; // khoảng cách từ top của banner khi bắt đầu dính (tức là khoảng cách tính từ trên xuống đến vị trí đặt banner )
var $footerHeight = 100; // Định vị điểm dừng của banner, tính từ chân lên
/* <![CDATA[ */
function scrollSticky(){
if($(window).height() >= $stickyHeight) {
var aOffset = $('#sticky').offset();
if($(document).height() - $footerHeight - $padding < $(window).scrollTop() + $stickyHeight) {
var $top = $(document).height() - $stickyHeight - $footerHeight - $padding - 185;
$('#sticky').attr('style', 'position:absolute; top:'+$top+'px;');
}else if($(window).scrollTop() + $padding > $topOffset) {
$('#sticky').attr('style', 'position:fixed; top:'+$padding+'px;');
}else{
$('#sticky').attr('style', 'position:relative;');
}
}
}
$(window).scroll(function(){
scrollSticky();
});
/* ]]> */
</script>
<div id="sticky">
Đặt code quảng cáo của bạn
</div>
Trong đó, chúng ta có những thông tin được giải thích rõ như khoảng cách từ trên xuống, khoảng cách bao nhiêu thì bắt đầu áp dụng cố định widget, khoảng cách bao nhiêu từ dưới lên sẽ dừng… Các bạn tùy chỉnh cho phù hợp với website mình nhé.
Và phần “Đặt code quảng cáo của bạn” chính là vị trí cần đặt của nội dung nhé.
– Lưu lại và tận hưởng thành quả
Như vậy là chỉ với vài bước đơn giản bạn đã có thể tạo cho mình một widget cố định khi cuộn trang, hy vọng với thủ thuật nhỏ này thì các bạn sẽ tăng được ít nhiều thu nhập của mình.
Chúc các bạn thành công. Nhớ theo dõi chuyên mục “Thủ thuật Blogger” này nhé. smile
5/5 - (4 bình chọn)
Chia sẻ8TweetPinChia sẻ

Nhận thông báo khi bài viết này được cập nhật. Đăng ký ngay!

Hủy đăng ký
Trần Bá Đạt

Trần Bá Đạt

Là một người yêu thích công nghệ thông tin và hiện đang là một SEOer, một Marketer. Trong đó tranbadat.com là một trong những dự án của mình nhằm cung cấp nhiều kiến thức hơn cho mọi người về Internet, SEO, Blogspot, Wordpress và Windows

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ình luận 12

  1. Hoàng Văn Sỹ says:
    4 năm trước

    Thank bác đã chia sẻ

    Trả lời
  2. Mr Wid says:
    5 năm trước

    Cái widget mà tắt được trên bản mobile thì hay bạn nhỉ smile

    Trả lời
  3. Trần Bá Đạt _CTPG_ says:
    6 năm trước

    Cái lỗi này hình như trước mình cũng có gặp. Bạn gửi web lên mình check xem. smile

    Trả lời
  4. Ánh Trăng (TTP) says:
    6 năm trước

    x-) We don't forget

    Trả lời
  5. Unknown says:
    6 năm trước

    Mình tạo nó chạy nhưng nó ko được mượt lắm. Khi cuộn xuống thì ok, nhưng đến lúc cuộn lên lại bị đè lên footer. Ad có cách nào khắc phục ko. Tks Ad

    Trả lời
  6. Yang Chen says:
    7 năm trước

    mình đăng ký tk adsen rồi, mà đặt lên blog chẳng thấy hiện

    Trả lời
  7. Thế Giới Xe says:
    7 năm trước

    tks đại ca nhé

    Trả lời
  8. Trần Bá Đạt _CTPG_ says:
    7 năm trước

    Bạn làm đúng theo hướng dẫn của mình hết rồi chứ? laugh

    Trả lời
  9. Lien Vu says:
    7 năm trước

    Ad ơi Sao mình tạo nó lại không chạy theo vậy nhỉ?

    Trả lời
  10. Phan Hữu Tài says:
    7 năm trước

    :>) hay quá

    Trả lời
  11. Trần Bá Đạt _CTPG_ says:
    7 năm trước

    Cảm ơn bạn nha. Ở trên đt nút like không tác dụng lắm nên mình ẩn hết rồi laugh :p

    Trả lời
  12. Cuong CAD says:
    7 năm trước

    :)), xem trên điện thoại o thấy nút Like nên comment vậy. Chúc site bạn luôn có nhiều người ghé thăm!

    Trả lời

ĐƯỢC YÊU THÍCH

  • Cách gỡ bỏ Microsoft Office tận gốc

    Cách gỡ bỏ Microsoft Office hoàn toàn khỏi máy tính khi bị lỗi

    13 chia sẻ
    Chia sẻ 11 Tweet 0
  • Tổng hợp 1069 icon Facebook – biểu tượng cảm xúc FB 2020

    104 chia sẻ
    Chia sẻ 103 Tweet 0
  • Đánh giá và chia sẻ theme Newspaper 12.1.1 mới nhất miễn phí (Cập nhật)

    26 chia sẻ
    Chia sẻ 25 Tweet 0
  • Chia sẻ 300 mẫu Animation Template Powerpoint tuyệt đẹp

    2 chia sẻ
    Chia sẻ 1 Tweet 0
  • Hướng dẫn nhận key Office 2016 bản quyền, active Office 2016 mới nhất (Updated 2020)

    75 chia sẻ
    Chia sẻ 74 Tweet 0

VPS NÊN DÙNG

Trần Bá Đạt Blog
Trần Bá Đạt Blog hình thành với mục đích chia sẻ, hướng dẫn và đồng hành cùng bạn tiếp cận và giải quyết các vấn đề về Internet, Windows, Wordpress và SEO.

Email: [email protected]
Fanpage: Trần Bá Đạt Blog

DMCA.com Protection Status

EXTERNAL LINKS

  • Chữ ký số Viettel CA
  • Hóa đơn điện tử viettel
  • bàn trang điểm đẹp
  • Technology Knowledge

TAGS THÔNG DỤNG

  • Tìm hiểu Gmail
  • Tìm hiểu theme Newspaper
  • Kiến thức Wordpress

INTERNAL LINKS

  • Biểu tượng Facebook
  • Key Win 10
  • Key Office 2016
  • Cách vào Facebook
  • SEO Blogspot
  • Thủ thuật Blogspot
  • Lập Gmail
  • Ứng dụng học tiếng Anh
  • Key Office 2019
  • Liên hệ
  • Sitemap

© Copyright 2017 Trần Bá Đạt Blog. Hosted by Vultr.

Không có kết quả
Tất cả kết quả
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja

© Copyright 2017 Trần Bá Đạt Blog. Hosted by Vultr.