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

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?

Tạo widget cố định (Sticky widget) khi cuộn trang cho Blogspot
Hướng dẫn tạo widget cố định khi cuộn trang
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é. :)

Post a Comment

  1. :)), 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!

    ReplyDelete
    Replies
    1. 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 :D :p

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

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

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

    ReplyDelete
  3. 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

    ReplyDelete
    Replies
    1. 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. :-)

      Delete

[blogger]

Author Name

Contact Form

Name

Email *

Message *

Powered by Blogger.