Chia sidebar thành 2 cột con cho Blog

Chia sidebar thành 2 cột con cho Blog

Ở một số template của Blogger đôi khi bạn sẽ thấy cột sidebar của nó chia ra thành 2 hay 3 cột để có thể đặt thêm nhiều tiện ích hơn với độ rộng phù hợp. Như vậy, khi bạn đang sở hữu một template mà cột sidebar của bạn không có chia cột như vậy thì bạn làm như thế nào? Bạn thay cả template thì thật phiền phức và có thể không phù hợp với ý của bạn. Chính vì thế hôm nay mình chia sẻ cùng các bạn cách để chia sidebar ra thành 2 cột con ngay trong template bạn đang sử dụng. Thủ thuật cũng không quá phức tạp, bạn chỉ cần thực hiện theo các bước mình giới thiệu bên dưới.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. 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;
}

5. 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 với template của bạn. Tuy nhiên bạn lưu ý: width (sidebar-wrapper) >= width (left-sidebar-wrapper) + width (right-sidebar-wrapper).

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

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='FollowByEmail1' locked='false' title='ĐĂNNG KÝ NHẬN BÀI VIẾT QUA EMAIL' type='FollowByEmail'/>

</b:section>
</div>

7. 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='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='FollowByEmail1' locked='false' title='ĐĂNNG KÝ NHẬN BÀI VIẾT QUA EMAIL' type='FollowByEmail'/>

</b:section>

<div id='left-sidebar-wrapper'> 
<b:section class='sidebar section' id='sidebar2' preferred='yes'>
<b:widget id='HTML34' locked='false' title='BÀI VIẾT MỚI' 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='ChatBox' type='HTML'/>
</b:section>
</div> 

</div>

» Chú ý: Phần code màu đỏ chính là code thêm vào, bạn hãy chú ý cần phải xác định đúng thẻ đóng để tránh lỗi template. Trong code trên các widget trong template của bạn có thể khác với code mình hướng dẫn, tuy nhiên nó không ảnh hưởng nhiều nếu bạn muốn giữ chúng lại thì không cần thay đổi gì cả, nếu muốn bỏ đi thì bạn có thể xóa chúng đi.

8. Cuối cùng save template lại

Lưu ý:
Theo bạn thích mở rộng thủ thuật này một chút, đó là việc chúng ta sẽ tạo bên dưới 2 cột đã chia ở trên một khu vực để chúng ta 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). Việc này bạn có thể thay code ở bước 7 thành code bên dưới. Code màu xanh là code được thêm vào.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='FollowByEmail1' locked='false' title='ĐĂNNG KÝ NHẬN BÀI VIẾT QUA EMAIL' type='FollowByEmail'/>

</b:section>

<div id='left-sidebar-wrapper'> 
<b:section class='sidebar section' id='sidebar2' preferred='yes'>
<b:widget id='HTML34' locked='false' title='BÀI VIẾT MỚI' 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='ChatBox' type='HTML'/>
</b:section>
</div> 

<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>

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