Subscribe:

Admin

Chủ Nhật, 13 tháng 5, 2012

Tạo thanh cuộn scrollbar



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. 
Chúng tôi sẽ giới thiệu cách tạo scrollbar trong một số tình huống khi thiết kế blog với Blogger. 


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>
Ví dụ: Dưới đây là kết quả sau khi điều chỉnh thuộc tính thanh cuộn cho đoạn văn bản dài.

Việt Nam (tên chính thức: Cộng hòa xã hội chủ nghĩa Việt Nam) là một quốc gia nằm ở phía đông bán đảo Đông Dương, thuộc khu vực Đông Nam Á. Việt Nam phía bắc giáp Trung Quốc, phía tây giáp Lào và Campuchia, phía tây nam giáp vịnh Thái Lan và phía đông và phía nam giáp biển Đông và có hơn 4.000 hòn đảo, bãi đá ngầm lớn nhỏ, gần và xa bờ, có vùng nội thủy, lãnh hải, vùng đặc quyền kinh tế và thềm lục địa được Chính phủ Việt Nam xác định gần gấp ba lần diện tích đất liền (khoảng trên 1 triệu km²). Trên biển Đông có quần đảo Trường Sa và Hoàng Sa đã được Việt Nam khẳng định chủ quyền cũng như bác bỏ mọi ý kiến của các quốc gia khác như Trung Quốc.

Sau khi Việt Nam Dân chủ Cộng hòa ở miền Bắc và Mặt trận dân tộc giải phóng miền Nam Việt Nam giành chiến thắng trước Việt Nam Cộng hòa ở miền Nam ngày 30 tháng 4 năm 1975, hai miền Bắc-Nam được thống nhất. Ngày 2 tháng 7 năm 1976 nước Việt Nam được đặt quốc hiệu là Cộng hòa Xã hội Chủ nghĩa Việt Nam.

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; 
}

Quan Trọng

...........................................