Cách tạo thanh bên cố định trên Tumblr

Nếu bạn đã từng cuộn xuống một trang Web và một mục trên đó không di chuyển, bạn đã chứng kiến ​​thẻ vị trí CSS đang hoạt động. Những người viết blog trên Tumblr thêm thẻ này vào mẫu của họ có thể tạo ra hiệu ứng tương tự trong blog của họ. Một nơi tốt để thử điều này là trên thanh bên của bạn. Sau khi bạn thêm thẻ vị trí vào mã HTML của blog, thanh bên của bạn vẫn cố định khi mọi người cuộn lên và xuống các trang blog của bạn.

Truy cập trang tổng quan Tumblr của bạn, sau đó nhấp vào biểu tượng cài đặt và tên blog bạn muốn cập nhật. Nếu bạn chỉ có một blog, hãy nhấp vào tên của nó.

Nhấp vào "Tùy chỉnh" sau đó là "Đã thêm HTML." Tumblr mở chủ đề của bạn và hiển thị mã HTML của nó.

Nhấp vào bất kỳ đâu bên trong mã và nhấn "Ctrl-A", sau đó là "Ctrl-C" để sao chép mã vào khay nhớ tạm thời của Windows. Mở tài liệu Notepad mới và dán mã vào tài liệu. Các bước này đảm bảo rằng bạn có một bản sao lưu của mẫu gốc của mình.

Quay lại mã HTML Tumblr và nhấn "Ctrl-F" để mở hộp tìm kiếm. Nhập "thanh bên" vào hộp tìm kiếm đó, sau đó nhấn "Enter". Tumblr tìm lần xuất hiện đầu tiên của "sidebar" và hiển thị phần mã chứa từ đó. Mã mà nó tìm thấy sẽ giống như sau:

trình bao bọc #sidebar {color: {color: Background}; }

Dòng đầu tiên của mã chứa các từ #wrapper #sidebar. Dấu ngoặc trái theo sau những từ đó.

Dán mã sau ngay bên dưới dòng mã đầu tiên:

vị trí: cố định; phải: 100px;

Thuộc tính vị trí hướng dẫn các trình duyệt sửa chữa thanh bên để nó không di chuyển khi bạn cuộn. Thuộc tính right cho trình duyệt biết có bao nhiêu pixel bạn muốn cạnh phải của thanh bên nằm từ lề phải của trang Web. Trong ví dụ này, thuộc tính right có giá trị là 100px.

Nhấp vào "Cập nhật Xem trước" để xem trước các thay đổi của bạn. Kéo thanh cuộn của cửa sổ lên và xuống và bạn sẽ thấy rằng thanh bên của bạn không di chuyển. Nhấp vào "Lưu" để lưu các thay đổi của bạn.

Lời khuyên

Bạn có thể muốn thử nghiệm với các giá trị khác nhau cho thuộc tính bên phải nếu bạn muốn điều chỉnh vị trí ngang của thanh bên. Ví dụ: nếu bạn thay đổi giá trị từ 100px thành 50px, thanh bên sẽ di chuyển xa hơn về bên phải 50 pixel.

Cảnh báo

Hãy cẩn thận khi bạn đang làm việc trong trình soạn thảo HTML, vì việc vô tình thay đổi mã hiện có có thể gây ra những ảnh hưởng đáng kể đến bố cục trang của bạn. Nếu bạn thay đổi mã và bạn không thể tìm ra cách hoàn tác các thay đổi của mình, bạn luôn có thể xóa mọi thứ trong trình chỉnh sửa HTML và dán mã dự phòng bạn đã sao chép vào trình chỉnh sửa để khôi phục nó về tình trạng ban đầu.