Tạo thanh cuộn scrollbar trong hiển thị của blogspot
Khi bạn thiết kế blog trên nền Blogger, đôi khi bạn gặp tình huống 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 cách để rút ngắn không gian trình bày trang web giúp cho trang nhà của bạn thêm chuyên nghiệp hơn.
1. Trường hợp 1: Scrollbar cho tất cả các widget:
Đăng nhập vào bảng điều khiển Blogger rồi vào chỉnh sửa HTML, chèn đoạn mã dưới đây vào bên dưới phần /* Sidebar Content */.
.sidebar .widget{
height:200px;
overflow:auto;
}
2. Trường hợp 2: Scrollbar cho các widget của một thanh bên (sidebar):
Đối với trường hợp này thì cách thực hiện tương tự Trường hợp 1 song ở phần đoạn mã chỉ cần thay sidebar thành newsidebar hoặc leftsidebar sao cho tương ứng với tên thanh bên mà bạn đã đặt trong phần Thiết kế Template cho Blogger.
3. Trường hợp 3: Scrollbar cho một widget:
Muốn tạo scrollbar cho một hoặc một vài widget riêng biệt thì cần phải biết ID của widget đó (muốn tìm ID của một widget thì vào phần chỉnh sửa HTML mà tìm, ví dụ với widget id='Label1' thì ID của widget này là Label1) sau đó thêm thuộc tính thanh cuộn như các trường hợp 1 và 2 bằng cách thay đổi đoạn mã như sau:
#Label1{
height:200px;
overflow:auto;
}
Nếu widget là các liên kết thì đoạn mã có dạng như sau:
#LinkList1 ul{
height:200px;
overflow:auto;
}
4. Trường hợp 4: Scrollbar cho đoạn văn bản dài:
Đối với đoạn văn bản dài thì đoạn mã có dạng như sau:
.scrollingtext {
height:200px;
width:500px;
border:0;
overflow:auto;
}
Đoạn mã trên được đặt trước phần ]]></b:skin>. Người dùng có thể điều chỉnh chiều cao (height) và chiều rộng (width) 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>
5. Trường hợp 5: Scrollbar cho tất cả các bài đăng:
Nếu bạn muốn tất cả các bài đăng đều có thuộc tính thanh cuộn thì trong phần Chỉnh sửa HTML cho Template, bạn tìm đoạn mã có dạng .post { rồi thêm thuộc tính scroll vào. Kết quả sau khi thêm như sau:
.post {
height:200px;
overflow:auto;
}
Chúc thành công!
Tags:
Mẹo sử dụng phần mềm
Comments[ 0 ]
Đăng nhận xét
Comments sẽ bị xóa nếu:
- Nội dung, hình ảnh gây khó chịu và phản cảm.
- Không liên quan đến bài viết.