Điều chỉnh kích thước chiều rộng và chiều cao Tiện ích trong Blogspot

Điều chỉnh kích thước chiều rộng và chiều cao Tiện ích trong Blogspot

Nếu bạn có sử dụng chức năng chia thân trang Blogspot thành 2 phần để sắp xếp các tiện ích, hay đơn giản là bạn muốn kiểm soát kích thước rộng - cao của các tiện ích để có 1 giao diện vừa ý thì bạn sẽ cần   đến đoạn code này, nhằm giới hạn chiều rộng, chiều cao tối đa cho tiện ích hoặc cố định kích thước các tiện ích như mong muốn.

Đoạn Code này sẽ giới hạn chiều rộng, cao của tiện ích và đồng thời xuất hiện thanh cuộn nếu kích thước tiện ích vượt quá kích thước tùy chỉnh.

1. Trước tiên, bạn cần xác định được ID của tiện ích cần chỉnh sửa. Việc xác định ID tiện ích mình đã nói ở đây  

Ví dụ ở đây mình chọn tiện ích BlogArchive1

2. Vào Thiết kế => Chỉnh sửa HTML => Chuyển đến Tiện ích => BlogArchive1 (thay bằng Tiện ích mà bạn muốn chỉnh sửa)

3. Đoạn Code của tiện ích sẽ tương tự như sau (Code của các thành phần chính đều giống nhau, khác ở phần nội dung và chức năng tiện ích)

<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'/>

4. Thêm vào đoạn Code của tiện ích các thành phần được tô màu đỏ dưới đây

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

5. Lưu tiện ích.

Sửa các giá trị max-height:200px, max-width:200px thành các giá trị mà bạn cần thiết lập.
overflow:auto; là lệnh xuất hiện thanh cuộn khi kích thước tiện ích lớn hơn kích thước bạn muốn thiết lập.

Đây là đoạn Code giới hạn kích thước tối đa cho tiện ích. Còn nếu muốn cố định kích thước tiện ích luôn thì các bạn sửa max-height thành height và max-width thành width, nếu chỉ muốn quy định kích thước chiều cao thì xóa bỏ lệnh max-width (width) và tương tự xóa bỏ max-height (height) nếu chỉ muốn tùy chỉnh kích thước chiều rộng tiện ích.

Chúc các bạn thành công!