Code phân chia bố cục tiện ích 2 cột widget trong main blogger

Thiết Kế Web thấy đây thật sự là bài viết có ích, khi giúp bạn dễ dàng điều chỉnh bố cục trong Blogger theo ý của người dùng. Giúp cho mỗi Blog đa dạng thêm về hình ảnh, cũng như chức năng cần thiết.

Hãy làm theo hướng dẫn của Thiết Kế Web để có được hiệu quả tốt nhé!

- Có 2 cách để thực hiện thủ thuật này, Thiết Kế Web xin giới thiệu cả 2 thủ thuật cho các bạn.
Cách 1: Dùng các số tuyệt đối (Các này hơi phức tạp đòi hỏi có chút am hiểu về CSS).
Cách 2: Dùng số tương đối (Cách này được xem là dễ thực hiện hơn).
Sau đây chúng ta sẽ đi tìm hiểu tường tận 2 cách:
Cách 1: Dùng các số tuyệt đối (Các này hơi phức tạp đòi hỏi có chút am hiểu về CSS).

1. Vào Mẫu => Chỉnh sửa HTML
2. Chèn đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>

#webdgkcolumn-wrapper{width:530px;float:left;word-wrap:break-word;overflow:hidden}
#webdgkcolumnleft-wrapper{width:260px;float:left;word-wrap:break-word;overflow:hidden}
#webdgkcolumnright-wrapper{width:260px;float:right;margin-left:10px;word-wrap:break-word;overflow:hidden}
.webdgkcolumn .widget{background:#fff;border:1px solid #ccc; height:300px; overflow:hidden; margin:5px 0; padding:10px}
.webdgkcolumn h2{background:#333;color:#fff;line-height:1.4em;padding:2px 10px;margin-bottom:1em}

Tùy chỉnh:
width:530px : chiều rộng của widget (Lưu ý không lớn hơn chiều rộng của bài đăng trên blogspot của bạn. Ví dụ chiều rộng phần bài đăng trên blog của bạn là 520px thì bạn nên để width trong khoảng nhỏ hơn hoặc bằng 520 px).
width:260px : chiều rộng của 2 cột widget (Lưu ý tổngchiều rộng của 2 Widget này phải nhỏ hơn chiều rộng của Widget tổng tức là 260 + 260 phải nhỏ hơn 530)
height:300px : chiều cao của 2 cột widget (Bạn có thể đặt tùy ý nhưng không nên qua lớn như thế sẽ rất sấu)
(Nếu Bạn cảm thấy khó để thay đổi các thông số thì bạn có thể tham khảo cách 2 ở bên dưới).

3. Tiếp tục, tìm trong template đoạn code sau :

<div id='main-wrapper'>

- và chèn ngay sau nó đoạn code bên dưới :>

<div id='webdgkcolumn-wrapper'>
<div id='webdgkcolumnleft-wrapper'>
<b:section class='webdgkcolumn' id='webdgkcolumnleft' preferred='yes'/>
</div>
<div id='webdgkcolumnright-wrapper'>
<b:section class='webdgkcolumn' id='webdgkcolumnright' preferred='yes'/>
</div>
<div style='clear:both'/>
</div>

4. Lưu mẫu lại. Bây giờ bạn có thể trở lại Phần tử trang và chèn vào đó bất kỳ widget nào bạn thích.

- Lưu ý nếu trong phàn tử trang xuất hiện thành một cột thảng như bên dưới bạn đừng lo cứ thêm tiện ích vào quay lại trang chủ sẽ thấy ngay.

Cách 2: Dùng số tương đối
- Cách này được xem là dễ thực hiện hơn. Cách này gọi là khác nhưng trên thực tế tương tự như cách trên, tuy nhiên mình sử dụng số tương đối (%) thay cho con số tuyệt đối (px) nên các bạn không phải tùy chỉnh nhiều như cách trên
1. Vào Mẫu => Chỉnh sửa HTML
2. Thêm đoạn code sau trước thẻ ]]></b:skin>

#magazine-left2 {width: 45%;float: left;}
#magazine-right2 {width: 45%;float: right;}

3. Tìm đoạn code sau:

<div id='main-wrapper'>

Thêm vào sau nó đoạn code bên dưới:

<b:section class='sidebar' id='magazine-left' showaddelement='yes'>
<b:widget id='Text51' locked='false' title='Column 1' type='Text'/>
</b:section> <b:section class='sidebar' id='magazine-right' showaddelement='yes'>
<b:widget id='Text52' locked='false' title='Column 2' type='Text'/>
</b:section>
<div style="clear: both;">
</div>

Lưu ý với mẫu của blogger!

Với các blog sử dụng mẫu SIMPLE của blogger không có thẻ

<div id='main-wrapper'>

Thì các bạn thêm vào sau thẻ:

          <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>

Chúc thành công!