Tạo Sticky Sidebar đơn giản với CSS

Để tạo Stickly Sidebar cho Blogger, ngoài sử dụng Javascript. Bạn cũng có thể tự mình tạo Stickly Sidebar với CSS đơn giản và dễ thực hiện

Tạo Stickly Sidebar đơn giản với CSS

Nếu bạn sử dụng WordPress thì sẽ có khá nhiều Plugin giúp tạo Stickly Sidebar. Tuy nhiên, với những bạn sử dụng Blogger thì việc sử dụng thư viện JS để tạo Stickly Sidebar không hề đơn giản. Bạn có thể sử dụng thuộc tính position: sticky trong CSS để làm việc ngày. Rất đơn giản và bạn có thể làm như sau:

.class_name{
position: -webkit-sticky;
position: sticky;
top: 0;
padding-top: 10px;
}

Bạn có thể điều chỉnh thuộc tính top/padding-top lại cho phù hợp với giao diện Blog của bạn nhé.

Thêm đoạn CSS đó ở đâu?

Nếu bạn đang sử dụng Blogger có thể thêm đoạn CSS trên ở trong cặp thẻ <style></style> của <head> nhé.

Trường hợp bạn sử dụng WordPress, có thể thêm đoạn CSS trên trong tệp style.css hoặc một tệp CSS mặc định của Tempalte mà bạn đang dùng.

Kiểm tra xem CSS Stickly Sidebar có hoạt động với website của bạn không?

Nếu bạn dang sử dụng WordPress

  1. Hãy sử dụng Công cụ dành cho nhà phát triển Chrome để kiểm tra CSS.
  2. Nhấp chuột phải vào bất kỳ đâu trên màn hình và Mở Công cụ dành cho nhà phát triển Chrome.
  3. Từ Tab kiểu, nhấp vào tệp style.css của bạn để mở trong bảng Nguồn.
  4. Bây giờ hãy cuộn xuống và ở cuối tệp style.css, hãy thêm mã ở trên.

Nếu mã này làm cho thanh bên của bạn bị dính cố định. Bạn có thể sử dụng mã này nếu nó không hoạt động, hãy sử dụng lớp CSS của thanh bên.

5/5 - (1 bình chọn)