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.


Giới thiệu cách tạo scrollbar trong một số tình huống khi thiết kế blogger với Blogger.
I. Tạo thanh cuộn cho Widget.
Trường hợp 1: Scrollbar cho tất cả các Widget.A. Scrollbar cho tất cả các widget: 1.Vào Thiết kế (Mẫu) → chỉnh sửa HTML → chèn vào trước thẻ ]]></b:skin> đoạn code sau:
.sidebar .widget{
max-height:300px;
max-width:300px;
overflow:auto;
}
B. 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 trên song ở phần đoạn mã chỉ cần thay HTML10 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. Phần tên này tùy thuộc vào người thiết kế nen template đó đặt tên. Nếu bạn không biết xác định thì cứ Comment bên dưới mình sẽ xác định giùm.

Trường hợp 2: Scrollbar cho 1 Widget.
A. Scrollbar Bao gồm cả tiêu đề: 
Trước tiên bạn phải xác định Id của Widget bằng cách Vào Thiết kế Bố cục (Phần tử trang) → Chọn tiện ích bất bạn muốn tạo thanh cuộn và bấm vào Chỉnh sửa.
Scrollbar - Thủ thuật tạo thanh cuộn cho Widget Blogger
Một cửa sổ Popup bật lên, bạn nhìn vào phía trên góc phải (gần thanh tiêu đề) sẽ thấy dòng có dạng tương tự sau: …null&widgetId=HTML1 (trong trường hợp này Id là widget HTML1, đối với widget khác sẽ có ID khác)
Scrollbar - Thủ thuật tạo thanh cuộn cho Widget Blogger
Sau khi xác định được Id bạn ào thiết kếchỉnh sửa HTML → chèn vào trước thẻ ]]></b:skin> đoạn code sau
#HTML1 {
    max-height:300px;
    max-width:300px;
    overflow:auto;
    }
Thay đổi số màu xanh để chiều rộng và chiều cao theo ý bạn.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;
}

B. Scrollbar không bao gồm tiêu đề Widget:  
Bạn xác định Widget như cách gồm cả tiêu đề.Vào thiết kếchỉnh sửa HTML → mở rộng tiện ích mẫu. Tìm kiếm với từ khóa là Id của Wiget bạn muốn thêm thanh cuộn. (Trường hợp này của mình là HTML1). Khi đó bạn được đoạn code tương tự sau:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
Thêm vào trước thẻ <div class='widget-content'> (Đây là nội dung của Widget). và trước thẻ </b:includable> hai đoạn code tương ứng như sau:
<b:widget id='HTML10' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
<div style='max-height:200px; max-width:200px; overflow:auto;'>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Lưu mẫu lại là được.
Trong các đoạn code trên thì mình sử dụng các thuộc tính sau:

  • max-height:200px; 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:200px; 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
II. tạo thanh cuộn (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ì Vào thiết kế chỉnh sửa HTML → chèn vào trước thẻ ]]></b:skin> đoạn code sau:
.post {
height:200px;
overflow:auto;
} 
III. Tạo thanh cuộn cho phần Comment
Vào thiết kếchỉnh sửa HTMLsau đó bấm cặp phím Ctrl+F để 
mở hộp tìm kiếm và gõ vào hộp đó dòng lệnh  
#comments-block 
Lúc này, bạn sẽ thấy trên khung lớn có dòng lệnh tương tự nhau sau: 
#comments-block {.....}
Tùy người thiết kế mà giao diện blog sẽ có dòng lệnh trong cặp thẻ {.....} khác nhau. Bạn chép copy đoạn code này dán vào phía trong dòng lệnh trên, để trong dấu ngoặc móc } :
;height: 400px; 
width: 480px; 
overflow:auto;
Khi đó sẽ được như sau:
#comments-block {.....
height: 400px; 
width:480px; 
overflow:auto;
 } 
Bạn có thể thay đổi kích thước của khung ở Width (chiều ngang), height (chiều dài) để phù hợp với Blog của mình.Bấm Lưu mẫu
Giờ đây, trên blog của bạn sẽ có thanh trượt ở phần comments rất tiện lợi
IV. Scrollbar cho đoạn văn bản dài:
Đối với đoạn văn bản dài thì Vào thiết kếchỉnh sửa HTML → chèn vào trước thẻ ]]></b:skin> đoạn code 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>

Nhận xét&Bình luận

Kết nối&Chia sẻ:

Designed by www.kenhshare.net | Copyright © 2010 Template Design by Mr.Thành Công