16 tháng 5, 2012

Giới hạn chiều rộng - chiều cao tối đa của tiện ích.

Trong thủ thuật này mình đã thêm  thanh cuộn dọc cho tiện ích khi chiều cao của tiện ích vượt quá chiều cao mình đã giới hạn.

A. Thanh cuộn bao gồm cả tiêu đề:
1. Xác định ID của widget cần chỉnh sửa.
Bạn chọn chỉnh sửa tiện ích cần thay đổi chiều cao - chiều rộng và đến cuối dòng link để lấy ID. (xem hình)

Theo trên hình thì tiện ích của mình có ID là BlogArchive1
2. Vào thiết kế → chỉnh sửa HTML → chèn vào trước thẻ ]]></b:skin> đoạn code sau:
#BlogArchive1 {
max-height:200px;
max-width:200px;
overflow:auto;
}

Thay BlogArchive1  là ID bạn lấy được ở bước 1. Sau template lại là xong.
B. Thanh cuộn không bao gồm tiêu đề:
1. Xác định ID của widget cần chỉnh sửa. Thực hiện tương tự bước 1 của phần A.
Trên hướng dẫn của mình là BlogArchive1
2. Vào thiết kế → chỉnh sửa HTML → mở rộng tiện ích mẫu.
Dùng từ khóa là ID bạn vừa tìm được ở bước 1 để tìm đoạn code có dạng tương tự sau:
<b:widget id='BlogArchive1' ... >
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
...
  </div>
  <b:include name='quickedit'/>

3. Bạn thêm vào đoạn code trên những thành phần sau:
<b:widget id='BlogArchive1' ... >
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
<div style='max-height:200px; max-width:200px; overflow:auto;'>
  <div class='widget-content'>
...
  </div>
  <b:include name='quickedit'/>
</div>

Save template lại là hoàn thành.
Chú ý:
Phần ... sẽ khác nhau tùy theo blog.
Giải thích.
max-height: là chiều cao tối đa
max-width: là chiều rộng tối đa
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.
Bạn thay những thông số trên cho phù hợp với blog là được rồi.
Những bạn hiểu về css thì có thể thêm 1 vài thành phần để làm cho tiện ích nổi bật hơn.

0 nhận xét:

|» Đăng hình ảnh | code chèn sẽ là [img] Link ảnh [/img]
|» Đăng nhạc của tui | code sẽ là [nct] Link bài hát [/nct]
|» Đăng Video Youtube | code sẽ là [youtube] Link Video Youtube [/youtube]
|» <b> Chữ in đậm <\/b>
|» <i> Chữ in nghiêng <\/i>

:) :( :)) :(( =)) Mã hóa code