Hướng dẫn tạo thanh cuộn Scrollbar bằng CSS cho Blogger

Khi bạn viết bài trên blog, đôi khi nội dung một trang quá dài hoặc các tiêu đề trên widget quá nhiều. Biện pháp tạo thanh cuộn (Scrollbar) là một giải pháp để rút ngắn không gian trình bày giúp cho blog của bạn thêm chuyên nghiệp và đẹp hơn.

Trong bài viết này longanit.com sẻ hướng dẫn cho các bạn cách tạo Scrollbar cho blogger cũng như một số tiện ích (Widget).

1. Tạo thanh cuộn cho Widget

Trường hợp 1: Scrollbar cho tất cả các Widget Blogger

•  Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML 
• Chèn đoạn code bên dưới vào trước thẻ ]]></b:skin> 

.sidebar .widget{
max-height:300px;
max-width:300px;
overflow:auto;
}

 Trường hợp 2: Scrollbar cho một widget cố định

Trong trường hợp này bạn cần xác định ID của Widget mà bạn cần tạo Scrollbar. Cách xác định ID bạn làm như sau:

Đăng nhập vào Blogger - Bố cục như hình bên dưới.

Trang quản lý các Widget trong blogger  

Như hình trên tôi chọn một Widget bất kỳ sau đó click vào chỉnh sửa. Một Popup mở ra trên thanh address bạn rê chuột vào cuối thanh địa chỉ để xem ID của Widget như hình bên dưới thì Widget ID là "Label1"

Lưu ý: Mỗi Widget sẻ có một ID riêng biệt. Trong blogger thường có tên là : HTML1, HTML2, HTML3...,

Xem thông tin ID của Widget trên Bloggger

 Sau khi xác định được Id của Widget bạn vào Chủ đề - Chỉnh sửa HTML sau đó chèn  đoạn code bên dưới vào trước thẻ đóng  ]]></b:skin>

#Label1{
    max-height:300px;
    max-width:300px;
    overflow:auto;
    }

Giải thích: Trong  đoạn code trên thì mình sử dụng các thuộc tính sau:

• max-height:300px; chiều cao tối đa của tiện ích, nếu muốn không muốn tạo thanh cuộn theo chiều dọc thì bạn bỏ thuộc tính này.
• max-width:300px; chiều rộng tối đa của tiện ích, nếu muốn không muốn tạo thanh cuộn theo ngang dọc thì bạn bỏ thuộc tính này.
• overflow:auto là thanh cuộn xuất hiện khi chiều cao tiện ích vượt chiều cao tối đa.

 Nếu Widget là các liên kết thì đoạn mã có dạng như sau:

#LinkList1 ul{
height:300px;
overflow:auto;
}

2. Tương tự như vậy cho các Widget khác cũng như các tiện ích trên Blogger ví dụ như sau:

Tạo thanh cuộn cho phần comment tìm trong CSS đoạn code sau

#comments-block {.....}

Tạo thanh cuộn cho đoạn văn bản dài bạn sử dụng cú pháp CSS như sau

.scrollingtext {
height:200px;
width:500px;
border:0;
overflow:auto;
}

Bạn có thể điều chỉnh chiều cao (height:200) và chiều rộng (width:500) tùy ý.
Mỗi khi đăng bài thì bạn nhập văn bản vào giữa 2 phần cú pháp định dạng (lưu ý đăng bài ở dạng Chỉnh sửa HTML) như sau:

<div class="scrollingtext">
Văn bản của bạn....
</div>

Kết luận: Qua bài viết trên tôi đã hướng dẫn cho các bạn cách tạo thanh Scrollbar cho Blog cũng như các tiện ích Widget. Cảm ơn các bạn đã quan tâm theo dõi nếu có thắc mắc vui lòng để lại comment bên dưới để góp ý hoặc trao đổi.