Chia sidebar Blog thành 2 cột

Nếu Template của Blogger sidebar có 2 hay 3 cột thì có thể đặt thêm được nhiều tiện ích hơn. Tuy nhiên, blog của bạn sidebar chỉ có 1 cột. Để chia sidebar ra thành 2 cột con ngay trong template bạn đang sử dụng bạn chỉ cần thực hiện theo các bước sau đây:

1. Đăng nhập vào tài khoản Blogger
2. Chọn Mẫu >> chỉnh sửa HTML (Edit HTML)
3. Tìm đến code như bên dưới hoặc tương tự

#sidebar-wrapper {
float:right;
margin-top:10px;
overflow:hidden;
width:265px; /* độ rộng của cột sidebar trên blog của bạn*/
word-wrap:break-word;
}

4. Thêm code bên dưới vào ngay sau code vừa tìm được ở trên

#left-sidebar-wrapper { width:49%; /* độ rộng của cột sidebar con bên trái*/
float:left; }
#right-sidebar-wrapper { width:49%; /* độ rộng của cột sidebar con bên phải*/
float:right; }

Bạn có thể tùy chỉnh lại độ rộng (width) của các cột sidebar trên cho phù hợp. Lưu ý: width (sidebar-wrapper) >= width (left-sidebar-wrapper) + width (right-sidebar-wrapper).

5. Tiếp theo bạn tìm đến code bên dưới hoặc tương tự

<div id='rsidebar-wrapper'>
<b:section class='sidebar' id='sidebarright' preferred='yes'>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>

</b:section>
</div>

6. Bây giờ bạn hãy thêm vào code vừa tìm được đoạn code như bên dưới

<div id='rsidebar-wrapper'>
<b:section class='sidebar' id='sidebarright' preferred='yes'>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>

</b:section>
<div id='left-sidebar-wrapper'> 
<b:section class='sidebar section' id='sidebar2' preferred='yes'>
<b:widget id='HTML34' locked='false' title='' type='HTML'/>
</b:section>
</div> 

<div id='right-sidebar-wrapper'>
<b:section class='sidebar section' id='sidebar3' preferred='yes'>
<b:widget id='HTML23' locked='false' title='' type='HTML'/>
</b:section>
</div> 

</div>

Nếu muốn tạo bên dưới 2 cột đã chia ở trên một khu vực để có thể chèn thêm tiện ích với độ rộng bằng sidebar (tức bằng tổng độ rộng 2 cột đã chia). Ta chỉ cần thay đoạn code trên thành co de bên dưới.

<div id='rsidebar-wrapper'>
<b:section class='sidebar' id='sidebarright' preferred='yes'>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>

</b:section>
<div id='left-sidebar-wrapper'> 
<b:section class='sidebar section' id='sidebar2' preferred='yes'>
<b:widget id='HTML34' locked='false' title='' type='HTML'/>
</b:section>
</div> 

<div id='right-sidebar-wrapper'>
<b:section class='sidebar section' id='sidebar3' preferred='yes'>
<b:widget id='HTML23' locked='false' title='' type='HTML'/>
</b:section>
</div> 
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>

7. Lưu template.